/* =====================================================================
   UITUIT - IL FILM DELLA PAGINA (va con js/film.js)

   COS'È E COME FUNZIONA
   Dietro i contenuti c'è uno strato fisso a tutto schermo con il film
   (.film-strato): una «lastra» con il video, un po' più grande dello
   schermo (così i bordi non si vedono mai, nemmeno inclinata), e sopra un
   velo scuro con vignettatura e una grana leggera.
   Il film si vede in due posti:
   - nella HERO in cima (a schermo intero, sotto la testata): titolo,
     sottotitolo e pulsante stanno su un velo scuro dal loro lato (a
     sinistra sul computer, dal basso sul telefono). Sul computer il testo
     della hero va tenuto nel 40% di sinistra dello schermo. Nell'angolo
     lontano dal testo: la scritta «Video generato con l'IA» e il pulsante
     «Ferma il movimento»;
   - nelle FINESTRE trasparenti tra un foglio di carta e l'altro, con una
     didascalia breve sul suo velo e, subito sotto, la scritta dell'IA.
     Una finestra può avere anche contenuti veri (titolo, testo, pulsante):
     allora ha lo stesso velo della hero.
   I fogli di carta coprono il film: lì i contenuti si leggono sempre.
   Con «riduci movimento», «risparmio dati» o se il film non parte, la hero
   mostra la prima immagine ferma e ogni finestra la sua (le mette film.js).
   Classi ed elementi del film (film-hero, tema-scuro, film-con-testo,
   film-ferma, .film-hero-angolo, .film-ia, .film-pausa) li aggiunge
   js/film.js e li toglie quando il film si spegne.
   I nomi .film e .film-nota restano della scatola dei ricordi (stile.css).
   Strati: film 0 · contenuti 1 (main) · testata 40
   ===================================================================== */

/* ---------- Lo strato fisso con il film ---------- */
.film-strato {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;   /* lvh: copre anche quando le barre del telefono si ritirano */
  margin: 0; overflow: hidden; pointer-events: none;
  background: var(--notte, #07080c);            /* senza immagini la hero resta scura e il testo leggibile */
  contain: strict;
}
.film-scena {
  position: absolute; inset: 0;
  /* 1400px, ma sugli schermi molto grandi cresce con loro: con la prospettiva fissa
     un'inclinazione di pochi gradi scoprirebbe i bordi di uno schermo largo 3440 o 4K */
  perspective: 1400px; perspective: max(1400px, 100vmax);
  perspective-origin: 50% 50%;
}
.film-lastra {
  position: absolute; inset: 0;
  transform: scale(1.12); transform-origin: 50% 50%;
  backface-visibility: hidden; will-change: transform;
}
.film-lastra > video, .film-lastra > .film-fermo {
  position: absolute; inset: 0; display: block; margin: 0;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
/* L'immagine ferma sta sopra il video finché il primo fotogramma non è davvero disegnato */
.film-lastra > .film-fermo { z-index: 1; opacity: 1; visibility: visible; }
.film-strato.film-pronto .film-fermo { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
/* Immagini ferme (riduci movimento, risparmio dati, film che non parte): niente video */
.film-strato.film-immobile video { display: none; }
.film-strato.film-immobile .film-lastra { will-change: auto; }

/* Velo scuro e vignettatura: il film resta vivo ma non abbaglia */
.film-velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 100% at 50% 42%, rgba(7, 8, 12, 0) 50%, rgba(7, 8, 12, .5) 100%),
    linear-gradient(rgba(7, 8, 12, .14), rgba(7, 8, 12, .14));
}
/* Grana leggera, con lo stesso rumore della carta del sito */
.film-grana {
  position: absolute; inset: 0; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* «Video generato con l'IA»: piccola, sul suo velo, accanto al film (nella hero e in ogni finestra) */
.film-ia {
  margin: 0; max-width: 100%; padding: 5px 11px; border-radius: 999px;
  font: 400 .75rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #E6DBCD; background: rgba(7, 8, 12, .68); text-shadow: none;
}
/* Nella hero: la scritta dell'IA e il pulsante per fermare il movimento, lontano dal testo */
.film-hero-angolo {
  position: absolute; z-index: 1; right: max(16px, env(safe-area-inset-right)); bottom: clamp(16px, 3vh, 28px);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
/* «Ferma il movimento» (WCAG 2.2.2), come il bottoncino dei pannelli: premuto mostra «play» */
.film-pausa {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: #FFF6EA; border: 1px solid rgba(255, 246, 234, .4); background: rgba(7, 8, 12, .62); text-shadow: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.film-pausa[hidden] { display: none; }
.film-pausa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.film-pausa .i-play { display: none; fill: currentColor; stroke: none; }
.film-pausa[aria-pressed="true"] .i-play { display: inline; }
.film-pausa[aria-pressed="true"] .i-pausa { display: none; }
.film-pausa:focus-visible { outline: 2px solid var(--oro-chiaro, #F3D28B); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .film-pausa:hover { background-color: rgba(7, 8, 12, .85); border-color: var(--oro-chiaro, #F3D28B); }
}

/* ---------- La hero: a schermo intero, sotto la testata, con il film dietro ---------- */
.film-hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * var(--alto, 68px));     /* passa sotto la testata (il body ha lo spazio della testata in alto) */
  padding-top: var(--alto, 68px);
  display: flex; flex-direction: column; justify-content: center;
  background: transparent;
  text-shadow: 0 1px 2px rgba(7, 8, 12, .55), 0 2px 22px rgba(7, 8, 12, .4);
}
/* Il velo dal lato del testo (computer: da sinistra, più una sfumatura in basso) */
.film-hero::before, .film-finestra.film-con-testo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 8, 12, .84) 0%, rgba(7, 8, 12, .55) 40%, rgba(7, 8, 12, 0) 72%),
    linear-gradient(0deg, rgba(7, 8, 12, .6) 0%, rgba(7, 8, 12, 0) 34%);
}
.film-hero .btn, .film-finestra .btn { text-shadow: none; }

/* ---------- Le finestre: da qui si vede il film al punto in cui è arrivato ---------- */
.film-finestra {
  position: relative; isolation: isolate;
  min-height: 70vh; min-height: 70svh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(20px, 4vh, 40px) max(clamp(20px, 6vw, 96px), env(safe-area-inset-left));
  background: transparent;
  /* i fogli di carta sopra e sotto sembrano appoggiati sul film: un'ombra morbida ai bordi */
  box-shadow: inset 0 30px 36px -30px rgba(7, 8, 12, .8), inset 0 -30px 36px -30px rgba(7, 8, 12, .8);
  text-shadow: 0 1px 2px rgba(7, 8, 12, .55), 0 2px 22px rgba(7, 8, 12, .4);
}
.film-finestra[hidden] { display: none; }
/* La didascalia del momento, sul suo piccolo velo */
.film-didascalia {
  margin: 0; max-width: 100%; padding: 8px 14px; border-radius: 999px;
  font: 500 .8125rem/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: #FFF6EA; background: rgba(7, 8, 12, .66); text-shadow: none;
}
.film-didascalia:empty { display: none; }
/* La scritta dell'IA subito sotto la didascalia, dentro la finestra */
.film-finestra .film-ia { margin-top: 8px; }
/* Finestra con contenuti veri (titolo, testo, pulsante): testo a sinistra, nel velo */
.film-finestra.film-con-testo { justify-content: center; padding-block: clamp(56px, 10vh, 120px); }
.film-finestra.film-con-testo > * { max-width: min(34rem, 40vw); }
.film-finestra.film-con-testo .film-ia { margin-bottom: 20px; }
/* Immagini ferme: ogni finestra ha la sua (l'indirizzo lo mette film.js) */
.film-finestra.film-ferma { background-color: var(--notte, #07080c); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }

/* ---------- Film continuo (Ricette immersiva): niente fogli intorno alle finestre ---------- */
.film-finestra.film-continuo { box-shadow: none; }
/* Il momento in corso, dentro lo strato (lo mette film.js): i contenuti gli passano sopra, come sopra al film.
   C'è solo sugli schermi di almeno 1100 px, in verticale sul bordo sinistro, nel margine dove le schede non
   arrivano (come i segni sul bordo di una pellicola): nome, linea e nota in fila e girati, la nota in basso.
   Sotto i 1100 px non c'è: le schede arrivano al bordo, ci starebbe sempre sotto e trasparirebbe dietro i
   testi; lì il momento lo dice il capitolo e la nota IA sta nella hero, nel capitolo e nel finale.
   Nascosto di base e acceso solo da 1100 px: anche con lo zoom (larghezze come 760,5 px) non spunta altrove. */
.film-momento { display: none; }
@media (min-width: 1100px) {
  .film-momento {
    position: absolute; z-index: 1; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px;
    left: max(16px, env(safe-area-inset-left));
    top: calc(50% + var(--alto, 68px) / 2);      /* centrato nello spazio sotto la testata */
    transform-origin: 0 0; transform: rotate(-90deg) translateX(-50%) translateY(-8px);
    opacity: 0; transition: opacity .5s ease, transform .7s var(--entra, ease);
  }
  .film-momento.film-momento-visibile { opacity: 1; transform: rotate(-90deg) translateX(-50%); }
}
/* Schermi bassi (portatili, zoom): senza la linea la fila è più corta e resta tutta sotto la testata; molto bassi: niente */
@media (min-width: 1100px) and (max-height: 700px) { .film-momento-linea { display: none; } }
@media (min-width: 1100px) and (max-height: 520px) { .film-momento { display: none; } }
.film-momento-nome {
  margin: 0; padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  font: 500 .8125rem/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: #FFF6EA; background: rgba(7, 8, 12, .7);
}
.film-momento-nome:empty { display: none; }
.film-momento .film-ia { white-space: nowrap; }
/* La linea del servizio: quanta strada ha fatto il film (la scala la scrive film.js) */
.film-momento-linea { display: block; width: 120px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 246, 234, .24); }
.film-momento-linea > span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--oro-chiaro, #F3D28B), var(--oro, #D9A441));
}

/* ---------- Telefono in verticale: testo in basso, velo dal basso ---------- */
@media (max-aspect-ratio: 3/4) {
  .film-hero { justify-content: flex-end; }
  .film-hero::before, .film-finestra.film-con-testo::before {
    background: linear-gradient(0deg, rgba(7, 8, 12, .9) 0%, rgba(7, 8, 12, .62) 48%, rgba(7, 8, 12, 0) 78%);
  }
  .film-finestra { min-height: 60vh; min-height: 60svh; }
  /* la finestra con i contenuti è alta come la hero: stesso velo, stesse proporzioni */
  .film-finestra.film-con-testo { min-height: 100vh; min-height: 100svh; justify-content: flex-end; }
  .film-finestra.film-con-testo > * { max-width: none; }
  /* il testo della hero è in basso: la scritta dell'IA e il pulsante vanno in alto, sotto la testata */
  .film-hero-angolo { top: calc(var(--alto, 60px) + 14px); bottom: auto; }
}
@media (max-width: 760px) {
  /* testi di almeno 16 px sul telefono */
  .film-didascalia { font-size: 1rem; letter-spacing: .1em; }
  .film-ia { font-size: 1rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .film-strato.film-pronto .film-fermo { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {
  .film-momento, .film-momento.film-momento-visibile { transform: rotate(-90deg) translateX(-50%); transition: opacity .4s ease; }
}
@media print {
  .film-strato, .film-hero-angolo, .film-ia { display: none; }
}