/* ════════════════════════════════════════════════════════════════════
   Project Mantra · base.css
   Un solo set di regole per tutte le pagine (home, servizi, works,
   contatti, Productions, Social) e per il blog. Si carica PRIMA dei
   fogli di pagina: qui ci sono i gettoni (colori, caratteri, scala,
   spazi, raggi, tempi) e le parti uguali ovunque: barra alta, menu,
   pulsante "Caffettino?", etichette, pulsanti, piè di pagina con i
   social, lettore grande dei video ("film-box").
   I fogli di pagina usano solo questi gettoni: niente misure proprie.
   ════════════════════════════════════════════════════════════════════ */

@property --ring  { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --boost { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  /* ── colori del marchio ── */
  --ink:#0D0C11; --surface:#1D1B24; --surface-2:#1d1b24; --text:#F7F7F8; --paper:#F3F2EE;
  --white:#fff; --black:#000;
  --amber:#D4763A; --amber-b:#E8893F; --crimson:#A8293A; --wine:#6E1D33; --terra:#A8432E;
  --teal:#2F8A92; --teal-t:#4FB0B8; --teal-deep:#234555; --viola:#5B2A6E;
  /* firma su fondo scuro (tinte chiare, per il contrasto) e su fondo chiaro (tinte scure) */
  --firma:linear-gradient(95deg,#E8893F 0%,#E0584F 27%,#CC5079 50%,#A67BD0 75%,#4FB8C0 100%);
  --firma-ink:linear-gradient(95deg,#B85A28 0%,#A8293A 30%,#6E1D33 55%,#5B2A6E 76%,#1F6870 100%);
  --anello:#E8893F, #E0584F 22%, #CC5079 42%, #A67BD0 62%, #4FB8C0 82%, #E8893F;
  --t1:rgba(247,247,248,.93); --t2:rgba(247,247,248,.85);
  --rule:rgba(247,247,248,.24);
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08);
  --text-dim:#b4b4bd; --text-faint:#8b8b96;
  /* accento della pagina (la home usa l'ambra; Productions il teal; Social l'arancio) */
  --accent-t:var(--amber-b);
  --aura:rgba(168,41,58,.16);

  /* ── caratteri: un ruolo per famiglia ── */
  --f-title:'Sora',system-ui,sans-serif;          /* titoli e pulsanti */
  --f-accent:'Fraunces',Georgia,serif;            /* SOLO la parola d'accento, in corsivo */
  --f-text:'Inter',-apple-system,system-ui,sans-serif; /* testi */
  --f-mono:'JetBrains Mono',ui-monospace,monospace;    /* etichette e numeri */

  /* ── scala unica ── */
  --fs-hero:clamp(48px,min(8.6vw,15.5vh),148px);  /* apertura e chiusura di pagina */
  --fs-display:clamp(44px,6.4vw,104px);           /* titolo di sezione */
  --fs-h2:clamp(32px,3.4vw,50px);                 /* sottotitolo, frase grande */
  --fs-h3:clamp(22px,1.8vw,26px);                 /* titolo di voce o di scheda grande */
  --fs-lead:clamp(18px,1.4vw,21px);               /* testo d'apertura di sezione */
  --fs-body:18px;                                 /* testo */
  --fs-card:18px;                                 /* titolo di scheda (Sora) */
  --fs-small:15px;                                /* testo piccolo, pulsanti */
  --fs-btn:15px;
  --fs-btn-big:22px;
  --fs-mono:13px;                                 /* etichette e dati in Mono */

  /* pesi fissi */
  --w-title:800; --w-sub:700; --w-ui:600; --w-text:400; --w-bold:600; --w-mono:500; --w-accent:500;
  /* interlinea */
  --lh-hero:.92; --lh-display:.95; --lh-h2:1.06; --lh-h3:1.2; --lh-lead:1.5; --lh-body:1.6; --lh-mono:1.4;
  /* spaziatura delle lettere */
  --ls-hero:-.04em; --ls-display:-.04em; --ls-h2:-.03em; --ls-h3:-.02em; --ls-ui:-.005em;
  --ls-accent:-.02em; --ls-label:.16em; --ls-mono:.04em;

  /* ── spazi ── */
  --sp-80:80px; --sp-120:120px; --sp-160:160px;
  --sec-y:clamp(var(--sp-80),10vw,var(--sp-160));   /* sopra e sotto ogni sezione */
  --gap-head:clamp(48px,5.6vw,80px);                 /* tra testa di sezione e contenuto */
  --gap-tag:clamp(24px,3vw,40px);                    /* tra etichetta e titolo */
  --gut:clamp(20px,4.4vw,72px);                      /* margine laterale */
  --wrap:1440px;                                     /* contenitore unico */
  --navh:124px;

  /* ── raggi ── */
  --r-s:6px; --r-m:14px; --r-l:24px; --r-pill:999px;

  /* ── tempi ed easing ── */
  --d-press:160ms; --d-fast:200ms; --d-base:320ms; --d-slow:620ms;
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-in-out:cubic-bezier(.77,0,.175,1);
  --e-drawer:cubic-bezier(.32,.72,0,1);
}
@media (max-width:900px){ :root{ --navh:84px; } }
@media (max-width:768px){
  :root{
    --fs-hero:clamp(38px,11.2vw,64px);
    --fs-display:clamp(38px,10.6vw,56px);
    --fs-h2:clamp(28px,7.6vw,40px);
    --fs-h3:21px;
    --fs-lead:18px;
    --fs-body:17px;
    --fs-card:17px;
    --fs-small:14px;
    --fs-btn-big:20px;
    --fs-mono:12px;
  }
}

/* ════════ Base ════════ */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-color:#2e2936 var(--ink); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ background:var(--ink); color:var(--text); font-family:var(--f-text); font-size:var(--fs-body); font-weight:var(--w-text); line-height:1.55; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
em{ font-style:italic; }
b,strong{ font-weight:var(--w-bold); }
input,textarea,button,select{ font:inherit; }
::selection{ background:var(--amber-b); color:var(--ink); }
:focus-visible{ outline:2px solid var(--amber-b); outline-offset:4px; border-radius:4px; }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2e2936; border-radius:10px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
.m3-sr{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.m3-wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
.mono{ font-family:var(--f-mono); }
/* parola d'accento: Fraunces corsivo, una per schermata */
.accent{ font-family:var(--f-accent); font-style:italic; font-weight:var(--w-accent); letter-spacing:var(--ls-accent); }
/* firma a gradiente sul testo (senza cambiare carattere) */
.grad{ background:linear-gradient(100deg,var(--amber) 0%,var(--crimson) 38%,var(--wine) 60%,var(--teal) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ════════ Etichette (Mono, con la linea che segue) ════════ */
.m3-tag,.sx-tag{ display:flex; align-items:center; gap:18px; font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--t2); margin-bottom:var(--gap-tag); }
.m3-tag::after,.sx-tag::after{ content:''; flex:1; max-width:520px; height:1px; background:linear-gradient(90deg,rgba(247,247,248,.5),rgba(247,247,248,0)); }
.m3-tag--center,.sx-tag--center{ justify-content:center; }
.m3-tag--center::before,.m3-tag--center::after,
.sx-tag--center::before,.sx-tag--center::after{ content:''; flex:0 0 clamp(28px,6vw,96px); height:1px; background:rgba(247,247,248,.45); }
.m3-tag--ink,.sx-tag--ink{ color:rgba(13,12,17,.74); }
.m3-tag--ink::after,.sx-tag--ink::after{ background:linear-gradient(90deg,rgba(13,12,17,.42),rgba(13,12,17,0)); }
.m3-tag--ink.m3-tag--center::before,.m3-tag--ink.m3-tag--center::after,
.sx-tag--ink.sx-tag--center::before,.sx-tag--ink.sx-tag--center::after{ background:rgba(13,12,17,.4); }

/* ════════ Pulsanti: stessa altezza, stesso carattere, stessa pressione ════════ */
.m3-btn,.sx-btn,.mp-ghost,.mform-next,.mform-submit{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:0 30px; border:0; border-radius:var(--r-pill);
  font:var(--w-ui) var(--fs-btn)/1 var(--f-title); letter-spacing:var(--ls-ui);
  white-space:nowrap; cursor:pointer; text-transform:none;
  transition:transform var(--d-press) var(--e-out), background-color var(--d-fast) ease, box-shadow var(--d-fast) ease, color var(--d-fast) ease;
  -webkit-tap-highlight-color:transparent;
}
.m3-btn:active,.sx-btn:active,.mp-ghost:active,.mform-next:active,.mform-submit:active{ transform:scale(.97); }
.m3-btn__arr,.sx-btn__arr{ display:inline-block; transition:transform var(--d-fast) var(--e-out); }
/* pieno chiaro */
.m3-btn{ background:var(--text); color:var(--ink); }
.m3-btn::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--accent-t); opacity:0; transition:opacity var(--d-fast) ease; }
/* contorno */
.mp-ghost,.sx-btn--line{ background:rgba(13,12,17,.18); color:var(--text); box-shadow:inset 0 0 0 1px rgba(247,247,248,.45); }
@media (hover:hover) and (pointer:fine){
  .m3-btn:hover::before{ opacity:1; }
  .m3-btn:hover .m3-btn__arr,.sx-btn:hover .sx-btn__arr{ transform:translateX(4px); }
  .mp-ghost:hover,.sx-btn--line:hover{ background:rgba(247,247,248,.08); box-shadow:inset 0 0 0 1px rgba(247,247,248,.85); }
}

/* ════════ Barra alta e menu ════════ */
.nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:1000; }
.topbar{ background:rgba(13,12,17,.96); border-bottom:1px solid var(--line-soft); overflow:hidden; max-height:38px; opacity:1; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s; }
.nav-wrap.scrolled .topbar{ max-height:0; opacity:0; border-bottom-color:transparent; }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; font:var(--w-mono) 11px/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; }
.topbar-loc{ color:var(--text-faint); }
.topbar-divs{ display:flex; align-items:center; gap:26px; }
.tdiv{ display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); transition:color var(--d-fast); }
.tdiv:hover{ color:var(--text); }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
.dot-blue{ background:#00a8ff; box-shadow:0 0 8px rgba(0,168,255,.7); }
.dot-orange{ background:#ff8a12; box-shadow:0 0 8px rgba(255,138,18,.7); }
.dot-mark{ background:linear-gradient(100deg,#e8893f,#a8293a,#2f8a92); }
.arrx{ font-size:11px; opacity:.7; }

.navbar{ position:static; padding:22px 0; background:rgba(21,20,26,.94); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border-bottom:1px solid transparent; transition:padding .35s ease, background-color .35s ease, border-color .35s ease; }
.navbar.scrolled,.nav-wrap.scrolled .navbar{ padding:14px 0; background:rgba(15,14,19,.97); border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; min-height:44px; }
.nav-logo img{ height:38px; width:auto; display:block; }
/* marchio delle divisioni (al posto del logo) */
.nav-mark{ display:inline-flex; align-items:center; min-height:44px; font:var(--w-title) 14px/1 var(--f-title); letter-spacing:.16em; text-transform:uppercase; color:var(--text); white-space:nowrap; }
.nav-mark span{ color:var(--accent-t); margin-left:.4em; }
.nav-links{ display:flex; align-items:center; gap:40px; list-style:none; margin-left:auto; }
.nav-links a{ position:relative; font:500 var(--fs-small)/1 var(--f-text); letter-spacing:-.005em; color:var(--text-dim); transition:color var(--d-fast); }
.nav-links a:hover{ color:var(--text); }
.nav-links a.active,.nav-links a[aria-current="page"]:not(.nav-coffee){ color:var(--text); }
.nav-links a.active::after,.nav-links a[aria-current="page"]:not(.nav-coffee)::after{ content:''; position:absolute; left:0; right:0; bottom:-8px; height:1px; background:var(--accent-t); }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; margin-right:-10px; cursor:pointer; background:none; border:none; }
.nav-toggle span{ width:24px; height:1.5px; background:var(--text); transition:transform .3s var(--e-out); }
.nav-dots{ display:none; align-items:center; gap:10px; margin-left:22px; }
.nav-wrap.scrolled .nav-dots{ display:flex; }
.ndiv{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:var(--r-pill); font:var(--w-ui) 12px/1 var(--f-title); letter-spacing:.005em; white-space:nowrap; color:#0d0c11; transition:transform .22s var(--e-out), box-shadow .22s, filter .22s; }
.ndiv .arrx{ font-size:12px; opacity:.6; }
.ndiv:hover{ transform:translateY(-2px); filter:saturate(1.12) brightness(1.04); }
.ndiv-blue{ background:linear-gradient(100deg,#39d0ff,#00a8ff 55%,#0d8ee0); box-shadow:0 3px 16px rgba(0,168,255,.4); }
.ndiv-blue:hover{ box-shadow:0 7px 24px rgba(0,168,255,.58); }
.ndiv-orange{ background:linear-gradient(100deg,#ffc21a,#ff9d1a 50%,#ff7a0f); box-shadow:0 3px 16px rgba(255,138,18,.4); }
.ndiv-orange:hover{ box-shadow:0 7px 24px rgba(255,138,18,.58); }
.ndiv-mark{ background:var(--text); box-shadow:0 3px 16px rgba(247,247,248,.16); }
.ndiv-mark .dot{ margin-right:2px; }
.nav-mobile-divs{ display:none; }
@media (max-width:1200px){ .nav-dots{ display:none !important; } }

/* ── "Caffettino?": anello a gradiente del marchio che gira, con alone ── */
.nav-links a.nav-coffee{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 24px; border:1.5px solid transparent; border-radius:var(--r-pill);
  font:var(--w-ui) 14px/1 var(--f-title); letter-spacing:var(--ls-ui); color:#fff;
  background:linear-gradient(#0d0c11,#0d0c11) padding-box,
             conic-gradient(from calc(var(--ring) + var(--boost)),var(--anello)) border-box;
  animation:mx-ring 10s linear infinite, mx-boost 3s linear infinite paused;
  transition:color var(--d-fast) ease, transform var(--d-press) var(--e-out);
}
.nav-coffee::after{ content:''; position:absolute; inset:-5px; z-index:-1; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from calc(var(--ring) + var(--boost)),var(--anello));
  filter:blur(11px); opacity:.42; animation:mx-ring 10s linear infinite, mx-boost 3s linear infinite paused; transition:opacity var(--d-base) ease; }
.nav-coffee::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:var(--firma); opacity:0; transition:opacity var(--d-base) var(--e-out); }
.nav-coffee span{ position:relative; z-index:1; }
.nav-coffee:active{ transform:scale(.97); }
@keyframes mx-ring{ to{ --ring:360deg; } }
@keyframes mx-boost{ to{ --boost:360deg; } }
@media (hover:hover) and (pointer:fine){
  .nav-links a.nav-coffee:hover,.nav-coffee:hover::after{ animation-play-state:running, running; }
  .nav-links a.nav-coffee:hover{ color:var(--ink); }
  .nav-coffee:hover::before{ opacity:1; }
  .nav-coffee:hover::after{ opacity:.7; }
}

@media (max-width:900px){
  .topbar{ display:none; }
  .ndiv{ padding:7px 13px; font-size:11px; letter-spacing:0; }
  .nav-links{ position:fixed; top:0; right:0; bottom:0; width:min(86%,420px); height:100vh; height:100svh; overflow-y:auto; background:#0d0c11; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; padding:110px 30px 40px; transform:translateX(102%); visibility:hidden; transition:transform .35s var(--e-drawer), visibility .35s; border-left:1px solid var(--line); z-index:1000; }
  .nav-links.open{ transform:none; visibility:visible; }
  .nav-links a{ display:inline-flex; align-items:center; min-height:44px; font-size:19px; color:var(--text); }
  .nav-links a.active::after,.nav-links a[aria-current="page"]:not(.nav-coffee)::after{ right:auto; width:24px; }
  .nav-links a.nav-coffee{ font-size:16px; min-height:52px; padding:0 28px; }
  .nav-toggle{ display:flex; position:relative; z-index:1001; }
  .nav-mobile-divs{ display:flex; flex-direction:column; gap:14px; padding-top:20px; margin-top:8px; border-top:1px solid var(--line-soft); width:100%; }
  .nmd-label{ font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-faint); }
  .nav-mobile-divs a{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--text); }
  .nav-links.open > li{ animation:mx-menu .5s var(--e-out) both; }
  .nav-links.open > li:nth-child(2){ animation-delay:.05s; } .nav-links.open > li:nth-child(3){ animation-delay:.1s; }
  .nav-links.open > li:nth-child(4){ animation-delay:.15s; } .nav-links.open > li:nth-child(5){ animation-delay:.2s; }
  .nav-links.open > li:nth-child(6){ animation-delay:.25s; }
  /* (responsive 13/10) a menu aperto le tre linee diventano una X: si capisce come chiuderlo */
  .nav-toggle span{ transition:transform .3s var(--e-out), opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  /* (responsive 13/10) velo sulla striscia di pagina che resta scoperta a fianco del pannello */
  body::after{ content:''; position:fixed; inset:0; z-index:999; background:rgba(8,7,10,.62); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s linear .35s; }
  html:has(#navLinks.open) body::after{ opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s; }
  .nav-logo,.nav-mark{ transition:opacity .35s ease; }
  html:has(#navLinks.open) .nav-logo,html:has(#navLinks.open) .nav-mark{ opacity:.35; }   /* il logo resta sopra il velo: si abbassa con lui */
}
@keyframes mx-menu{ from{ opacity:0; transform:translateX(40px); } }

/* ════════ Piè di pagina ════════ */
.footer{ position:relative; overflow:hidden; background:var(--ink); color:var(--text); border-top:1px solid var(--line); padding:var(--sp-120) 0 44px; }
.footer-aura{ position:absolute; bottom:-220px; left:50%; transform:translateX(-50%); width:700px; height:420px; background:radial-gradient(ellipse,var(--aura),transparent 70%); filter:blur(80px); pointer-events:none; }
.footer-in{ position:relative; z-index:2; }
.footer-top{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr)); gap:48px; margin-bottom:var(--sp-80); }
.footer-lead{ font:var(--w-sub) var(--fs-h3)/var(--lh-h3) var(--f-title); letter-spacing:var(--ls-h3); max-width:20ch; color:var(--text); }
.footer .grad{ font-family:inherit; font-style:normal; font-weight:inherit; background-image:var(--firma); }
.footer-note{ margin-top:20px; max-width:36ch; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--text-dim); }
.footer-h{ font:var(--w-mono) var(--fs-mono)/1.3 var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-faint); margin-bottom:22px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.footer-col a{ font-size:var(--fs-small); line-height:1.3; color:var(--text-dim); transition:color var(--d-fast); }
.footer-col a[href]:hover{ color:var(--text); }
/* icone social: bianche, 20 px, con etichetta */
.soc{ display:inline-flex; align-items:center; gap:12px; }
.soc svg{ flex:none; width:20px; height:20px; color:var(--text); }
.soc:not([href]){ cursor:default; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:36px; border-top:1px solid var(--line-soft); }
.footer-bottom p{ font-size:13px; color:var(--text-faint); }
.footer-bottom a{ color:var(--text-dim); transition:color var(--d-fast); }
.footer-bottom a:hover{ color:var(--text); }
@media (max-width:1100px){ .footer-top{ grid-template-columns:repeat(4,minmax(0,1fr)); } .footer-brand{ grid-column:1 / -1; } }
@media (max-width:768px){
  .footer{ padding-top:var(--sp-80); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:40px 24px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
/* aree da toccare di almeno 44 px: telefono e ogni schermo a tocco (anche il tablet in orizzontale) */
@media (max-width:768px), (pointer:coarse){
  .footer-col ul{ gap:0; }
  .footer-col a{ display:inline-flex; align-items:center; min-height:44px; }
}
/* (responsive 13/10) area di tocco più grande, senza cambiare l'aspetto: link legali, barra alta, voci del menu largo */
@media (pointer:coarse){
  .footer-bottom a,.tdiv,.ndiv,.nav-links a:not(.nav-coffee){ position:relative; }
  .footer-bottom a::before,.tdiv::before,.ndiv::before{ content:''; position:absolute; inset:-14px -6px; }
}
@media (min-width:901px) and (pointer:coarse){
  .nav-links a:not(.nav-coffee)::before{ content:''; position:absolute; inset:-13px -12px; }
}

/* ════════ Lettore grande dei video (film-box), uguale su tutte le pagine ════════ */
.film-box{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:clamp(72px,10vh,104px) 4vw clamp(24px,5vh,56px); background:rgba(8,7,10,.95); opacity:0; visibility:hidden; transition:opacity 220ms ease, visibility 0s linear 220ms; }
.film-box.on{ opacity:1; visibility:visible; transition:opacity 220ms ease, visibility 0s; }
.film-in{ position:relative; width:min(1280px,100%); transform:scale(.96); opacity:.6; transition:transform 320ms var(--e-out), opacity 220ms ease; }
.film-box.on .film-in{ transform:none; opacity:1; }
.film-box.vertical .film-in{ width:min(440px,100%,calc(76vh * 9 / 16)); width:min(440px,100%,calc(76svh * 9 / 16)); }
.film-v{ display:block; width:100%; max-height:78vh; max-height:78svh; background:#000; border-radius:var(--r-s); }
.film-x{ position:absolute; top:-58px; right:0; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(247,247,248,.34); background:transparent; color:var(--text); cursor:pointer; transition:border-color var(--d-press) ease, color var(--d-press) ease, transform var(--d-press) var(--e-out); -webkit-tap-highlight-color:transparent; }
.film-x svg{ width:16px; height:16px; }
.film-x:active{ transform:scale(.94); }
.film-cap{ margin-top:16px; font:var(--w-mono) var(--fs-mono)/var(--lh-mono) var(--f-mono); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--t2); }
@media (hover:hover) and (pointer:fine){ .film-x:hover{ border-color:var(--accent-t); color:var(--accent-t); } }
/* le schede che aprono il lettore */
[data-film]{ cursor:pointer; }

/* ════════ Movimento ridotto ════════ */
@media (prefers-reduced-motion:reduce){
  .nav-links a.nav-coffee,.nav-coffee::after{ animation:none; }
  .film-in{ transform:none; transition:opacity 220ms ease; }
  .nav-links.open > li{ animation:none; }
}