/* Il sito che respira: logo che si disegna, testi che si posano, showreel. Stesso gesto del reel. */
.vivo .brand svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:filo 1.9s cubic-bezier(.65,0,.35,1) .25s forwards}
.vivo .brand-n{opacity:0;transform:translateX(6px);animation:posa 1s cubic-bezier(.2,.7,.2,1) 1.75s forwards}
.vivo .brand:hover svg path{animation:filo-r 1.1s cubic-bezier(.65,0,.35,1) forwards}
@keyframes filo{0%{stroke-dashoffset:1}82%{stroke-dashoffset:.137}100%{stroke-dashoffset:0}}
@keyframes filo-r{0%{stroke-dashoffset:1}75%{stroke-dashoffset:.137}100%{stroke-dashoffset:0}}
@keyframes filo2{0%{stroke-dashoffset:1}70%{stroke-dashoffset:.5}100%{stroke-dashoffset:0}}
@keyframes posa{to{opacity:1;transform:none}}

.vivo .appare{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.vivo .appare.qui{opacity:1;transform:none}

.sr{position:relative;padding:14vh 24px 12vh;border-top:1px solid var(--line,rgba(213,184,147,.22))}
.sr-in{position:relative;max-width:1280px;margin:0 auto}
.sr-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 18px;color:var(--dim,#A9A294)}
.sr-head b{font-weight:400;color:var(--sig,#D5B893)}
.sr-box{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer}
.sr-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sr-box .sr-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45));color:#efe7da;cursor:pointer;transition:opacity .6s ease}
.sr-box .sr-play span{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.32em;text-transform:lowercase;padding:14px 22px;border:1px solid rgba(239,231,218,.55);transition:background .4s ease,color .4s ease}
.sr-box:hover .sr-play span{background:#efe7da;color:#111}
.sr-box.va .sr-play{opacity:0;pointer-events:none}
/* l'angolo del logo che inquadra il film */
.sr-angolo{position:absolute;left:-1px;right:-12px;bottom:-12px;top:-12px;pointer-events:none;overflow:visible}
.sr-angolo svg{width:100%;height:100%;overflow:visible;display:block}
.sr-angolo path{fill:none;stroke:var(--sig,#D5B893);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.sr.qui .sr-angolo path{animation:filo2 2.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.sr-cred{margin-top:14px;color:var(--dim,#A9A294);opacity:.7;font-size:10px !important}
@media (max-width:700px){.sr{padding:10vh 16px 8vh}.sr-angolo{right:-8px;bottom:-8px;top:-8px}}
@media (prefers-reduced-motion:reduce){
  .vivo .brand svg path,.sr.qui .sr-angolo path{animation:none;stroke-dashoffset:0}
  .vivo .brand-n{animation:none;opacity:1;transform:none}
  .vivo .appare{opacity:1;transform:none;transition:none}
}

/* Carattere: Bodoni Moda (Parma, 1798) per titoli e nome. Il testo corrente resta Montserrat. */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-italic.woff2) format('woff2')}
.vivo .open .h1,.vivo h1:not(.role),.vivo h2{font-family:'Bodoni Moda',Didot,serif !important;font-weight:500 !important;letter-spacing:-.015em !important;font-optical-sizing:auto}
.vivo .open .h1 em,.vivo h1:not(.role) em,.vivo h2 em{font-style:italic !important;font-family:'Bodoni Moda',Didot,serif !important}
.vivo .open p:not(.h1){font-family:'Bodoni Moda',Didot,serif !important;font-style:italic;font-weight:400 !important}
.vivo .brand-n{font-family:'Bodoni Moda',Didot,serif;font-weight:500;letter-spacing:.5em;margin-right:-.5em;font-size:13px}
/* micro-animazione: le lettere salgono da una fessura */
.vivo .sp .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.vivo .sp .c{display:inline-block;transform:translateY(108%)}
.vivo .sp.qui .c{transform:none;transition:transform 1.15s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--i)*32ms)}
.vivo .open .h1.sp{animation:none !important;opacity:1 !important}
@media (prefers-reduced-motion:reduce){.vivo .sp .c{transform:none !important;transition:none !important}}
/* coerenza: menu, etichette, didascalie e pulsanti nello stesso carattere */
.vivo .mono,.vivo .mono *{font-family:'Bodoni Moda',Didot,serif !important;font-weight:500;letter-spacing:.16em}
.vivo .mono{font-size:12.5px}
.vivo .cta2 .l a,.vivo .end a,.vivo a.btn,.vivo .cap b,.vivo .cap strong{font-family:'Bodoni Moda',Didot,serif !important}
.vivo .cta2 .l a{font-style:italic;font-weight:500;font-size:clamp(20px,1.8vw,26px)}
.vivo .sr-play span{font-family:'Bodoni Moda',Didot,serif !important;font-style:italic;letter-spacing:.14em;font-size:15px}
/* il nome grande in fondo, col film dentro le lettere */
.vivo .sign .ink{font-family:'Bodoni Moda',Didot,serif !important;font-weight:900 !important;letter-spacing:-.025em !important;font-size:16.5vw !important;line-height:.86 !important;font-optical-sizing:auto}

/* ===== LA STANZA DI LUCE (09/10/2026): ogni pagina si accende di una luce, ogni volta diversa ===== */
html[data-luce]{--L-neon:#ff5a1f;--L-chiaro:#ffb48a;--L-a:#ff6a2b;--L-b:#c2350f;--L-c:#5a1607;--L-scuro:#1c0703;--L-carta:#f6dccb;--L-ink:#2a0d05;--L-testo:#ffe6d4;--L-hue:-20deg}
html[data-luce=rosso]{--L-neon:#ff2a1f;--L-chiaro:#ff9a8f;--L-a:#ff3b2b;--L-b:#a8140c;--L-c:#3d0806;--L-scuro:#170303;--L-carta:#f4d6d1;--L-ink:#2a0606;--L-testo:#ffe2de;--L-hue:-38deg}
html[data-luce=blu]{--L-neon:#3b86ff;--L-chiaro:#9ec2ff;--L-a:#3d8bff;--L-b:#0f3ba8;--L-c:#08163d;--L-scuro:#040a1f;--L-carta:#d9e3f7;--L-ink:#071233;--L-testo:#e3ecff;--L-hue:182deg}
html[data-luce=giallo]{--L-neon:#ffc21f;--L-chiaro:#ffe08a;--L-a:#ffd23d;--L-b:#b07a06;--L-c:#3a2604;--L-scuro:#150e02;--L-carta:#f6eccb;--L-ink:#2a1d03;--L-testo:#fff3d6;--L-hue:10deg}
html[data-luce]{--bg:transparent;--bg2:rgba(0,0,0,.18);--fg:var(--L-testo);--sig:var(--L-chiaro);--paper:var(--L-carta);--ink:var(--L-ink);background:var(--L-scuro) !important}
html[data-luce] body{background:transparent !important}
.L-stanza{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,var(--L-a) 0%,var(--L-b) 28%,var(--L-c) 62%,var(--L-scuro) 100%);opacity:0;animation:L-accendi 1.6s steps(1,end) .15s forwards,L-respira 9s ease-in-out 2s infinite}
@keyframes L-accendi{0%{opacity:0}10%{opacity:.85}15%{opacity:.1}24%{opacity:.9}29%{opacity:.25}40%{opacity:1}100%{opacity:1}}
@keyframes L-respira{50%{filter:brightness(1.07) saturate(1.06)}}
.L-binari{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;opacity:0;animation:su .9s ease 1.1s forwards}
.L-binari line{stroke:var(--L-chiaro);stroke-width:1;opacity:.3;vector-effect:non-scaling-stroke}
.L-lampada{position:fixed;left:50%;top:40%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 65%);mix-blend-mode:screen}
@keyframes su{to{opacity:1}}
/* il nome grande col film dentro: il fondo deve restare pieno perché il trucco funzioni */
html[data-luce] .sign .ink{background:var(--L-scuro) !important}
html[data-luce] .sign{background:var(--L-scuro)}
/* il logo: striscia di luce che si disegna in loop */
html[data-luce] .brand,html[data-luce] .brand *{text-decoration:none !important}
html[data-luce] .vivo .brand svg path,html.vivo[data-luce] .brand svg path{stroke:var(--L-chiaro);filter:drop-shadow(0 0 3px var(--L-neon)) drop-shadow(0 0 10px var(--L-neon));animation:L-filo 9s cubic-bezier(.65,0,.35,1) .4s infinite}
html.vivo[data-luce] .brand:hover svg path{animation:L-filo 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes L-filo{0%{stroke-dashoffset:1}17%{stroke-dashoffset:.137}22%{stroke-dashoffset:0}72%{stroke-dashoffset:0}86%{stroke-dashoffset:-1}100%{stroke-dashoffset:-1}}
/* le scritte: insegne che si accendono, poi giocano col fuoco come un obiettivo */
html.vivo[data-luce] .sp .w{overflow:visible}
html.vivo[data-luce] .sp .c{transform:none;opacity:.07;transition:none}
html.vivo[data-luce] .sp.qui .c{animation:L-lettera 1.4s linear forwards,L-fuoco 9s ease-in-out infinite;animation-delay:var(--d),calc(var(--x) + 3s);transition:none}
@keyframes L-lettera{0%{opacity:.07}10%{opacity:1;text-shadow:0 0 6px #fff,0 0 18px var(--L-neon),0 0 40px var(--L-neon)}14%{opacity:.15;text-shadow:none}22%{opacity:1;text-shadow:0 0 6px #fff,0 0 18px var(--L-neon),0 0 40px var(--L-neon)}100%{opacity:1;text-shadow:0 0 3px rgba(255,255,255,.5),0 0 14px var(--L-neon),0 0 34px rgba(0,0,0,0)}}
@keyframes L-fuoco{0%,55%,100%{filter:blur(0);transform:none}64%{filter:blur(5px);transform:scale(1.05) translateY(-.02em)}72%{filter:blur(1.2px);transform:scale(1.015)}80%{filter:blur(0);transform:none}}
/* sulle sezioni carta il testo è scuro: niente alone bianco */
html.vivo[data-luce] .facts .sp.qui .c,html.vivo[data-luce] .who .sp.qui .c{animation:L-lettera-carta 1.4s linear forwards,L-fuoco 9s ease-in-out infinite;animation-delay:var(--d),calc(var(--x) + 3s)}
@keyframes L-lettera-carta{0%{opacity:.07}10%{opacity:1}14%{opacity:.2}22%{opacity:1}100%{opacity:1}}
/* le immagini prendono la luce della stanza; ci passi sopra e torna il loro colore */
html[data-luce] .frame img,html[data-luce] .film button,html[data-luce] .sr-box video,html[data-luce] .ig video,html[data-luce] .ig img{filter:grayscale(1) sepia(1) hue-rotate(var(--L-hue)) saturate(2.6) brightness(.85) contrast(1.08);transition:filter 1.1s ease}
html[data-luce] .frame:hover img,html[data-luce] .film button:hover,html[data-luce] .sr-box:hover video,html[data-luce] .sr-box.va video,html[data-luce] .ig :hover>video,html[data-luce] .ig :hover>img{filter:none}
html[data-luce] .sign video{filter:grayscale(1) sepia(1) hue-rotate(var(--L-hue)) saturate(2.4) brightness(.95)}
html[data-luce] .sign .ink{font-size:8.5vw !important}
html[data-luce] .mnav{mix-blend-mode:normal;color:var(--L-testo)}
@media (prefers-reduced-motion:reduce){.L-stanza,.L-binari{animation:none;opacity:1}html.vivo[data-luce] .sp .c,html.vivo[data-luce] .sp.qui .c{animation:none;opacity:1}html[data-luce] .vivo .brand svg path,html.vivo[data-luce] .brand svg path{animation:none;stroke-dashoffset:0}}
/* pagine interne: stessi colori della stanza */
html[data-luce]{--navbg:rgba(0,0,0,.22);--white:var(--L-testo);--accent:var(--L-chiaro);--muted:color-mix(in srgb,var(--L-testo) 70%,transparent)}
html[data-luce] nav{backdrop-filter:blur(10px)}
html[data-luce] .video-card,html[data-luce] .film,html[data-luce] .reel button,html[data-luce] .cta{background:rgba(0,0,0,.22) !important}
html[data-luce] body.carta,html[data-luce] body.notte{--bg:transparent;--bg2:rgba(0,0,0,.22);--white:var(--L-testo);--grey:color-mix(in srgb,var(--L-testo) 72%,transparent);--soft:color-mix(in srgb,var(--L-testo) 85%,transparent);--accent:var(--L-chiaro);--warm:var(--L-chiaro);--line:color-mix(in srgb,var(--L-chiaro) 30%,transparent);--brand:var(--L-testo);--navbg:rgba(0,0,0,.22)}
html[data-luce] .video-card img{filter:grayscale(1) sepia(1) hue-rotate(var(--L-hue)) saturate(2.6) brightness(.85) contrast(1.08);transition:filter 1.1s ease}
html[data-luce] .video-card:hover img{filter:none}
/* la Stanza (cubo 3D): anche lei prende la luce */
html[data-luce] .room{background:radial-gradient(ellipse at 50% 40%,var(--L-a) 0%,var(--L-b) 30%,var(--L-c) 65%,var(--L-scuro) 100%) !important;animation:L-accendi 1.6s steps(1,end) .15s both,L-respira 9s ease-in-out 2s infinite}
html[data-luce] .box{background:var(--L-scuro) !important}
html[data-luce] .tier:has(input:checked){background:color-mix(in srgb,var(--L-neon) 14%,transparent) !important}

/* ===== IL CORRIDOIO DELLE STANZE (home) ===== */
.corr{position:relative;padding:12vh 24px 14vh;border-top:1px solid var(--line,rgba(255,255,255,.15))}
.corr-t{font-family:'Bodoni Moda',Didot,serif;letter-spacing:.2em;font-size:12px;opacity:.75;margin:0 0 5vh;text-transform:lowercase}
.corr-g{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.st{--c:#fff;position:relative;display:block;padding:7vh 3vw 6vh;text-decoration:none !important;color:inherit;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);border-right:1px solid color-mix(in srgb,currentColor 18%,transparent);overflow:hidden}
.st:nth-child(3n){border-right:0}
.st b{display:block;font-family:'Bodoni Moda',Didot,serif;font-weight:700;font-size:clamp(34px,4.6vw,78px);line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(255,240,228,.6);transition:color .25s,text-shadow .25s,-webkit-text-stroke-color .25s}
.st span{display:block;margin-top:16px;font-family:'Bodoni Moda',Didot,serif;font-style:italic;font-size:16px;opacity:0;transform:translateY(6px);transition:opacity .6s ease .1s,transform .6s ease .1s}
.st::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 100%,var(--c),transparent 70%);opacity:0;transition:opacity .5s ease;z-index:-1}
.st:hover b,.st.acceso b{color:#fff;-webkit-text-stroke-color:transparent;animation:st-neon 1s linear both;text-shadow:0 0 6px #fff,0 0 20px var(--c),0 0 50px var(--c)}
.st:hover span,.st.acceso span{opacity:.95;transform:none}
.st:hover::before,.st.acceso::before{opacity:.35}
@keyframes st-neon{0%{opacity:.2}12%{opacity:1}18%{opacity:.25}28%{opacity:1}100%{opacity:1}}
.st-film{--c:#3b86ff}.st-commercial{--c:#ff2a1f}.st-fashion{--c:#ffc21f}.st-corporate{--c:#ff9a2e}.st-emotional{--c:#ff5a1f}.st-ai{--c:#b26bff}
@media (max-width:800px){.corr-g{grid-template-columns:1fr 1fr}.st:nth-child(3n){border-right:1px solid color-mix(in srgb,currentColor 18%,transparent)}.st:nth-child(2n){border-right:0}}
@media (hover:none){.st span{opacity:.8;transform:none}}