/* ── motion.css — sistema di animazioni Cecinema ──────────────────────────
   Si aggancia al reveal `.rv`/`.is-in` già definito in base.css (opacity 0→1,
   translateY 12px→0, 180ms, gated da html.has-js). Qui: varianti di entrata
   per tipo di blocco, stagger a gruppi, reveal-testo sticker, pop numerico e
   rifiniture hover. Nessuna classe qui nasconde contenuto senza passare da
   .has-js — il degrado senza JS resta garantito da base.css.
   Caricare DOPO tokens.css, base.css, blocks.css. Solo transform e opacity
   per tutto ciò che è scroll-linked; box-shadow solo su hover puntuali,
   stesso pattern già usato da .pill/.serata in blocks.css. ─────────────── */

/* ── Sipario d'apertura ────────────────────────────────────────────────────
   Markup .curtain/.curtain__a/__b già in index.html. Solo CSS, non gated da
   .has-js: se lo script non parte un pannello a schermo intero che non si
   toglie renderebbe il sito inutilizzabile, quindi deve uscire comunque.
   Pannelli a velocità diverse (500 vs 640ms): è quella differenza a creare
   la banda ocra che si allarga mentre il teal-scuro davanti si ritira più
   in fretta, misurata sul reference. cubic-bezier(.45,0,.85,.6) è ease-in:
   il bordo accelera. Delay 620ms + uscita più lunga (640ms) = 1260ms, poi
   il contenitore si rimuove del tutto a 1300ms (curtainDone, durata 0).
   Resta attivo anche con motion ridotta (ticket 004 Q4, eccezione in
   base.css): dura ~1,1s, sotto la soglia dei 5s del criterio WCAG 2.2.2. */
.curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.curtain__a,.curtain__b{position:absolute;inset:0;will-change:transform}
.curtain__b{background:var(--ocra);z-index:1;
  animation:curtainOut 640ms cubic-bezier(.45,0,.85,.6) 620ms forwards}
.curtain__a{background:var(--teal-scuro);z-index:2;
  animation:curtainOut 500ms cubic-bezier(.45,0,.85,.6) 620ms forwards}
@keyframes curtainOut{to{transform:translateY(101%)}}
.curtain{animation:curtainDone 0s linear 1300ms forwards}
@keyframes curtainDone{to{display:none;visibility:hidden}}

/* ── Varianti di entrata (sovrascrivono solo `transform`: l'opacity:0 e la
   transition arrivano già da `.has-js .rv` in base.css) ──────────────────── */

/* Ingresso degli sticker. La scatola NON si muove — misurato: il suo `top` resta costante per tutta
   l'animazione. È il testo che sale dentro, ritagliato da overflow:hidden.
   La molla oltrepassa lo zero del 19%, quindi il testo sale un momento più del
   dovuto e il taglio in alto lo trattiene: è quello che fa l'effetto. */
.has-js .molla{overflow:hidden}
.has-js .molla .sticker__t{display:block;transform:translateY(105%)}
.has-js .molla.is-in .sticker__t{animation:mollaSu var(--molla-dur) var(--molla) both}
@keyframes mollaSu{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .has-js .molla .sticker__t{transform:none}
  .has-js .molla.is-in .sticker__t{animation:none}
}

/* Immagini (collage, gallery, locandina, mappa): leggero scale-in */
[data-motion="rich"].has-js .rv--img{transform:translateY(9px) scale(.96)}

/* Loghi sponsor: piccolo scale-in con salita */
[data-motion="rich"].has-js .rv--logo{transform:translateY(6px) scale(.92)}

/* Card sezioni: salita un po' più marcata delle altre */
[data-motion="rich"].has-js .rv--card{transform:translateY(17px)}

/* ── Pop numerico — stat e countdown ──────────────────────────────────────
   .9 → 1.03 → 1, misurato sul reference. Applicata via classe da JS quando
   il numero entra in viewport (stat) o al primo render (countdown). */
@keyframes rvPop{
  0%{transform:scale(.9);opacity:0}
  60%{transform:scale(1.03);opacity:1}
  100%{transform:scale(1)}
}
[data-motion="rich"].has-js .rv--pop{animation:rvPop var(--dur-slow) var(--ease) both}

/* Parallasse sui blob: rimossa (ticket 004 Q3) — si vedeva appena e
   costava un listener sullo scroll continuo. */

/* ── Reduced motion ──────────────────────────────────────────────────────
   Il fix vive in un unico punto: base.css, media query
   `prefers-reduced-motion:reduce`. Lì: il reveal generico e il reveal-testo
   sticker restano disattivati (mostrano subito lo stato finale), il sipario
   resta attivo (eccezione dichiarata, ticket 004 Q4) e i marquee si fermano.
   Non serve ripeterlo qui. Il conteggio JS (count-up) si ferma da solo
   controllando la stessa media query in main.js. */

/* ── Hover / focus rifiniti ────────────────────────────────────────────────
   Il default (card, serata, sponsor, gallery/collage) è già in blocks.css:
   qui si aggiunge profondità, non lo si sostituisce. */

/* L'hover dei pill vive in base.css: ombra che cresce 200→800ms con squish,
   come il reference (ticket 004 Q2). */

/* Loghi sponsor: aggiunge una scala alla dissolvenza grayscale→colore già
   presente. Specificità alzata con .rv--logo per battere .rv.is-in{transform:none}
   una volta che il logo è stato rivelato. */
.sponsors img{transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sponsors img.rv--logo:hover{transform:scale(1.08)}

/* Gallery e collage: ombra hard-offset in hover, stessa firma delle shadow
   del design system (nessun blur, solo offset) *
/
.gal figure{transition:box-shadow var(--dur) var(--ease)}
.gal figure:hover{box-shadow:var(--shadow-hard)}

/* Serata: la data scivola leggermente a destra in hover */
.serata__d{transition:transform var(--dur) var(--ease)}
.serata:hover .serata__d{transform:translateX(3px)}

/* Il wordmark non ha animazione propria: nel reference viene scoperto dal
   sipario che scende, e basta. La scopertura da sinistra era una mia aggiunta. */