/* ════════════════════════════════════════════════════════════════════
   Mantra Productions · hero a "sipario" (anteprima, 13 ottobre 2026)
   Si carica DOPO productions-nuovo.css e cambia SOLO lo scorrimento
   della hero: l'apertura al caricamento (bande, righe digitate, titolo
   con la luce teal, testi a scalare, "Scorri") resta identica.

   Prima: schermata ferma per un'altezza intera, bande che schiacciano
   il video, titolo che vola via (stesso schema della Home).
   Ora: la hero occupa una schermata e resta sotto; la sezione dopo le
   sale sopra come un sipario, da subito. Intanto il video avanza
   lentissimo (scala 1 → 1.10) e si scurisce (velo 0 → .55); il testo
   sale a un quarto della velocità dello scorrimento e resta leggibile
   finché il sipario non lo copre. Niente bande, niente cornice,
   niente lettere che volano.

   Solo transform e opacity, legati allo scroll della pagina
   (animation-timeline: scroll(root), da 0 a una schermata). Dove il
   browser non lo sa fare, assets/productions-scroll.js scrive --mps-p
   (0 → 1) sulla hero. Movimento ridotto: niente movimento, solo il
   velo. Versione ferma (?fermo): niente.
   ════════════════════════════════════════════════════════════════════ */

/* 1 · via il vecchio scorrimento della hero (bande, titolo che vola, testi che sfumano).
   Tolto il nome dell'animazione, anche il ripiego di productions-nuovo.js li ignora. */
.mp .mp-hero__media,
.mp .mp-hero__signs,
.mp .mp-hl--a,
.mp .mp-hl--a2,
.mp .mp-hl--b,
.mp .mp-hero__foot,
.mp .mp-cue{ animation-name:none; }

/* 2 · velo: sopra il video e l'ombreggiatura, sotto il testo */
.mp-hero__media::after{ content:''; position:absolute; inset:0; background:var(--ink); opacity:0; pointer-events:none; }

/* 3 · impianto del sipario.
   La hero è alta due schermate ma ne restituisce una (margine negativo):
   la pagina non si ferma, e il palco resta incollato in alto finché la
   sezione dopo non l'ha coperto del tutto; poi esce con lei. */
@media (prefers-reduced-motion:no-preference){
  html:not(.m3-still) .mp .mp-hero{ height:200vh; height:200svh; margin-bottom:-100vh; margin-bottom:-100svh; }
  /* le sezioni dopo passano sopra e hanno il fondo pieno (specificità zero:
     chi ha già un suo fondo, carta o superficie, lo tiene) */
  :where(html:not(.m3-still) .mp > .mp-hero ~ *){ position:relative; z-index:1; background-color:var(--ink); }
  /* il bordo del sipario: lo stesso filo teal delle bande d'apertura e un'ombra morbida */
  html:not(.m3-still) .mp > .mp-hero + *{ box-shadow:0 -1px 0 rgba(79,176,184,.4), 0 -28px 56px -20px rgba(13,12,17,.8); }
}

/* 4 · movimento legato allo scroll della pagina */
@keyframes mps-veil{ from{ opacity:0; } to{ opacity:.55; } }
@keyframes mps-zoom{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
@keyframes mps-rise{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-25vh,0); transform:translate3d(0,-25svh,0); } }

@supports (animation-timeline: scroll()){
  html:not(.m3-still) .mp-hero__media::after{
    animation-name:mps-veil; animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both;
    animation-timeline:scroll(root); animation-range:0px 100vh; animation-range:0px 100svh; }
  @media (prefers-reduced-motion:no-preference){
    html:not(.m3-still) .mp-hero__media video,
    html:not(.m3-still) .mp-hero__inner{
      animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both;
      animation-timeline:scroll(root); animation-range:0px 100vh; animation-range:0px 100svh; }
    html:not(.m3-still) .mp-hero__media video{ animation-name:mps-zoom; }
    html:not(.m3-still) .mp-hero__inner{ animation-name:mps-rise; }
  }
}

/* 5 · ripiego (browser senza animation-timeline): stessi valori, guidati da --mps-p */
@supports not (animation-timeline: scroll()){
  html.mps-live .mp-hero__media::after{ opacity:calc(var(--mps-p, 0) * .55); }
  @media (prefers-reduced-motion:no-preference){
    html.mps-live .mp-hero__media video{ transform:scale(calc(1 + var(--mps-p, 0) * .1)); }
    html.mps-live .mp-hero__inner{ transform:translate3d(0, calc(var(--mps-p, 0) * -25vh), 0); }
  }
}

/* 6 · (responsive 13/10) schermi bassi, come il telefono in orizzontale (390 px di altezza):
   testo e tasti della hero non stanno in una schermata e il palco fermo li tagliava per sempre
   (il sipario li copriva prima di vederli). Qui la hero è alta quanto il suo contenuto e scorre
   normale; restano il velo e il leggero ingrandimento del video. */
@media (max-height:520px) and (orientation:landscape){
  html:not(.m3-still) .mp .mp-hero{ height:auto; margin-bottom:0; }
  html:not(.m3-still) .mp .mp-hero__stage{ position:relative; height:auto; min-height:100vh; min-height:100svh; }
  html:not(.m3-still) .mp-hero__inner{ animation-name:none; }
}