/* ==========================================================================
   Hero cinematografico — blocchi-animati (blocco 12)
   Video a tutto schermo (o immagine), velatura a gradiente, titolo centrato che si compone,
   statistiche in vetro, invito a scorrere. Usa anim.js per titolo e contatori, cinema.js per il video.
   ========================================================================== */
.cinema {
  --cinema-velo: linear-gradient(180deg, rgba(5,12,24,.55) 0%, rgba(5,12,24,.15) 40%, rgba(5,12,24,.75) 100%);
  --cinema-testo: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; place-items: center; text-align: center;
  color: var(--cinema-testo); background: #0b1a2c;
}
.cinema-media, .cinema-media video, .cinema-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.cinema-media { animation: cinema-avvicina 2.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cinema-avvicina { from { transform: scale(1.12); filter: blur(6px); } }
.cinema::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cinema-velo); }

.cinema-contenuto { width: min(1100px, 100% - 40px); padding: 120px 0 64px; }
.cinema-occhiello { display: inline-block; font: 600 12px/1 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 22px; }
.cinema h1 { font-size: clamp(2.6rem, 7.5vw, 6.4rem); line-height: .98; letter-spacing: -.03em; margin: 0 0 .3em; font-weight: 600; }
.cinema h1 em { font-style: italic; font-weight: 400; }
.cinema-sotto { font-size: clamp(1.05rem, 1.6vw, 1.3rem); opacity: .88; max-width: 46ch; margin: 0 auto 30px; }
.cinema-azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cinema-azioni a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 99px;
  font-weight: 600; text-decoration: none; }
.cinema-azioni .pieno { background: #fff; color: #0b1a2c; }
.cinema-azioni .vetro { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.cinema-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 56px auto 0; max-width: 900px; }
.cinema-numeri > div { padding: 18px 14px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.cinema-numeri strong { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cinema-numeri span { font-size: .85rem; opacity: .78; }
@media (max-width: 700px) { .cinema-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cinema-scorri { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.cinema-scorri::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: currentColor;
  transform-origin: top; animation: cinema-linea 2s ease-in-out infinite; }
@keyframes cinema-linea { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Uscita allo scroll: il video si allontana e scurisce (solo browser che supportano le animazioni legate allo scroll) */
@supports (animation-timeline: view()) {
  .cinema-media video, .cinema-media img { animation: cinema-esce linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes cinema-esce { to { transform: scale(1.08); filter: brightness(.55); } }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-media, .cinema-media video, .cinema-media img, .cinema-scorri::after { animation: none !important; }
}