/* cine-engine — il proiettore: schermo fisso, sezioni scrub, capitoli, poster.
   Consuma: footer (html.has-cine .site-footer). La regola prefers-reduced-motion
   viene da una lista di selettori spezzata fra i moduli. */
/* Con gli stage sticky lo scroll anchoring del browser sceglie ancore
   instabili e al resize la posizione salta: disattivato. */
html,
body { overflow-anchor: none; }

.cine { position: relative; }

/* ---------- Sezioni scrub (hero, ciclo, mani) ---------- */

.cine__scrub {
  position: relative;
  min-height: 250vh;
}

/* La finestra film delimita la corsa dei frame di una sezione scrub; le
   geometrie del gruppo hero (pista, telo, rivelazione) sono in hero-reveal.css. */
.cine__film-window {
  position: absolute;
  inset: 0;
  height: 100%;
  pointer-events: none;
}

/* Il ciclo si allunga di 100vh per non comprimere la corsa delle 5 soste
   (l'aggancio allo sgancio del manifesto è del contratto hero-reveal). */
html.has-cine .cine__scrub--ciclo { min-height: 350vh; }

/* Su mobile la partitura del ciclo (rest.mobile) deve far cadere le cinque
   soste degli step oltre il tratto coperto dall'uscita del manifesto: la
   corsa si allunga perché il coperto scenda da ~40% a ~18% (100vh/560vh).
   Valore tarato in collaudo browser: a 450vh e 500vh la posa dello step 01
   restava dentro il tratto coperto e la sosta saltava al 02. */
@media (width < 768px) {
  html.has-cine .cine__scrub--ciclo { min-height: 560vh; }

  /* Giunto senza posa morta: tra due scrub adiacenti la corsa film
     dell'uscente finisce una viewport prima del confine (bottom bottom) e
     il buco tiene il film fermo sulla posa di giunzione — su mobile, a
     scroll libero, è un tratto morto che ostacola la transizione. La
     finestra film dell'entrante (dove dichiarata nel markup) parte una
     viewport prima: finestre contigue, vince l'entrante, pose identiche. */
  html.has-cine .cine__scrub + .cine__scrub .cine__film-window {
    top: -100vh;
    height: calc(100% + 100vh);
  }
}

.cine__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Lo schermo: il proiettore disegna qui. Primo figlio di main, fixed dietro
   ogni contenuto posizionato; visibile solo a motore attivo. */
.cine__screen {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;

  /* Il box non segue la danza della barra URL mobile: ancorato al viewport
     grande (lvh) l'inquadratura non sale e non lascia buchi quando la barra
     riappare; il fallback % resta per i browser senza unità lvh. */
  height: 100%;
  height: 100lvh;
}

html.has-cine .cine__screen { display: block; }

/* Aria di pellicola: grana di carta e vignetta sottile sopra il proiettore.
   Solo variante cinematografica: il palco statico resta com'era. */
html.has-cine .cine__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 62%, rgb(58 48 38 / 12%) 100%),
    repeating-conic-gradient(rgb(58 48 38 / 1.5%) 0% 25%, transparent 0% 50%);
  background-size: 100% 100%, 3px 3px;
  mix-blend-mode: multiply;
}

/* A motore attivo i poster per-sezione lasciano il posto allo schermo — ma
   solo quando la pellicola della sezione è completa (is-filmed, firmata dal
   Projector). Una sequenza persa su rete instabile, o un motore morto a metà
   mount, lasciano il poster come paracadute: mai una sezione vuota. */
html.has-cine .is-filmed .cine__poster { visibility: hidden; }

.cine__poster {
  position: absolute;
  inset: 0;
}

.cine__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cine__hint {
  position: absolute;
  bottom: 1.5rem;
  right: clamp(1rem, 4vw, 3rem);
  margin: 0;
  color: var(--techne-ink-deep);
  background: var(--techne-glass);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.cine__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem clamp(1rem, 6vw, 6rem);
}

/* Fila e ciclo: pill e titolo fissi in alto come intestazione di capitolo,
   le voci sono posizionate in assoluto sullo stage. */
.cine__overlay--fila,
.cine__overlay--ciclo {
  justify-content: flex-start;
  padding-top: clamp(4.5rem, 10vh, 7rem);
}

/* ---------- Contratto capitoli ----------
   Il direttore stampa is-chapter-before/active/after sui [data-chapter]:
   l'overlay entra sulla prima battuta del capitolo e esce col cambio di
   capitolo. Solo CSS: i pezzi futuri si agganciano qui senza toccare JS. */

html.has-cine [data-chapter] .cine__overlay {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

html.has-cine [data-chapter].is-chapter-active .cine__overlay {
  opacity: 1;
  transform: none;
}

@media (width >= 768px) {
  /* Il footer chiude la pagina a tutto schermo; il film sotto è già fermo. */
  html.has-cine .site-footer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 -32px 64px rgb(31 31 26 / 20%);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-chapter] .cine__overlay { transition: none; }
}