/* ═══════════════════════════════════════════════════════════════════════════
   scorre.css — geometria degli effetti pilotati dallo scorrimento.

   Compagno di scorre.js: qui c'è tutto quello che il browser sa fare da solo
   (sticky, clip-path, flex, snap), là solo i numeri che cambiano a ogni pixel
   di scroll. Chi legge il CSS deve poter capire la sezione anche a JS spento.

   NON contiene colori, font né spaziature di marca: solo movimento e ingombri.
   È voluto — la coreografia si riusa da un cliente all'altro, la palette no.
   I pochi valori regolabili sono variabili CSS, sovrascrivibili dal tema.

   Compatibilità: sticky, clip-path e svh sono ovunque dal 2023. Niente
   animation-timeline: quello copre solo i browser recenti e il calcolo a mano
   in scorre.js rende identico il risultato dappertutto, telefoni compresi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. apre — un'immagine che si allarga fino a riempire lo schermo ───────
   La sezione è alta più di uno schermo: dentro, un blocco fermo (sticky) tiene
   il quadro immobile mentre la pagina scorre, e il ritaglio si apre. Quando la
   corsa finisce, la sezione riparte e il quadro esce. */
[data-scorre="apre"] { position: relative; height: var(--scorre-corsa, 180vh); }
[data-scorre="apre"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}
[data-scorre="apre"] .scorre-quadro {
  width: 100vw; height: 100svh; margin: 0; overflow: hidden;
  clip-path: inset(var(--scorre-taglio-y, 15%) var(--scorre-taglio-x, 11%)
             round var(--scorre-raggio, 1.5rem));
  will-change: clip-path;
}
[data-scorre="apre"] .scorre-quadro > img,
[data-scorre="apre"] .scorre-quadro > video {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── 2. pista — lo scroll verticale diventa spostamento orizzontale ────────
   La sezione è alta quanto serve a percorrere il nastro (lo calcola il JS con
   data-corsa="auto"). Il blocco fermo resta in vista, la pista trasla.
   Sotto la soglia mobile smette di essere pilotata e torna una lista che si
   trascina col dito, con lo scatto sulle schede: sul telefono è più naturale
   del sequestro dello scroll, e non costa un ricalcolo a ogni pixel. */
[data-scorre="pista"] { position: relative; }
[data-scorre="pista"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
[data-scorre="pista"] .scorre-pista {
  display: flex; gap: var(--scorre-passo, 1rem);
  width: max-content; will-change: transform;
}
[data-scorre="pista"] .scorre-pista > * { flex: none; }

/* ── 3. pila — schede che si accatastano una sull'altra ────────────────────
   Ogni scheda è sticky alla stessa quota: la successiva sale e copre la
   precedente, che intanto sfuma e arretra di un soffio. Il margine sotto a
   ogni scheda è lo spazio di scroll che serve a scoprire quella dopo. */
/* La coda è un blocco vero in fondo al contenitore, e non un padding né un
   margine sull'ultima scheda: una scheda sticky si muove solo dentro il
   *content box* di chi la contiene, e né il padding del contenitore né il
   margine di un figlio lo estendono. Senza questo blocco l'ultima scheda non è
   mai davvero sticky — scorre via senza fermarsi in quota, mentre le altre si
   impilano, ed è esattamente l'effetto che salta all'occhio.
   Quanta coda: il minimo per arrivare in quota è 100vh − quota − altezza della
   scheda (schede da 58vh e quota 15vh: 27vh), ma al minimo ci arriva e riparte
   nello stesso istante. Il 70vh predefinito le lascia il tempo di stare ferma
   come le altre — che è quello che fa sembrare la pila una pila. */
[data-scorre="pila"] { display: flow-root; }
[data-scorre="pila"]::after {
  content: ""; display: block; height: var(--scorre-coda, 70vh);
}
[data-scorre="pila"] .scorre-scheda {
  position: sticky; top: var(--scorre-quota, max(6rem, 15vh));
  margin-bottom: var(--scorre-stacco, 25vh);
  overflow: hidden; will-change: opacity, transform;
}
/* L'ultima scheda ha bisogno di spazio sotto di sé quanto il resto: senza, il
   contenitore finisce prima che lei arrivi alla quota di fermata, e si vede
   scivolare via un attimo prima di impilarsi come le altre. */
[data-scorre="pila"] .scorre-scheda:last-child { margin-bottom: 120px; }

/* ── 4. tinta — il fondo della pagina cambia colore entrando nella sezione ─
   Non si anima `background` sul body: si accende un pannello fisso dietro
   tutto, che il browser compone su GPU. Il colore del testo lo cambia il tema,
   agganciandosi a .scorre-scuro sul body. */
.scorre-fondale {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--scorre-tinta, #101010);
  opacity: 0; transition: opacity var(--scorre-fusione, 1000ms) ease;
}
body.scorre-scuro .scorre-fondale { opacity: 1; }
body { transition: color var(--scorre-fusione, 900ms) ease; }

/* ── 5. nastro — una fila di loghi che scorre mentre la si attraversa ──────
   Diverso da `pista`: qui la sezione NON è sticky e non sequestra lo scroll.
   Il nastro si sposta di quel poco che serve a mostrarsi tutto nel tempo in
   cui la sezione passa davanti. Regge bene anche su telefono. */
[data-scorre="nastro"] .scorre-finestra { overflow: hidden; }
[data-scorre="nastro"] .scorre-binario {
  display: flex; align-items: center; gap: var(--scorre-passo, 4rem);
  width: max-content; will-change: transform;
}
[data-scorre="nastro"] .scorre-binario > * { flex: none; }

/* ── 6. aurora — gradiente lento sotto una sezione ─────────────────────────
   L'unico effetto del gruppo che NON dipende dallo scroll: è un loop, e sta
   qui perché nasce nelle stesse pagine. Due strati sfalsati di mezzo ciclo
   fanno sì che il movimento non torni mai sullo stesso punto in modo visibile.
   I due gradienti li dà il tema con --scorre-aurora-1 / --scorre-aurora-2. */
.scorre-aurora { position: relative; isolation: isolate; overflow: hidden; }
.scorre-aurora::before, .scorre-aurora::after {
  content: ""; position: absolute; z-index: -1;
  width: 200%; height: 200%; top: -50%; left: -50%;
  filter: blur(var(--scorre-velo, 20px));
  animation: scorre-aurora var(--scorre-giro, 11s) cubic-bezier(.77,0,.175,1) infinite;
  will-change: transform;
}
.scorre-aurora::before { background: var(--scorre-aurora-1, none); }
.scorre-aurora::after  { background: var(--scorre-aurora-2, none);
                         animation-delay: calc(var(--scorre-giro, 11s) / -2); }
@keyframes scorre-aurora {
  0%, 100% { transform: translate3d(0,0,0) rotate(0) scale(1); }
  25%      { transform: translate3d(5%,-5%,0) rotate(5deg) scale(1.05); }
  50%      { transform: translate3d(-5%,5%,0) rotate(-5deg) scale(1.1); }
  75%      { transform: translate3d(3%,-3%,0) rotate(3deg) scale(1.05); }
}

/* ── 7. nebbia / prisma — fondali CSS lenti ──────────────────────────────
   I colori restano nel tema. `nebbia` riceve due radial-gradient completi;
   `prisma` riceve i due colori del suo conic-gradient. */
.scorre-nebbia, .scorre-prisma {
  position: relative; isolation: isolate; overflow: hidden;
}
.scorre-nebbia { background: var(--scorre-nebbia-fondo, none); }
.scorre-nebbia::before, .scorre-nebbia::after {
  content: ""; position: absolute; z-index: -1;
  width: 180%; height: 180%; top: -40%; left: -40%;
  filter: blur(var(--scorre-nebbia-velo, 1rem));
  animation: scorre-nebbia var(--scorre-nebbia-giro, 18s) linear infinite;
  will-change: transform;
}
.scorre-nebbia::before { background: var(--scorre-nebbia-1, none); }
.scorre-nebbia::after {
  background: var(--scorre-nebbia-2, none);
  animation-delay: calc(var(--scorre-nebbia-giro, 18s) / -2);
}
@keyframes scorre-nebbia {
  0%, 100% { transform: translate3d(-4%,-3%,0) scale(1); }
  50% { transform: translate3d(4%,3%,0) scale(1.08); }
}

.scorre-prisma { background: var(--scorre-prisma-fondo, none); }
.scorre-prisma::before {
  content: ""; position: absolute; z-index: -1;
  width: 180%; aspect-ratio: 1; top: 50%; left: 50%;
  background: conic-gradient(var(--scorre-prisma-1), var(--scorre-prisma-2), var(--scorre-prisma-1));
  filter: blur(var(--scorre-prisma-velo, 0px));
  transform: translate3d(-50%,-50%,0);
  animation: scorre-prisma var(--scorre-prisma-giro, 22s) linear infinite;
  will-change: transform;
}
@keyframes scorre-prisma {
  from { transform: translate3d(-50%,-50%,0) rotate(0); }
  to { transform: translate3d(-50%,-50%,0) rotate(1turn); }
}

/* ── 8. orbita — carte che girano attorno a un messaggio ─────────────────
   Ogni carta dichiara angolo, raggio e misura: il modulo non sa nulla delle
   fotografie né della loro marca. Il testo resta sopra l'anello. */
.scorre-orbita {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  background: var(--scorre-orbita-fondo, none);
}
.scorre-orbita__anello {
  position: absolute; z-index: 0; inset: 0;
  animation: scorre-orbita var(--scorre-orbita-giro, 36s) linear infinite;
  will-change: transform;
}
.scorre-orbita__carta {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: var(--scorre-orbita-larghezza, 10rem);
  aspect-ratio: var(--scorre-orbita-proporzione, 4 / 3);
  overflow: hidden; opacity: var(--scorre-orbita-opacita, 1);
  border-radius: var(--scorre-orbita-raggio-carta, .8rem);
  transform: translate3d(-50%,-50%,0) rotate(var(--scorre-orbita-angolo, 0deg))
             translateX(calc(var(--scorre-orbita-raggio, 40vw) * var(--scorre-orbita-riduzione, 1)))
             rotate(calc(var(--scorre-orbita-angolo, 0deg) * -1))
             rotate(var(--scorre-orbita-inclinazione, 0deg))
             scale(var(--scorre-orbita-scala, 1));
}
.scorre-orbita__carta > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.scorre-orbita__testo { position: relative; z-index: 1; text-align: center; }
@keyframes scorre-orbita {
  from { transform: rotate(0); }
  to { transform: rotate(calc(1turn * var(--scorre-orbita-verso, 1))); }
}

/* ── 9. rimbalzo — un divisore che segue l'inerzia dello scroll ────────── */
[data-scorre="rimbalzo"] { display: block; width: 100%; overflow: hidden; }
[data-scorre="rimbalzo"] .scorre-rimbalzo {
  display: block; width: 100%; height: var(--scorre-rimbalzo-altezza, 2.5rem);
  overflow: visible;
}
[data-scorre="rimbalzo"] .scorre-rimbalzo path {
  fill: var(--scorre-rimbalzo-riempimento, none);
  stroke: var(--scorre-rimbalzo-tratto, currentColor);
  stroke-width: var(--scorre-rimbalzo-spessore, 1);
  vector-effect: non-scaling-stroke;
}


/* ── 9. tenda — un blocco che si scopre salendo ───────────────────────────
   Il parente in flusso di `apre`: nessuna sezione alta, nessuno sticky. Il
   ritaglio di partenza sta qui, così a JS spento il blocco si vede intero. */
[data-scorre="tenda"] .scorre-telo,
[data-scorre="tenda"] { will-change: clip-path; }
[data-scorre="tenda"] .scorre-telo > img,
[data-scorre="tenda"] > img { display: block; width: 100%; }

/* ── 8. sfondo — il fondo scorre più lento della sezione ──────────────────
   Il fondo è più alto della sezione perché, muovendosi, non deve mai
   scoprire il bordo. Quanto deve sporgere dipende da `data-corsa`, quindi non è
   un numero fisso: lo calcola scorre.js e lo scrive in --scorre-fondo-fuori.
   Il 9% predefinito vale per la corsa predefinita del 12%. */
[data-scorre="sfondo"] { position: relative; isolation: isolate; overflow: hidden; }
[data-scorre="sfondo"] .scorre-fondo {
  position: absolute; z-index: -1; width: 100%;
  inset: calc(var(--scorre-fondo-fuori, 9%) * -1) 0;
  height: calc(100% + var(--scorre-fondo-fuori, 9%) * 2);
  will-change: transform;
}
[data-scorre="sfondo"] .scorre-fondo > img,
[data-scorre="sfondo"] .scorre-fondo > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}


/* ── 9. tappe — un indice fermo, i pannelli che si danno il cambio ────────
   La sezione dura una schermata per tappa: dentro, un blocco fermo tiene
   l'indice a sinistra e i pannelli a destra, sovrapposti nella stessa cella di
   griglia. Quello in scena esce verso l'alto mentre il successivo sale, e per
   un momento si incrociano. Finita l'ultima tappa il blocco si sgancia da sé e
   la pagina riprende a scorrere: non è programmato, è quello che fa sticky
   quando il contenitore finisce.

   È l'effetto più impegnativo della libreria in termini di scroll — tre tappe
   sono tre schermate in cui la pagina non avanza. Vale per la sezione che
   racconta come si lavora, non per un elenco di servizi. */
[data-scorre="tappe"] { position: relative; }
[data-scorre="tappe"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: minmax(8rem, var(--scorre-indice-largo, 16rem)) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
}
[data-scorre="tappe"] .scorre-indice {
  position: relative; display: flex; flex-direction: column;
  gap: var(--scorre-indice-passo, 1.6rem); padding-left: 1.5rem;
}
/* La traccia e il filo che la riempie: il filo è la sola cosa che dice a che
   punto si è, ed è anche l'unico modo di capire quanto manca. */
[data-scorre="tappe"] .scorre-indice::before,
[data-scorre="tappe"] .scorre-filo {
  content: ""; position: absolute; left: 0; top: .4em; bottom: .4em; width: 2px;
  background: currentColor;
}
[data-scorre="tappe"] .scorre-indice::before { opacity: .15; }
[data-scorre="tappe"] .scorre-filo {
  transform-origin: top; transform: scaleY(var(--scorre-avanzamento, 0));
}
[data-scorre="tappe"] .scorre-indice a,
[data-scorre="tappe"] .scorre-indice button {
  opacity: .38; transition: opacity .45s cubic-bezier(.22,1,.36,1);
  text-align: left; text-decoration: none; color: inherit; font: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
[data-scorre="tappe"] .scorre-indice .scorre-viva { opacity: 1; }

[data-scorre="tappe"] .scorre-tappe { display: grid; }
[data-scorre="tappe"] .scorre-tappa {
  grid-area: 1 / 1; will-change: transform, opacity;
}


/* ── 10. frase — una riga che sfila e si compone lettera per lettera ──────
   La riga è larga quanto le serve e non va a capo: è una sfilata, non un
   paragrafo. Le lettere si muovono di transform, mai di margine, o il testo
   si riflowerebbe a ogni fotogramma. */
[data-scorre="frase"] { position: relative; }
[data-scorre="frase"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
[data-scorre="frase"] .scorre-frase {
  margin: 0; white-space: nowrap; width: max-content;
  will-change: transform; padding-inline: 10vw;
}
[data-scorre="frase"] .scorre-parola { display: inline-block; white-space: nowrap; }
[data-scorre="frase"] .scorre-lettera { display: inline-block; will-change: transform; }

/* ── 11. mosaico — la composizione che si ingrandisce su una tessera ──────
   La griglia la disegna il tema: qui c'è solo il quadro che ritaglia e il
   fatto che la scala parta dal centro della tessera scelta. */
[data-scorre="mosaico"] { position: relative; }
[data-scorre="mosaico"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
[data-scorre="mosaico"] .scorre-mosaico { will-change: transform; }
[data-scorre="mosaico"] .scorre-tessera { overflow: hidden; margin: 0; }
[data-scorre="mosaico"] .scorre-tessera > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── 12. trasloca — l'elemento che va da un segno all'altro ───────────────
   I segni restano nel flusso e non si vedono; il viaggiatore è fuori dal
   flusso, quindi si muove senza spostare niente. */
[data-scorre="trasloca"] { position: relative; }
[data-scorre="trasloca"] .scorre-viaggiatore {
  position: absolute; top: 0; left: 0; z-index: 2;
  will-change: transform, width, height;
}
[data-scorre="trasloca"] .scorre-segno { visibility: hidden; }


/* ── 13. fari — due luci colorate che girano e cambiano tinta ─────────────
   Ripreso da un fondale CSS di Rich Sowden (CodePen "Aurora BG", MIT), con una
   differenza: l'originale muove `top` e `left`, che rifanno il layout a ogni
   fotogramma; qui si muove `transform`, che sta sulla scheda grafica. Le misure
   sono in percentuale del contenitore e non in vmax, così il fondale funziona
   uguale in un riquadro piccolo e a piena pagina.

   Tutto in due pseudo-elementi: nessun markup, nessun JavaScript. */
.scorre-fari { position: relative; isolation: isolate; overflow: hidden;
               background: var(--scorre-fari-fondo, #0b0b12); }
.scorre-fari::before, .scorre-fari::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: var(--scorre-fari-velo, .55);
  will-change: transform, filter;
}
.scorre-fari::before {
  background: radial-gradient(circle at 50% 50%,
              var(--scorre-fari-1, #ff2d55) 0%, transparent var(--scorre-fari-raggio, 42%));
  animation: scorre-fari-a var(--scorre-fari-giro, 14s) linear infinite,
             scorre-tinta var(--scorre-fari-tinta, 7s) linear infinite;
}
.scorre-fari::after {
  background: radial-gradient(circle at 50% 50%,
              var(--scorre-fari-2, #00e5ff) 0%, transparent var(--scorre-fari-raggio, 42%));
  animation: scorre-fari-b calc(var(--scorre-fari-giro, 14s) * 1.7) linear infinite,
             scorre-tinta calc(var(--scorre-fari-tinta, 7s) * 1.6) linear infinite;
}
@keyframes scorre-fari-a {
  0%, 100% { transform: translate3d(0, -32%, 0); }
  25%      { transform: translate3d(-34%, 0, 0); }
  50%      { transform: translate3d(0, 32%, 0); }
  75%      { transform: translate3d(34%, 0, 0); }
}
@keyframes scorre-fari-b {
  0%, 100% { transform: translate3d(30%, 26%, 0); }
  33%      { transform: translate3d(-28%, 18%, 0); }
  66%      { transform: translate3d(6%, -30%, 0); }
}
@keyframes scorre-tinta { to { filter: hue-rotate(360deg); } }

/* ── 14. boreale — bande diagonali che scorrono, come un'aurora vera ──────
   La tecnica del fondale "aurora" di Lynn Fisher / Jhey (CodePen, MIT): un
   `repeating-linear-gradient` inclinato, sfocato e mascherato in diagonale, con
   un secondo strato che scorre a velocità diversa in `difference` — è quello
   che fa il luccichio dove i due si incrociano.

   Le bande le dà il tema con --scorre-boreale-bande: cambiando quei cinque
   colori si passa dal blu polare a qualunque altra cosa. */
.scorre-boreale { position: relative; isolation: isolate; overflow: hidden;
                  background: var(--scorre-boreale-fondo, #05060f); }
.scorre-boreale::before, .scorre-boreale::after {
  content: ""; position: absolute; inset: -35%; z-index: -1;
  background-image: var(--scorre-boreale-bande,
    repeating-linear-gradient(100deg,
      #1a2a6c 10%, #4b6cb7 15%, #86a8e7 20%, #7f7fd5 25%, #1a2a6c 30%));
  background-size: 200% 200%;
  filter: blur(var(--scorre-boreale-velo, 26px));
  opacity: var(--scorre-boreale-forza, .6);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 72%);
  animation: scorre-boreale var(--scorre-boreale-giro, 26s) linear infinite;
}
.scorre-boreale::after {
  animation-duration: calc(var(--scorre-boreale-giro, 26s) * 0.62);
  animation-direction: reverse;
  mix-blend-mode: difference;          /* il luccichio dove i due si incrociano */
  opacity: calc(var(--scorre-boreale-forza, .6) * .8);
}
@keyframes scorre-boreale {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}


/* ── 15. maschera — si entra dentro il marchio ────────────────────────────
   Il velo è una tinta piena stesa sopra la pagina, bucata dalla forma del
   logo: quello che si vede attraverso il buco è la sezione sotto. Cresce il
   buco, non il logo — è la stessa differenza che c'è fra aprire una porta e
   ingrandire la stanza. */
[data-scorre="maschera"] { position: relative; }
[data-scorre="maschera"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
[data-scorre="maschera"] .scorre-sotto { position: absolute; inset: 0; }
[data-scorre="maschera"] .scorre-velo {
  position: absolute; inset: 0; z-index: 2;
  background: var(--scorre-velo-tinta, #14110f);
  will-change: mask-size;
  /* gli strati della maschera li scrive scorre.js: qui basta sapere che il
     velo è pieno e che il marchio ci fa il buco */
}

/* ── 16. giostra — carte che girano senza principio né fine ───────────────
   Tutte nello stesso punto, sovrapposte: è il transform a metterle in fila.
   Così aggiungere o togliere una carta non richiede di rifare i conti. */
[data-scorre="giostra"] { position: relative; }
[data-scorre="giostra"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
[data-scorre="giostra"] .scorre-carta {
  grid-area: 1 / 1; will-change: transform, opacity;
}

/* ── 17. insegna — il marchio che scende nella barra ──────────────────────
   La barra è già al suo posto dall'inizio: quello che si muove è solo il
   marchio dentro di lei. Il resto della barra compare quando il marchio è
   arrivato, con --scorre-insegna-fatta che va da 0 a 1. */
[data-scorre="insegna"] { position: relative; }
[data-scorre="insegna"] .scorre-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
}
[data-scorre="insegna"] .scorre-marchio {
  transform-origin: left top; will-change: transform;
}
[data-scorre="insegna"] .scorre-resto { opacity: var(--scorre-insegna-fatta, 0); }
/* Questa zona vuota viene prima del richiamo "Scorri" e del contenuto della
   hero. La sua altezza e calcolata dal JS come corsa del logo + respiro: il
   marchio arriva quindi nella barra prima che testo e fotografie lo possano
   raggiungere. Senza JS non aggiunge spazio artificiale. */
[data-scorre="insegna"].scorre-insegna-pronta .scorre-insegna-attesa {
  min-height: var(--scorre-insegna-attesa, 140svh);
}


/* ── 18. vento — le lettere che si sparpagliano ───────────────────────────
   Nessuno sticky e nessuna altezza calcolata: si mette su un titolo com'è, e
   il movimento avviene mentre la sezione passa davanti allo schermo. */
[data-scorre="vento"] { position: relative; }
[data-scorre="vento"] .scorre-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
[data-scorre="vento"] .scorre-vento { will-change: contents; }
[data-scorre="vento"] .scorre-parola { display: inline-block; white-space: nowrap; }
[data-scorre="vento"] .scorre-lettera { display: inline-block; will-change: transform, opacity; }

/* ── Telefono ─────────────────────────────────────────────────────────────
   Sotto 780px le due sezioni che sequestrano lo scroll (apre, pista) tornano
   blocchi normali. Il resto — pila, tinta, nastro — funziona uguale col dito:
   sono legati alla posizione della pagina, non al puntatore. */
@media (max-width: 780px) {
  .scorre-orbita {
    --scorre-orbita-riduzione: var(--scorre-orbita-riduzione-mobile, .62);
    --scorre-orbita-scala: var(--scorre-orbita-scala-mobile, .72);
  }
  /* `apre` resta acceso: non sequestra lo scroll, lo accompagna — l'immagine si
     allarga mentre la pagina scende, ed è l'effetto che sul telefono si nota di
     più. Corsa un po' più corta, perché lì si scorre a strappi più brevi. */
  [data-scorre="apre"] { height: var(--scorre-corsa-mobile, 150vh); }
  [data-scorre="pista"] { height: auto !important; }
  [data-scorre="pista"] .scorre-fermo {
    position: relative; height: auto; overflow: visible;
  }
  /* `proximity` e non `mandatory`: con schede larghe quasi quanto lo schermo,
     lo snap obbligatorio riporta indietro ogni trascinamento che non arrivi
     fino alla scheda successiva, e sembra che la fila sia bloccata. Con
     proximity si scorre libero e l'aggancio avviene solo se si è già vicini.
     `touch-action` e `overscroll-behavior` tengono il gesto orizzontale qui,
     invece di lasciarlo scappare alla pagina. */
  [data-scorre="pista"] .scorre-pista {
    width: auto; overflow-x: auto; scroll-snap-type: x proximity;
    touch-action: pan-x pan-y; overscroll-behavior-x: contain;
    transform: none !important; -webkit-overflow-scrolling: touch;
  }
  [data-scorre="pista"] .scorre-pista > * { scroll-snap-align: start; }
  [data-scorre="pila"] .scorre-scheda { margin-bottom: var(--scorre-stacco-mobile, 22vh); }
  /* `tappe` non ha senso su uno schermo stretto: l'indice a lato non ci sta, e
     tre schermate sequestrate col dito sono più lunghe che col mouse. Torna una
     sequenza di blocchi, con l'indice ridotto a una riga di ancore vere. */
  /* `frase` e `mosaico` restano: sono legati allo scorrimento e reggono col
     dito. `trasloca` invece va in colonna — su schermo stretto i segni finiscono
     uno sotto l'altro e il viaggio diventa un elenco, che è più chiaro. */
  [data-scorre="frase"] .scorre-frase { padding-inline: 6vw; }
  /* la giostra su schermo stretto tiene le carte più vicine, o restano quasi
     tutte fuori campo e il giro sembra vuoto */
  [data-scorre="giostra"] .scorre-carta { --scorre-giostra-passo: 46%; }
  [data-scorre="trasloca"] { height: auto !important; }
  [data-scorre="trasloca"] .scorre-viaggiatore { position: relative; transform: none !important;
    width: auto !important; height: auto !important; }
  [data-scorre="trasloca"] .scorre-segno { display: none; }
  [data-scorre="tappe"] { height: auto !important; }
  [data-scorre="tappe"] .scorre-fermo {
    position: relative; height: auto; overflow: visible;
    grid-template-columns: 1fr; gap: 1.8rem;
  }
  [data-scorre="tappe"] .scorre-indice {
    flex-direction: row; flex-wrap: wrap; gap: .5rem 1.4rem; padding-left: 0;
  }
  [data-scorre="tappe"] .scorre-indice::before,
  [data-scorre="tappe"] .scorre-filo { display: none; }
  [data-scorre="tappe"] .scorre-indice a,
  [data-scorre="tappe"] .scorre-indice button { opacity: 1; }
  [data-scorre="tappe"] .scorre-tappe { display: block; }
  [data-scorre="tappe"] .scorre-tappa {
    transform: none !important; opacity: 1 !important; margin-bottom: 3.5rem;
  }
}

/* ── Chi ha chiesto meno movimento ────────────────────────────────────────
   Non si spegne l'animazione lasciando l'elemento a metà strada: si smonta la
   coreografia e si restituisce la pagina impaginata in modo normale. */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  [data-scorre="apre"], [data-scorre="pista"] { height: auto !important; }
  [data-scorre="apre"] .scorre-fermo,
  [data-scorre="pista"] .scorre-fermo { position: relative; height: auto; overflow: visible; }
  [data-scorre="apre"] .scorre-quadro { width: 100%; height: 70vh; clip-path: none; }
  [data-scorre="pista"] .scorre-pista,
  [data-scorre="nastro"] .scorre-binario { width: auto; overflow-x: auto; transform: none !important; }
  [data-scorre="pila"] .scorre-scheda {
    position: relative; top: auto; margin-bottom: 3rem;
    opacity: 1 !important; transform: none !important;
  }
  [data-scorre="tenda"] .scorre-telo, [data-scorre="tenda"] { clip-path: none !important; }
  [data-scorre="frase"], [data-scorre="mosaico"], [data-scorre="trasloca"],
  [data-scorre="maschera"], [data-scorre="giostra"], [data-scorre="insegna"] { height: auto !important; }
  [data-scorre="maschera"] .scorre-fermo, [data-scorre="giostra"] .scorre-fermo {
    position: relative; height: auto; }
  [data-scorre="maschera"] .scorre-velo { display: none; }
  [data-scorre="giostra"] .scorre-carta { position: relative; grid-area: auto;
    transform: none !important; opacity: 1 !important; }
  [data-scorre="insegna"] .scorre-marchio { transform: none !important; }
  [data-scorre="insegna"] .scorre-resto { opacity: 1; }
  [data-scorre="insegna"] .scorre-insegna-attesa { min-height: auto !important; }
  [data-scorre="vento"] { height: auto !important; }
  [data-scorre="vento"] .scorre-fermo { position: relative; height: auto; }
  [data-scorre="vento"] .scorre-lettera { transform: none !important; opacity: 1 !important; }
  [data-scorre="frase"] .scorre-fermo, [data-scorre="mosaico"] .scorre-fermo {
    position: relative; height: auto; overflow: hidden; }
  [data-scorre="frase"] .scorre-frase { transform: none !important; white-space: normal;
    width: auto; }
  [data-scorre="frase"] .scorre-lettera { transform: none !important; }
  [data-scorre="mosaico"] .scorre-mosaico { transform: none !important; }
  [data-scorre="trasloca"] .scorre-viaggiatore { position: relative; transform: none !important;
    width: auto !important; height: auto !important; }
  [data-scorre="trasloca"] .scorre-segno { display: none; }
  [data-scorre="tappe"] { height: auto !important; }
  [data-scorre="tappe"] .scorre-fermo { position: relative; height: auto; overflow: visible;
    grid-template-columns: 1fr; }
  [data-scorre="tappe"] .scorre-tappe { display: block; }
  [data-scorre="tappe"] .scorre-tappa { transform: none !important; opacity: 1 !important;
    margin-bottom: 3rem; }
  [data-scorre="tappe"] .scorre-indice a { opacity: 1; }
  [data-scorre="sfondo"] .scorre-fondo { transform: none !important; inset: 0; height: 100%; }
  .scorre-fondale { transition-duration: 180ms; }
  .scorre-aurora::before, .scorre-aurora::after,
  .scorre-nebbia::before, .scorre-nebbia::after,
  .scorre-prisma::before, .scorre-orbita__anello { animation: none; }
  .scorre-fari::before, .scorre-fari::after,
  .scorre-boreale::before, .scorre-boreale::after { animation: none; }
}