/* PASSAGGIO ORIZZONTALE — prototipo, 11 settembre 2026.
   Solo la home italiana. La versione inglese non e' toccata: il titolare vuole
   approvare l'effetto prima di replicarlo.

   Richiesta: «arrivo all'introduzione, la scena diventa sticky, continuando a
   scrollare verticalmente la composizione si sposta lateralmente, finito lo
   spostamento la scena viene rilasciata e riprende lo scroll verticale verso
   Camere». Un solo movimento: X. Niente zoom, scala, parallasse, dissolvenze,
   movimento verticale o movimento separato di testo e immagine.

   DUE STATI, e questo e' il meccanismo di spegnimento.
   A riposo (nessun JavaScript, telefono, movimento ridotto) questo foglio non
   fa quasi nulla: la sezione resta il blocco di testo di oggi e la fotografia
   gli si impila sotto. Tutto il comportamento orizzontale sta dietro la classe
   `is-attivo`, che aggiunge passaggio.js solo quando ha davvero senso.
   Togliendo le due righe dello <script> e del <link> dalla home, la sezione
   torna esattamente com'era: non serve disfare nient'altro. */

/* ------------------------------------------------------------
   1. A RIPOSO — impilato, come oggi
   ------------------------------------------------------------ */

.mm-passaggio__fila { display: block; }

.mm-passaggio__foto {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.mm-passaggio__foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   2. ATTIVO — il passaggio orizzontale
   ------------------------------------------------------------
   COLLISIONE NOTA, ed e' la ragione dei selettori a due classi qui sotto.
   La sezione porta anche `mm-alto--solo-testo`, aggiunta stamattina quando e'
   stata tolta la fotografia doppia. Quella classe impone alla sezione
   `height: auto` e al palco `position: static; height: auto; overflow: visible`
   — cioe' esattamente le tre proprieta' che servono qui. Va sovrascritta, ma
   NON va rimossa: contiene anche la regola che tiene VISIBILE il testo
   (`.mm-alto__line { opacity: 1 !important }`), senza la quale in passato sono
   state misurate 5 righe presenti e 0 visibili.
   Specificita': `.mm-alto--solo-testo .mm-alto__stage` vale 0,2,0;
   `.mm-passaggio.is-attivo .mm-alto__stage` vale 0,3,0 e vince a prescindere
   dall'ordine di caricamento dei fogli. */

.mm-passaggio.is-attivo {
  /* Il binario. 200svh: una schermata in cui il palco resta fermo, piu' una
     schermata di corsa. E' la stessa proporzione misurata su mistral.ai
     (sezione 200dvh, elemento incollato 100dvh). */
  height: 200svh;
  padding-block: 0;
}

.mm-passaggio.is-attivo .mm-alto__stage {
  /* `sticky`, non `pin: true`. Un pin inserisce uno spaziatore e cambia
     l'altezza del documento: assets/volo-presa.js calcola dove riportare la
     pagina proprio da quell'altezza, e il conto punterebbe altrove.
     Sticky non tocca l'altezza del documento. */
  position: sticky;
  top: var(--mm-stage-top);
  height: calc(100svh - var(--mm-stage-top));
  /* `clip` e non `hidden`: `hidden` genera un contenitore di scorrimento, che
     puo' far comparire una barra orizzontale e puo' scorrere da solo quando il
     fuoco da tastiera entra in un pannello fuori vista. `clip` taglia e basta. */
  overflow: clip;
}

.mm-passaggio.is-attivo .mm-passaggio__fila {
  display: flex;
  /* 200% dello stage, non 200vw. `vw` comprende la barra di scorrimento: a
     parita' di aspetto, 100vw e' qualche pixel piu' largo dello spazio
     disponibile e produce la barra orizzontale che non vogliamo. La percentuale
     si riferisce al palco, che la barra non ce l'ha. */
  width: 200%;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.mm-passaggio.is-attivo .mm-passaggio__pannello {
  flex: 0 0 50%;          /* meta' della fila = una schermata esatta */
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.mm-passaggio.is-attivo .mm-passaggio__foto {
  margin: 0;
  display: block;
}
.mm-passaggio.is-attivo .mm-passaggio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il piano del progetto fissa raggio <= 4px sulle fotografie grandi: nessun
     angolo arrotondato qui. */
}

/* ------------------------------------------------------------
   3. Movimento ridotto
   ------------------------------------------------------------
   passaggio.js non si attiva con `prefers-reduced-motion: reduce`, quindi la
   classe `is-attivo` non compare e vale lo stato a riposo. Questa regola e' la
   cintura di sicurezza: se qualcuno un domani togliesse quel controllo dallo
   script, qui il passaggio resta comunque spento.
   Nota: «movimento ridotto» significa togliere gli spostamenti ampi, ed e'
   esattamente cio' che questo effetto e'. Il contenuto resta tutto leggibile,
   impilato. */
@media (prefers-reduced-motion: reduce) {
  .mm-passaggio.is-attivo { height: auto; padding-block: clamp(4.5rem, 10vw, 8rem); }
  .mm-passaggio.is-attivo .mm-alto__stage { position: static; height: auto; overflow: visible; }
  .mm-passaggio.is-attivo .mm-passaggio__fila { display: block; width: auto; height: auto; transform: none; }
  .mm-passaggio.is-attivo .mm-passaggio__pannello { display: block; height: auto; }
  .mm-passaggio.is-attivo .mm-passaggio__foto { margin-top: clamp(2rem, 5vw, 3.5rem); }
  .mm-passaggio.is-attivo .mm-passaggio__foto img { height: auto; }
}