/* ===== v6: animazioni cinematografiche (testi e impaginazioni invariati) =====
   Curve: --ex = uscita esponenziale (arrivi morbidi), --io = entrata e uscita (tende e maschere). */
:root{ --ex:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.77,0,.18,1) }

/* scorrimento morbido (solo PC, gestito da Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- testi che salgono da una maschera, parola per parola ---------- */
.mk{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.mk > .mi{display:inline-block;transform:translateY(108%);transition:transform 1.25s var(--ex);transition-delay:var(--d,0s)}
.mx.in .mk > .mi{transform:none}

/* titoli dei passi: parole che salgono quando il passo è attivo */
.st h3.stx .mk > .mi{transform:translateY(108%);transition:transform 1.05s var(--ex);transition-delay:calc(var(--d,0s) + .08s)}
.st.on h3.stx .mk > .mi{transform:none}
.st:not(.on) h3.stx .mk > .mi{transition-duration:.35s;transition-delay:0s}

/* fascia arancio della chiusura che si traccia */
.end .band.band-draw{transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--io)}
.end .band.band-draw.in{transform:none}

/* lineette arancio che si disegnano */
.ln-draw{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--io)}
.ln-draw.in{transform:none}

/* comparse generali più lente e morbide */
.rv{transform:translateY(36px);transition:opacity 1.1s var(--ex),transform 1.35s var(--ex)}

/* ---------- apertura in sequenza: .intro nasconde, .go fa partire (quando foto e caratteri sono pronti) ---------- */
.js .cover.intro .bg{opacity:0;animation:none;transform-origin:68% 50%}
.js .cover.intro:not(.go) .per,.js .cover.intro:not(.go) h1,.js .cover.intro:not(.go) .sub{visibility:hidden}
.cover.intro.img .bg{animation:coverBg 16s var(--ex) both}
@keyframes coverBg{0%{opacity:0;transform:scale(1.22)}16%{opacity:1}100%{opacity:1;transform:scale(1)}}
.js .cover.intro .band{transform:scaleY(0);transform-origin:top}
.cover.intro.go .band{animation:bandIn 1.3s var(--io) .35s forwards}
@keyframes bandIn{to{transform:none}}
.js .cover.intro .line{transform:scaleX(0);transform-origin:left}
.cover.intro.go .line{animation:lineIn 1s var(--io) 1s forwards}
@keyframes lineIn{to{transform:none}}
.js .cover.intro .foot{opacity:0}
.cover.intro.go .foot{animation:fadeIn 1.2s ease 2.5s forwards}
@keyframes fadeIn{to{opacity:1}}
.cover .scroll i{transform-origin:left;animation:scrollPulse 2.6s var(--io) 3.4s infinite}
@keyframes scrollPulse{0%{transform:scaleX(1)}45%{transform:scaleX(.25)}100%{transform:scaleX(1)}}
/* il palazzo scorre più lento del testo: profondità */
.cover .bg{will-change:transform}

/* ---------- aperture delle proposte: la finestra si allarga scorrendo ---------- */
.win{clip-path:inset(var(--wy,0%) var(--wx,0%) round var(--wr,0px));will-change:clip-path}

/* luce che attraversa il logo, una volta composto: copia nitida + alone sfocato, in «schiarisci» */
.shine{position:absolute;pointer-events:none;z-index:3}
.shine > .sharp,.shine > .soft{position:absolute;inset:0;mix-blend-mode:screen}
.shine > .soft{filter:blur(14px);opacity:.9}
.shine i.sh{position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background:linear-gradient(100deg,rgba(255,236,214,0) 0%,rgba(255,236,214,.95) 50%,rgba(255,236,214,0) 100%) no-repeat;background-size:var(--bw,240px) 100%;background-position:-9999px 0;opacity:1;clip-path:none;animation:none;transform:none}

/* simboli fluttuanti della B a diverse profondità */
.b-hero .float{will-change:transform}

/* ---------- foto, mockup e scene che si scoprono a tendina ---------- */
.rvl{position:relative;overflow:hidden;border-radius:6px;clip-path:inset(100% 0 0 0 round 6px);transition:clip-path 1.5s var(--io)}
.rvl > *{scale:1.16;transition:scale 2.2s var(--ex)}
.rvl.in{clip-path:inset(0 0 0 0 round 6px)}
.rvl.in > *{scale:1}
@media (hover:hover){ .rvl.in:hover > *{scale:1.035;transition:scale 1.6s var(--ex)} }

/* ---------- grana pellicola e avanzamento ---------- */
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.prog{position:fixed;left:0;top:0;right:0;height:2px;z-index:90;pointer-events:none;background:#F26A1B;transform:scaleX(0);transform-origin:left}

@media (max-width:760px){ .grain{animation:none;opacity:.05} }

/* schermate di controllo e «riduci movimento»: tutto già al suo posto */
.shot-all .mk > .mi,.shot-all .ln-draw{transform:none!important;transition:none!important}
.shot-all .rvl{clip-path:none!important} .shot-all .rvl > *{scale:1!important}
.shot-all .st h3.stx .mk > .mi,.shot-all .band-draw{transform:none!important;transition:none!important}
.shot-all .cover.intro *{animation:none!important;opacity:1!important;transform:none!important;visibility:visible!important}
.shot-all .grain,.shot-all .prog{display:none}
@media (prefers-reduced-motion:reduce){
  .mk > .mi,.ln-draw{transform:none!important;transition:none!important}
  .rvl{clip-path:none!important} .rvl > *{scale:1!important}
  .st h3.stx .mk > .mi,.band-draw{transform:none!important;transition:none!important}
  .cover.intro *{animation:none!important;opacity:1!important;transform:none!important;visibility:visible!important}
  .win{clip-path:none!important} .grain{display:none}
}

/* ---------- mockup v6: ricamo sulla divisa e lettere in rilievo sul bancone ---------- */
.mf-emb{filter:drop-shadow(0 -9px 7px rgba(0,0,0,.32));opacity:.96}
/* lettere in rilievo laccate: luce dalla finestra a destra, ombra a sinistra, leggera sfumatura sul colore */
.mf-relief{filter:drop-shadow(2px -2px 0 rgba(255,255,255,.28)) drop-shadow(-6px 6px 5px rgba(50,38,26,.42)) drop-shadow(-16px 14px 22px rgba(50,38,26,.18))}
.mf-relief-a i{background:linear-gradient(105deg,#2c4f4d 0%,#355C5A 45%,#4a7471 100%)!important}
.mf-relief-b i{background:linear-gradient(105deg,#112f2f 0%,#183F3F 45%,#285553 100%)!important}

/* mockup fotografici: ritmo editoriale (grande, due affiancate, grande) */
.mfgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mfgrid > :nth-child(1),.mfgrid > :nth-child(4){grid-column:1 / -1}
@media (max-width:760px){ .mfgrid{grid-template-columns:1fr} }

/* ---------- segnaposti sulle foto dello studio: vetro, bordo bianco sottile, niente arancio pieno ---------- */
.studio .pin i{left:-13px;top:-13px;width:26px;height:26px;background:rgba(14,14,14,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.88),0 2px 14px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.studio .pin i::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.studio .pin i::after{inset:-7px;border:1px solid rgba(255,255,255,.5);animation-duration:3.2s}
.studio .pin b{left:24px;background:rgba(14,14,14,.42);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:7px 14px}
.studio .pin.flip b{right:24px}
@media (max-width:760px){
  .studio .pin i{left:-14px;top:-14px;width:28px;height:28px;display:grid;place-items:center}
  .studio .pin i::before{content:attr(data-n);position:static;width:auto;height:auto;margin:0;border-radius:0;background:none;font-weight:600;font-size:10.5px;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
  .studio .pin i::after{inset:-6px}
  .studio .leg i{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);color:#fff;font-weight:600;font-size:9.5px;letter-spacing:.02em;width:22px;height:22px;font-variant-numeric:tabular-nums}
  .studio .leg li{gap:8px}
}

/* ---------- frecce a pennarello in «Come nasce il segno»: bianco caldo sul verde (A), nero sull'avorio (B) ---------- */
.story .ann g.pen,.story-b .ann g.pen{opacity:1}
.ann .pen-ln,.ann .pen-hd{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:none!important;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s ease}
.story .ann .pen-ln,.story .ann .pen-hd{stroke:#F3F3EA;stroke-width:5.6}
.story-b .ann .pen-ln,.story-b .ann .pen-hd{stroke:#1B1D1C;stroke-width:4.6}
.ann .pen-lab{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.03em;opacity:0;transition:opacity .4s ease}
.story .ann .pen-lab{font-size:24px;fill:#F3F3EA}
.story-b .ann .pen-lab{font-size:20px;fill:#1B1D1C}
/* passo attivo: il tratto si disegna dalla coda, poi la punta, poi l'etichetta */
.story[data-step="1"] .k-s .pen-ln,.story[data-step="2"] .k-p .pen-ln,.story[data-step="3"] .k-r .pen-ln,
.story-b[data-step="2"] .k-s .pen-ln,.story-b[data-step="3"] .k-p .pen-ln{stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.55,0,.25,1) .2s}
.story[data-step="1"] .k-s .pen-hd,.story[data-step="2"] .k-p .pen-hd,.story[data-step="3"] .k-r .pen-hd,
.story-b[data-step="2"] .k-s .pen-hd,.story-b[data-step="3"] .k-p .pen-hd{stroke-dashoffset:0;transition:stroke-dashoffset .35s cubic-bezier(.3,0,.2,1) .95s}
.story[data-step="1"] .k-s .pen-lab,.story[data-step="2"] .k-p .pen-lab,.story[data-step="3"] .k-r .pen-lab,
.story-b[data-step="2"] .k-s .pen-lab,.story-b[data-step="3"] .k-p .pen-lab{opacity:1;transition:opacity .5s ease 1.1s}
.ann g.pen.tel{display:none}
@media (max-width:760px){
  .ann g.pen.pc{display:none} .ann g.pen.tel{display:inline}
  .story .stage{width:min(66vw,300px)}
}
.shot-all .ann .pen-ln,.shot-all .ann .pen-hd{transition:none!important}
@media (prefers-reduced-motion:reduce){ .ann .pen-ln,.ann .pen-hd,.ann .pen-lab{transition:none!important} }
/* il marchio della A si adatta anche all'altezza dello schermo, così le frecce (sopra, a sinistra, sotto) restano dentro */
@media (min-width:761px){ .story .stage{width:min(100%,520px,56svh)} .story-b .stage{width:min(100%,600px,74svh)} }