/* Apertura animata dal vivo (v5): sostituisce il film. Solo transform e opacity si animano (apertura.js, GSAP).
   Tutto sta sotto .s-film .ap. Le misure arrivano da apertura.js come variabili CSS sul riquadro #ap. */
.s-film .ap{position:absolute;inset:0;overflow:hidden;background:#0a0b0c;color:#f6f6f3;font-family:Ronzino,system-ui,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;
  --W:100%;--H:100%;--cy:50%;--ty:50%;--tfs:min(9.8vw,16.5vh);--cfs:30px;--capy:110px;--dw:800px;--dh:530px;--bar:26px;--pw:300px;--ph:620px;--b:10px;--pr:50px;--sr:40px;--kd:.55;--kp:.7}
.s-film .ap-bg,.s-film .ap-vig{position:absolute;inset:0;pointer-events:none}
.s-film .ap-g1,.s-film .ap-g2{position:absolute;width:1500px;height:1500px;border-radius:50%;margin:-750px 0 0 -750px;top:50%}
.s-film .ap-g1{left:30%;background:radial-gradient(circle,rgba(196,128,52,.30) 0,rgba(196,128,52,0) 62%)}
.s-film .ap-g2{left:72%;top:44%;background:radial-gradient(circle,rgba(52,110,128,.30) 0,rgba(52,110,128,0) 62%)}
.s-film .ap-vig{background:radial-gradient(ellipse at 50% 50%,rgba(10,11,12,0) 38%,rgba(10,11,12,.74) 100%)}

/* titolo grande: testo vero, leggibile anche senza movimento */
.s-film .ap-big{position:absolute;left:0;right:0;top:calc(var(--ty) - var(--H)/2);height:var(--H);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:var(--tfs);pointer-events:none}
.s-film .ap-ln{display:flex;justify-content:center;gap:.26em;overflow:hidden;line-height:1;padding:.07em .12em .15em;letter-spacing:-.05em}
.s-film .ap .w{display:inline-block;white-space:nowrap}
.s-film .ap .w.s{font-family:Mazius,serif;font-weight:400;letter-spacing:-.025em;font-size:1.16em;line-height:.9}
.s-film .ap .ap-dot{color:#f2d94e}
.s-film .ap[data-o="land"] .port,.s-film .ap[data-o="port"] .land{display:none}

/* didascalie */
.s-film .ap-cap{position:absolute;left:0;right:0;top:calc(var(--capy) - .62em);text-align:center;font-size:var(--cfs);letter-spacing:-.025em;font-weight:400;pointer-events:none}
.s-film .ap-cap .m{display:block;overflow:hidden;padding:.1em 0 .2em}
.s-film .ap-cap .t{display:inline-block;opacity:.95;visibility:hidden}
.s-film .ap-cap .t::before{content:"";display:inline-block;width:.3em;height:.3em;border-radius:50%;background:#f2d94e;margin-right:.5em;vertical-align:.12em}

/* titolo fisso in verticale: la frase intera resta sopra i telefoni (apertura.js misura corpo e posto, due righe senza a capo) */
.s-film .ap-head{display:none;position:absolute;z-index:2;left:0;right:0;top:var(--hy,70px);padding:0 var(--hg,20px);text-align:center;font-size:var(--hfs,28px);line-height:1.08;letter-spacing:-.03em;font-weight:500;pointer-events:none}
.s-film .ap[data-o="port"] .ap-head{display:block}
.s-film .ap[data-o="port"] .ap-cap{display:none}
.s-film .ap-head .hl{display:block;overflow:hidden;padding:.05em .1em .17em}
.s-film .ap-head .hi{display:inline-block;white-space:nowrap;visibility:hidden}
.s-film .ap-head .s{font-family:Mazius,serif;font-weight:400;letter-spacing:-.025em;font-size:1.16em;line-height:.9}

/* dispositivi: centrati con transform (GSAP), niente layout che cambia mentre si anima */
.s-film .ap-row{position:absolute;inset:0}
.s-film .ap-dev{position:absolute;left:50%;top:var(--cy);box-sizing:border-box;display:flex;flex-direction:column;background:#0b0c0d;overflow:hidden;opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 80px 130px -40px rgba(0,0,0,.95),0 24px 60px -24px rgba(0,0,0,.8)}
.s-film .ap-desk{width:var(--dw);height:var(--dh);border-radius:calc(var(--dw)*.0125 + 8px)}
.s-film .ap-ph{width:var(--pw);height:var(--ph);padding:var(--b);border-radius:var(--pr)}
.s-film .ap-bar{flex:none;height:var(--bar);display:flex;align-items:center;gap:calc(var(--bar)*.28);padding:0 calc(var(--bar)*.55);background:#1a1c1f}
.s-film .ap-bar i{flex:none;width:calc(var(--bar)*.33);height:calc(var(--bar)*.33);border-radius:50%;background:#41454a}
.s-film .ap-scr{position:relative;flex:1;overflow:hidden;background:#0b0c0e}
.s-film .ap-ph .ap-scr{border-radius:var(--sr)}
.s-film .ap-video,.s-film .ap-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.s-film .ap-poster[hidden]{display:none}
.s-film .ap-gl{position:absolute;inset:0;z-index:3;background:linear-gradient(115deg,rgba(255,255,255,.08) 0,rgba(255,255,255,0) 38%);pointer-events:none}
/* L'altoparlante resta nella cornice: non copre la navigazione registrata del sito. */
.s-film .ap-notch{position:absolute;left:50%;top:calc(var(--b)*.35);width:calc(var(--pw)*.2);height:calc(var(--b)*.3);margin-left:calc(var(--pw)*-.1);background:#41454a;border-radius:99px;z-index:4}
.s-film .ap-wipe{position:absolute;inset:0;overflow:hidden;z-index:2}
.s-film .ap-wipe-in{position:absolute;inset:0}
.s-film .ap-edge{position:absolute;top:0;bottom:0;right:0;width:3px;background:#f2d94e;z-index:5}
.s-film .ap-tag{position:absolute;left:0;right:0;top:calc(var(--cy) + var(--dh)/2 + 20px);text-align:center;font-size:14px;letter-spacing:.01em;font-weight:400;color:rgba(255,255,255,.78);pointer-events:none;height:20px}
.s-film .ap-tag span{position:absolute;left:0;right:0;opacity:0}
.s-film .ap-tag span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#f2d94e;margin-right:8px;vertical-align:1px}
.s-film .ap[data-o="port"] .ap-tag,.s-film .ap[data-o="port"] .ap-desk{display:none}

/* Senza script: una sola versione del titolo (quella larga, o quella stretta se lo schermo è alto e stretto). */
.s-film .ap:not([data-o]) .port{display:none}
@media (max-aspect-ratio:4/5){
  .s-film .ap:not([data-o]) .land{display:none}
  .s-film .ap:not([data-o]) .port{display:flex}
  .s-film .ap:not([data-o]){--tfs:min(15.5vw,7.5vh)}
}
/* Con script: il titolo compare quando le misure sono quelle vere (caratteri caricati), così non salta di posto. */
/* Rete di sicurezza: se lo script non arriva a finire (bloccato o in errore), dopo 4 s il titolo si vede comunque. Non è movimento: vale anche con «riduci animazioni». */
@media (scripting:enabled){.s-film .ap:not(.rdy) .ap-big{visibility:hidden;animation:ap-titolo 0s 4s forwards!important}}
@keyframes ap-titolo{to{visibility:visible}}

/* prima del lavoro di GSAP (o senza script): titolo leggibile, il resto nascosto */
.s-film .ap .ap-dev{will-change:transform,opacity}

/* telefono */
@media (max-width:900px){
  .s-film .ap-vig{background:radial-gradient(ellipse at 50% 46%,rgba(10,11,12,0) 40%,rgba(10,11,12,.66) 100%)}
  /* Il telefono ha poca memoria grafica: due bagliori fermi nel fondo al posto di due strati 1500px che si muovono, ombra leggera. */
  .s-film .ap-g1,.s-film .ap-g2{display:none}
  .s-film .ap-bg{background:radial-gradient(circle 657px at calc(30% + 10px) calc(50% - 10px),rgba(196,128,52,.30),rgba(196,128,52,0)),radial-gradient(circle 657px at calc(72% - 10px) calc(44% + 10px),rgba(52,110,128,.30),rgba(52,110,128,0))}
  .s-film .ap-dev{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 24px -12px rgba(0,0,0,.8)}
}
/* movimento ridotto e «Ferma i film»: nessuna transizione CSS, il fotogramma resta fermo */
@media (prefers-reduced-motion:reduce){.s-film .ap *{transition:none!important}}
html.motion-paused .s-film .ap *{transition:none!important}