/* La storia della vetrina («il viaggio», 19 ottobre 2026), sopra lo stile della vetrina (stile.css). Colori e
   misure solo dalle variabili di lingua.css: se la lingua cambia (l'operaia `stile`), la storia segue.
   Il piano: docs/piani/vetrina-viaggio.md. */

/* Lenis muove la pagina da se': lo scorrimento morbido del browser lo intralcerebbe */
.viaggio { scroll-behavior: auto; }
/* niente vetro (backdrop-filter) su quello che scorre sopra il mondo: sfocare un canvas che cambia a ogni
   fotogramma costa troppo (misurato da `stile`, 19 ottobre: p95 da 14 a 35 ms con la CPU 4x) */

/* ------------------------------------------------------------ i piani della pagina
   il mondo 3D sta fermo dietro la storia (z 0); il testo delle tappe sopra (z 1); l'apertura e le
   sezioni dopo la storia sono sipari di carta che gli scorrono sopra (z 2) */
.apertura, .storia ~ section, .fondo { position: relative; z-index: 2; }
:where(.apertura, .storia ~ section) { background-color: var(--carta); }
.apertura { padding-bottom: 12px; }
.storia { position: relative; }
.mondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.con-mondo .mondo { opacity: 1; }
.mondo canvas { display: block; width: 100%; height: 100%; }
.mondo-fermo { display: none; }
.tappa { position: relative; z-index: 1; }

/* ------------------------------------------------------------ l'apertura: il pannello e la busta */
.pannello-viaggio { min-height: calc(100svh - var(--barra) - var(--sopra-barra) - 24px);
  display: flex; flex-direction: column; }
.pannello-viaggio .apertura-sotto-titolo { flex: 1; align-items: end; }
.pannello-viaggio .apertura-lato { align-self: center; justify-items: center; }
.busta { --apre: 0; position: relative; z-index: 3; width: min(360px, 90%); aspect-ratio: 16 / 10; perspective: 900px; }
.busta > * { position: absolute; border-radius: 10px; }
.busta-fondo { inset: 0; background: var(--carta-2); }
.busta-foglio { left: 7%; right: 7%; top: 8%; height: 84%; z-index: 1; border-radius: 6px; background: var(--carta-chiara);
  color: var(--inchiostro); padding: 16px 18px; display: grid; align-content: start; gap: 2px; font-size: .9rem;
  transform: translate3d(0, calc(var(--apre) * -52%), 0); }
.busta-foglio b { font-weight: 600; }
.busta-foglio span { color: var(--inchiostro-3); font-size: .8rem; }
.busta-davanti { inset: 0; z-index: 2; background: color-mix(in srgb, var(--carta-chiara) 70%, var(--carta-2));
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.busta-lembo { left: 0; right: 0; top: 0; height: 60%; z-index: 3; border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--carta-2) 80%, var(--inchiostro-3)); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transform: rotateX(calc(var(--apre) * 178deg)); backface-visibility: visible; }
.busta.aperta .busta-lembo { z-index: 0; }

/* ------------------------------------------------------------ la tappa tre: richiesta, preventivo, «Manda» */
/* designer, terzo giro: la parte ferma dimezzata (era un quarto della storia senza il mondo) */
/* designer, quarto giro: in piu' il 41% all'inizio e la carta che si piega alla fine */
.tappa-tre { height: 320vh; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tappa-tre .palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(32px, 6vw, 96px);
  align-items: center; max-width: var(--largo); margin: 0 auto; padding: calc(var(--barra) + 24px) var(--margine) 24px;
  overflow: visible; }
.tre-testo .titolo { margin-bottom: clamp(28px, 4vw, 48px); }
/* il 41% accanto alla richiesta che arriva: si parla di telefono e mail (al fondo si leggeva come occupazione) */
.viaggio .tre-numero, .viaggio .tre-testo { grid-area: 1 / 1; }
.viaggio .tre-testo { opacity: 0; }
.tre-numero { max-width: 30rem; }
.tre-numero .numero-grande { margin-bottom: 18px; color: var(--inchiostro); }
.numero-testo { font-size: clamp(1.15rem, 1vw + .8rem, 1.6rem); line-height: 1.25; letter-spacing: -.02em; }
.tre-numero .fonte { margin-top: 14px; font-size: .85rem; color: var(--inchiostro-2); }
/* la carta che si piega (havenly.js): copie della carta in fasce, che si arrotolano in 3D dietro la prima; sopra,
   il contorno e il cognome. Sopra il mondo e sotto la barra */
.lettera { position: fixed; z-index: 4; pointer-events: none; perspective: 1400px;
  /* l'ombra e' quella del cartellino 3D sul tabellone: senza, sulla riga chiara la goccia spariva e al cambio saltava */
  filter: drop-shadow(0 10px 9px rgb(23 37 84 / .22)); }
.lettera-fascia, .lettera-angolo { position: absolute; left: 0; top: 0; width: 100%; transform-style: preserve-3d; transform-origin: 50% 0; }
.lettera-angolo { height: 100%; }
.lettera-faccia, .lettera-retro { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.lettera-faccia .carta { margin: 0; }
.lettera-retro { background: var(--carta-2); transform: rotateX(180deg); }
.lettera-retro-angolo { transform: rotateY(180deg); }
.lettera-ombra, .lettera-bianca { position: absolute; inset: 0; opacity: 0; }
.lettera-ombra { background: var(--inchiostro); }
.lettera-bianca { background: var(--carta-chiara); }
.piega { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.piega path { fill: none; stroke: var(--linea); stroke-width: 1; }
.piega text { fill: var(--inchiostro); font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.tre-passi { display: grid; gap: 22px; max-width: 34em; }
/* i passi della storia: un nome loro (.tre-passo), non .passo, la classe dei passi fissi di «Si parte» (stile.css).
   Con lo stesso nome si pestavano i piedi: quelli di «Si parte» uscivano spenti, una parola per riga (Pietro dall'iPad),
   e qui il 2 e il 3 prendevano il filo a sinistra e il numero spostato di 28 px (20 ottobre) */
.tre-passo { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 24px 0 8px;
  border-top: 1px solid var(--linea); opacity: .42; transition: opacity .35s var(--curva); }
.tre-passo.ora, .tre-passo.fatto { opacity: 1; }
.tre-passo-n { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; font-weight: 600; border: 1px solid var(--linea); background: var(--carta-chiara);
  transition: background-color .3s, color .3s; }
.tre-passo.ora .tre-passo-n { background: var(--tasto); color: var(--su-tasto); border-color: transparent; }
.tre-passo h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 10px; max-width: 16em; }
.tre-passo p { color: var(--inchiostro-2); font-size: .97rem; }
@media (max-width: 860px) { .tre-passo { padding-bottom: 28px; } }
/* la carta, che oggi sta sul blu: qui sta sulla carta */
.tre-carta .carta { will-change: transform; transform-origin: 70% 30%; }
.tre-carta .carta-etichetta, .tre-carta .carta-passi li,
.tre-carta .carta[data-passo] [data-passo-segno] { color: var(--inchiostro-3); }
.tre-carta .carta-corpo { box-shadow: 0 0 0 1px var(--linea), 0 40px 80px -40px color-mix(in srgb, var(--inchiostro) 45%, transparent); }
.tre-carta mark { background: transparent; color: inherit; border-radius: 4px; padding: 0 2px; margin: 0 -2px;
  transition: background-color .3s, box-shadow .3s; }
.tre-carta mark.acceso { background: var(--agente-velo); box-shadow: inset 0 -2px 0 var(--agente); }
.volo { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; white-space: nowrap;
  font-size: .8rem; font-weight: 500; padding: 3px 10px; border-radius: var(--pillola);
  background: var(--agente); color: var(--su-agente); will-change: transform; }
.volo::after { content: attr(data-testo); }

/* ------------------------------------------------------------ la barra, sopra il mondo
   mentre si guarda il mondo resta il marchio e il tasto della demo, senza la pillola piena (designer, terzo giro: la
   pillola copriva i comignoli e il tetto); il menu torna passandoci sopra o arrivandoci con la tastiera */
.barra-dentro { transition: background-color .3s var(--curva), color .3s var(--curva); }
.menu { transition: opacity .3s var(--curva), visibility .3s; }
.nel-mondo .barra:not(:hover, :focus-within) .barra-dentro { background-color: transparent; color: var(--inchiostro); }
.nel-mondo .barra:not(:hover, :focus-within) .menu-tasto { color: var(--inchiostro); }
/* il marchio tiene una piccola pillola di carta: sopra le barre blu si perdeva (designer, terzo giro) */
.marchio { transition: background-color .3s var(--curva), box-shadow .3s var(--curva); border-radius: 6px; }
.nel-mondo .barra:not(:hover, :focus-within) .marchio { background-color: var(--carta); box-shadow: 0 0 0 10px var(--carta); }
@media (min-width: 1101px) {
  .nel-mondo .barra:not(:hover, :focus-within) .menu { opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------------ la strada: i cartelli scorrono in orizzontale */
/* i cartelli: testo su una fascia piena in basso, come la strada nera del reel (designer: niente carte bianche) */
.tappa-strada { height: 560vh; }
.viaggio .tappa-strada .palco::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh;
  background: var(--fascia); }
.binario { position: absolute; left: 0; bottom: 0; height: 26vh; display: flex; align-items: center; gap: 30vw;
  will-change: transform; }
/* alla fine della strada la fascia scende via: la curva resta libera (designer, terzo giro) */
.viaggio .tappa-strada .palco::before, .viaggio .binario { translate: 0 calc(var(--giu, 0) * 101%); }
/* la pillola sulla barra della richiesta (la posizione la da' il mondo): una parola alla volta */
.viaggio .stati { position: fixed; left: 0; top: 0; z-index: 1; display: grid; pointer-events: none; opacity: 0; }
.stati li { grid-area: 1 / 1; justify-self: start; padding: 6px 14px; border-radius: var(--pillola); font-size: .85rem;
  font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--curva), transform .3s var(--curva); }
.stati li.ora { opacity: 1; transform: none; }
:is(.stati, .tt-stati) [data-stato-n="0"] { background: var(--carta-chiara); color: var(--inchiostro-2); box-shadow: 0 0 0 1px var(--linea); }
/* da richiamare: il filo rosso scuro sul bianco, come la caparra; il corallo pieno e' solo dei tasti della demo
   (designer, sesto giro) */
:is(.stati, .tt-stati) [data-stato-n="1"] { background: var(--carta-chiara); color: var(--luce-testo); font-weight: 600; box-shadow: 0 0 0 1.5px var(--luce-testo); }
/* la caparra: bianca col testo blu, accanto alla barra che si fa blu (designer, quarto giro) */
:is(.stati, .tt-stati) [data-stato-n="2"] { background: var(--carta-chiara); color: var(--fascia); font-weight: 600; box-shadow: 0 0 0 1.5px var(--fascia); }
.cartello { width: min(380px, 80vw); flex: none; padding: 0 0 0 18px; border-left: 2px solid var(--luce);
  color: var(--su-fascia); }
.cartello h3 { font-weight: 500; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; }
.cartello p { color: var(--su-fascia-2); font-size: .97rem; }

/* ------------------------------------------------------------ la curva: si scorre in giu', la strada in mezzo */
.tappa-curva { padding: 28vh 0 70vh; }
.curva-dentro { max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine); }
/* il titolo fermo a sinistra per tutta la discesa, la strada in mezzo, i casi a destra legati da un filo */
.colonne { display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.curva-titolo .titolo { position: sticky; top: calc(var(--barra) + 10vh); }
.usi { display: grid; gap: 24vh; align-content: start; padding-top: 30vh; }
.uso { position: relative; max-width: 380px; }
.viaggio .uso::before { content: ""; position: absolute; right: 100%; top: 20px; width: clamp(24px, 4vw, 64px);
  margin-right: 12px; border-top: 1px solid var(--inchiostro-3); }
.uso-icona { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
  background: var(--carta-2); color: var(--inchiostro); }
.uso h3 { font-weight: 500; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 6px; }
.uso p { color: var(--inchiostro-2); font-size: .97rem; }
.uso-dimenticato h3 { color: var(--luce-testo); }
/* si accende quando la chiave gli passa accanto: il filo verso la strada prende la luce */
.viaggio .uso { opacity: .32; transition: opacity .45s var(--curva); }
.viaggio .uso::before { transition: border-color .45s var(--curva); }
.viaggio .uso.acceso { opacity: 1; }
.viaggio .uso.acceso::before { border-top-color: var(--luce); border-top-width: 2px; }
/* ------------------------------------------------------------ l'arrivo: l'albergo la sera */
/* designer, quarto giro: lo scatto, mezza schermata ferma, il ritorno nella notte, il campo che si richiude */
.tappa-arrivo { height: 520vh; }
.chiusa-campo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chiusa-velo { position: absolute; inset: 0; background: var(--fascia); opacity: 0; pointer-events: none; }
/* la domanda della demo sul blu, come l'apertura: l'apertura si scioglieva, la fine si ricompone */
.chiusa { display: grid; justify-items: center; gap: clamp(24px, 3vw, 36px); text-align: center; color: var(--su-fascia); }
:is(.viaggio, .pista) .chiusa { position: absolute; inset: 0; align-content: center; padding: 0 var(--margine); visibility: hidden; }
:is(.viaggio, .pista) .chiusa-titolo { opacity: 0; }
/* il tasto nasce dalla finestra accesa della 214 (havenly.js): parte dell'ambra della finestra e arriva al colore del
   tasto della barra (--colore), poi le parole. Niente transizione: lo porta lo scorrimento */
:is(.viaggio, .pista) .chiusa .tasto { transform-origin: 50% 50%; will-change: transform; transition: none;
  border-radius: calc(4px + var(--tondo, 1) * 26px);
  background: color-mix(in srgb, var(--luce) calc(50% + var(--colore, 1) * 50%), rgb(255 158 77));
  color: color-mix(in srgb, var(--su-luce) calc(var(--parole, 1) * 100%), transparent); }
/* nella chiusa la barra lascia il tasto alla luce della 214 */
.viaggio .barra .tasto-piccolo { transition: background-color var(--apre), color var(--apre), opacity .3s var(--curva), visibility .3s; }
.in-chiusa .barra .tasto-piccolo { opacity: 0; visibility: hidden; }
.chiusa-titolo { font-weight: 500; letter-spacing: var(--tr-titolo); font-size: clamp(2.4rem, 4.2vw + 1rem, 5rem);
  line-height: 1.02; max-width: 14em; text-wrap: balance; }
.chiusa-titolo em { font-style: normal; }
/* il tasto e' quello della barra (che nella chiusa si toglie), piu' grande: lo stesso corallo, le stesse parole scure
   (designer, sesto giro: l'ambra della finestra con le parole a meta' era un altro arancione, a 2:1) */
.chiusa .tasto { background: var(--luce); color: var(--su-luce); min-height: 60px; padding: 0 34px; font-size: 1.1rem; }

/* ------------------------------------------------------------ ferma: telefono, meno movimento, senza 3D, senza JS
   le scene una sotto l'altra, ognuna nel suo ultimo momento. E' la pagina di base: la storia si accende solo
   con html.viaggio, che mette lo script in testa alla pagina (costruisci.py) quando il computer la regge */
html:not(.viaggio) .tappa { height: auto; }
html:not(.viaggio) .palco { position: static; height: auto; overflow: visible; }
html:not(.viaggio) .tappa-tre .palco { grid-template-columns: 1fr; padding: clamp(64px, 10vw, 120px) var(--margine); }
html:not(.viaggio) .volo, html:not(.viaggio) .mondo { display: none; }
html:not(.viaggio) .tappa-strada .palco { max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine) clamp(64px, 10vw, 120px); }
html:not(.viaggio) .binario { position: static; display: grid; gap: 16px; transform: none; }
html:not(.viaggio) .binario { height: auto; }
html:not(.viaggio) .cartello { width: auto; color: var(--inchiostro); padding: 4px 0 4px 16px; }
html:not(.viaggio) .cartello p { color: var(--inchiostro-2); }
html:not(.viaggio) .tappa-curva { padding: clamp(64px, 10vw, 120px) 0; background: var(--carta-2); }
html:not(.viaggio) .colonne { grid-template-columns: 1fr; }
html:not(.viaggio) .usi { gap: 0; padding: 0; }
html:not(.viaggio) .uso { max-width: none; padding: 20px 0; border-top: 1px solid var(--linea); }
html:not(.viaggio) .curva-titolo .titolo { position: static; margin-bottom: 8px; }
html:not(.viaggio) .corsia { display: none; }
html:not(.viaggio) .tappa-arrivo { background: var(--fascia); padding: clamp(64px, 10vw, 120px) var(--margine); }
html:not(.viaggio) .tre-numero { margin-bottom: clamp(40px, 6vw, 72px); }
html:not(.viaggio) .stati { display: none; }
html:not(.viaggio) .mondo-fermo { display: block; width: 100%; height: auto; max-width: var(--largo); margin: 0 auto 24px;
  border-radius: var(--raggio); }
html:not(.viaggio) .tappa-strada .palco { padding-top: clamp(32px, 6vw, 64px); }
/* la busta aperta: il lembo si alza sopra la busta, e senza spazio coprirebbe il tasto WhatsApp */
html:not(.viaggio) .busta { margin-top: calc(min(360px, 90vw) * .42); }

/* ------------------------------------------------------------ ferma, ma non immobile: il telefono
   (designer, terzo giro: la cartolina ferma contro il reel che si muove). Senza il mondo la storia e' in HTML e in
   due foto (fotografa.py fermi): il tabellone e l'albergo restano fermi sullo schermo per un tratto (html.pista, la
   mette havenly.js) e lo scorrimento li porta avanti, come sul computer. Per chi chiede meno movimento, o senza
   script, ogni scena e' nel suo momento piu' chiaro: la caparra arrivata, l'albergo acceso */
/* il tabellone: le stesse camere del mondo, dieci giorni attorno alla richiesta */
.tabellone-fermo { display: none; }
html:not(.viaggio) .tabellone-fermo { display: block; max-width: 720px; margin: 0 auto 40px; }
.tt-griglia { --goccia: 39px; display: grid; overflow: hidden; grid-template-columns: 36px repeat(var(--giorni), 1fr); grid-template-rows: 26px repeat(var(--camere), 30px);
  align-items: center; padding: 8px 6px 10px 4px; border-radius: var(--raggio); background: var(--carta-chiara);
  box-shadow: 0 0 0 1px var(--linea), 0 18px 40px -24px rgb(22 27 38 / .35); font-size: 11px; line-height: 1; }
/* le righe dei giorni, sotto tutto */
.tt-griglia::before { content: ""; grid-area: 2 / 2 / -1 / -1; align-self: stretch; pointer-events: none;
  background: repeating-linear-gradient(to right, var(--linea-chiara) 0 1px, transparent 1px calc(100% / var(--giorni))); }
.tt-mese { font-weight: 600; padding-left: 6px; }
.tt-giorno { text-align: center; color: var(--inchiostro-3); font-variant-numeric: tabular-nums; }
.tt-camera { grid-column: 1; padding-left: 6px; color: var(--inchiostro-3); font-weight: 500; }
.tt-richiesta { color: var(--inchiostro); font-weight: 700; }
.tt-pren, .tt-opzione { height: 20px; margin: 0 1.5px; border-radius: 5px; }
.tt-pren { display: block; padding-left: 7px; overflow: hidden; white-space: nowrap; background: var(--fascia);
  color: var(--su-fascia-2); line-height: 20px; font-weight: 500; }
/* tagliata dal bordo: la prenotazione continua fuori */
.tt-prima { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tt-dopo { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* l'opzione: tratteggiata finche' non arriva la caparra, poi una prenotazione come le altre */
.tt-opzione { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 7px;
  border: 1.5px dashed var(--inchiostro-3); background: var(--carta-chiara); transform-origin: 0 50%;
  transition: scale .55s var(--curva), background-color .35s, border-color .35s; }
.tt-nome { flex: none; color: var(--su-fascia); font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .3s .5s; }
/* se la barra non basta (un telefono piu' stretto di 360) si accorcia la pillola, mai il nome (designer, 20 ottobre) */
.tt-stati { display: grid; min-width: 0; margin: 0 0 0 4px; padding: 0; list-style: none; }
.tt-stati li { grid-area: 1 / 1; justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 7px; border-radius: var(--pillola); font-size: 10px; white-space: nowrap; opacity: 0; transition: opacity .25s; }
/* il cartellino: la goccia di carta col cognome, come nel mondo; girato e' la chiave. --goccia (sulla griglia): quanto e' larga la goccia
   della chiave alta 22 px (in chiave-tabellone.webp la goccia e' 102 dei 210 px, alti 58) */
.tt-cartellino { position: relative; z-index: 1; align-self: stretch; margin-left: 1.5px; perspective: 500px;
  filter: drop-shadow(0 2px 3px rgb(22 27 38 / .28)); transition: opacity .35s, translate .35s var(--curva); }
.tt-fronte, .tt-retro { position: absolute; left: 0; top: 50%; translate: 0 -50%; backface-visibility: hidden;
  transition: transform .6s var(--curva); }
.tt-fronte { display: grid; align-items: center; width: 100%; height: 22px; padding: 0 14px 0 9px; background: #fff;
  color: var(--inchiostro); font-weight: 600; font-size: 11.5px; border-radius: 11px 2px 2px 11px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
/* max-width: none, se no la regola delle immagini la stringeva nel cartellino (schiacciata del 17%) */
.tt-retro { width: auto; max-width: none; height: 22px; transform: rotateY(180deg); }
/* le fasi (havenly.js le porta con lo scorrimento): 0 la riga vuota, 1 il cartellino, 2 l'opzione «In attesa», 3 «Da
   richiamare», 4 la caparra (blu, la chiave), 5 la chiave parte verso la strada e resta la prenotazione */
[data-fase="0"] .tt-cartellino { opacity: 0; translate: 0 -24px; }
:is([data-fase="0"], [data-fase="1"]) .tt-opzione { scale: 0 1; }
:is([data-fase="4"], [data-fase="5"]) .tt-opzione { background: var(--fascia); border-color: var(--fascia); }
/* partita la chiave la caparra resta scritta, come al computer (designer, quinto giro: la barra blu restava muta) */
[data-fase="2"] [data-stato-n="0"], [data-fase="3"] [data-stato-n="1"], :is([data-fase="4"], [data-fase="5"]) [data-stato-n="2"] { opacity: 1; }
:is([data-fase="4"], [data-fase="5"]) .tt-fronte { transform: rotateY(-180deg); }
:is([data-fase="4"], [data-fase="5"]) .tt-retro { transform: none; }
/* la caparra: della chiave resta la goccia sul 9 (col numero), poi il nome, poi la pillola: «Caparra arrivata… ma di
   chi?» (designer, 20 ottobre). Quando la chiave parte e' di nuovo intera, e il nome scivola al suo posto */
[data-fase="4"] .tt-cartellino { justify-self: start; width: var(--goccia); overflow: hidden; }
[data-fase="4"] .tt-opzione { padding-left: calc(var(--goccia) + 6px); }
[data-fase="5"] .tt-cartellino { translate: 80vw 0; opacity: 0; transition: translate .9s var(--curva), opacity .3s .45s; }
:is([data-fase="4"], [data-fase="5"]) .tt-nome { opacity: 1; }
/* lo spazio della goccia cambia di colpo; il nome ci scivola con translate (animare il padding rifaceva la riga a ogni
   fotogramma). Dalla 3 alla 4 il nome e' ancora spento: si vede solo tornando su dalla 5 */
[data-fase="4"] .tt-nome { animation: tt-nome-dentro .45s var(--curva); }
[data-fase="5"] .tt-nome { animation: tt-nome-fuori .45s var(--curva); }
@keyframes tt-nome-dentro { from { translate: calc(1px - var(--goccia)) 0; } }
@keyframes tt-nome-fuori { from { translate: calc(var(--goccia) - 1px) 0; } }
.tt-nota { margin-top: 10px; font-size: .8rem; color: var(--inchiostro-3); }
@media (prefers-reduced-motion: reduce) { .tabellone-fermo * { transition: none !important; animation: none !important; } }
/* la pista: il tabellone resta fermo sotto la barra mentre si scorre e sotto di lui passano i cartelli della strada,
   uno alla volta, come al computer la fascia sotto il tabellone (designer, 20 ottobre: a meta' schermo lasciava 140 px
   vuoti sopra e 250 sotto). Le fasi (data-fase, havenly.js) vanno con lo scorrimento del tratto in cui il tabellone
   sta fermo, e finiscono alla fine di quel tratto: subito dopo viene la curva con la sua chiave */
html.pista .pista-tabellone { --sfuma: 28px; }
html.pista .tabellone-fermo { position: sticky; top: calc(var(--sopra-barra) + var(--barra) + 12px); z-index: 1;
  margin-bottom: 0; padding-bottom: 8px; background: var(--carta); }
/* i cartelli escono sotto il tabellone sfumando, non tagliati di netto, e non si vedono fra lui e la barra */
html.pista .tabellone-fermo::before, html.pista .tabellone-fermo::after { content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none; }
html.pista .tabellone-fermo::before { bottom: 100%; height: 12px; background: var(--carta); }
html.pista .tabellone-fermo::after { top: 100%; height: var(--sfuma); background: linear-gradient(var(--carta), transparent); }
/* i cartelli si attaccano subito sotto il tabellone (dove finisce lo dice havenly.js) e il nuovo sale sopra il vecchio,
   che si scioglie nella sfumatura sopra il nuovo (quinto giro, designer e albergatore: fra il tabellone e il cartello
   restavano 265 px vuoti su 844, «si e' piantata?»). Le fasi vanno finche' il tabellone sta fermo (havenly.js), quindi
   il binario non ha bisogno di posto in piu': fra un cartello e l'altro 100 px, poi subito la curva */
html.pista .binario { max-width: 720px; margin: 0 auto; gap: 100px; padding: 28px 0 0; align-content: start; }
html.pista .cartello { position: sticky; top: calc(var(--sotto-tabellone, 0px) + var(--sfuma)); background: var(--carta); }
html.pista .cartello::before { content: ""; position: absolute; left: -2px; right: 0; bottom: 100%; height: 110px;
  background: linear-gradient(transparent, var(--carta) 85%); pointer-events: none; }
html.pista .tappa-strada .palco { padding-bottom: 24px; }
/* uno schermo basso (667): righe piu' strette, perche' sotto il tabellone resti posto per un cartello intero */
@media (max-height: 720px) { html.pista .tt-griglia { grid-template-rows: 24px repeat(var(--camere), 25px); } }

/* la strada della curva: arriva da destra, gira in giu' e scende lungo il margine dei casi fino all'albergo (sulla
   fascia blu dell'arrivo); la chiave ci scende sopra, ferma a meta' schermo (designer, terzo giro: la strada che
   saliva andava contro lo scorrimento) */
html:not(.viaggio) .tappa-curva { position: relative; }
/* in fondo, posto per la chiave intera: girata e' alta 110 e non occupa righe (il margine sotto e' -103), quindi scende
   ~140 px oltre i casi; senza, la fascia blu dell'albergo la tagliava a meta' (designer, 20 ottobre) */
html:not(.viaggio) .tappa-curva .curva-dentro { padding: 0 var(--margine) 96px calc(var(--margine) + 48px); }
html:not(.viaggio) .tappa-curva::before { content: ""; position: absolute; left: var(--margine); width: 28px;
  top: calc(clamp(64px, 10vw, 120px) + 96px); bottom: 0;
  background: repeating-linear-gradient(to bottom, #fff 0 12px, transparent 12px 22px) center / 2.5px 100% no-repeat, var(--fascia); }
html:not(.viaggio) .curva-titolo::before { content: ""; display: block; width: calc(100% + 48px); height: 100px; margin: 0 0 8px -48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100'%3E%3Cg fill='none'%3E%3Cpath d='M620 22H54C30 22 14 38 14 62V110' stroke='%2316254f' stroke-width='28'/%3E%3Cpath d='M620 22H54C30 22 14 38 14 62V110' stroke='%23fff' stroke-width='2.5' stroke-dasharray='12 10'/%3E%3C/g%3E%3C/svg%3E") 0 0 / auto 100px no-repeat; }
html:not(.viaggio) .tappa-curva .curva-dentro::before { content: ""; display: block; position: sticky; top: 56vh; z-index: 1;
  width: 110px; height: 33px; margin: 70px 0 -103px -89px; rotate: 90deg; pointer-events: none;
  background: url(foto/chiave.webp) center / contain no-repeat; transition: opacity .4s .3s; }
/* la pista: la chiave arriva sulla strada quando lascia il tabellone (fase 5), mai due chiavi insieme */
html.pista:has([data-tabellone]:not([data-fase="5"])) .tappa-curva .curva-dentro::before { opacity: 0; transition-delay: 0s; }

/* l'albergo la notte, da bordo a bordo: acceso (la foto accesa sopra la spenta) */
.albergo-fermo { position: relative; margin: 0; }
html:not(.viaggio) .tappa-arrivo { padding-inline: 0; }
html:not(.viaggio) .chiusa { padding: clamp(48px, 8vw, 96px) var(--margine) 0; }
html:not(.viaggio) .albergo-fermo .mondo-fermo { max-width: none; margin: 0; border-radius: 0; }
html:not(.viaggio) .albergo-acceso { position: absolute; inset: 0; }
/* sul telefono resta fermo sullo schermo: si accende la 214 e la luce si allarga a tutto l'albergo (la foto accesa
   scoperta da due cerchi: la chiave nella porta, --rk, e la 214, --r); poi il campo si richiude e la luce diventa il tasto, come sul
   computer (havenly.js). Il cielo della foto sfuma nella fascia */
html.pista .tappa-arrivo { height: 280svh; padding: 0; }
html.pista .tappa-arrivo .palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; }
/* l'albergo grande quanto lo schermo: i lati della foto sono cielo e alberi (l'albergo sta tra il 15% e l'89%) */
html.pista .albergo-fermo { width: 124%; margin-left: -13%; mask-image: linear-gradient(to bottom, transparent, #000 24%); }
html.pista .albergo-acceso { mask-image: radial-gradient(circle at var(--xchiave) var(--ychiave), #000 calc(var(--rk, 0%) - 3%), transparent var(--rk, 0%)),
  radial-gradient(circle at var(--x214) var(--y214), #000 calc(var(--r, 0%) - 4%), transparent var(--r, 0%)); }
html.pista .chiusa { padding: 0 var(--margine); }
/* al computer senza il mondo (niente WebGL, il mondo che non arriva, meno movimento) la foto e' quella del telefono, 800 px:
   larga quanto lo schermo e oltre veniva sgranata e alta quasi due schermi. Al piu' alta quanto lo schermo, coi lati
   sfumati nella fascia (quinto giro, prova 10408) */
@media (min-width: 900px) {
  html:not(.viaggio) .albergo-fermo { width: min(100%, 110svh); margin-inline: auto;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
  html.pista .albergo-fermo { width: min(124%, 110svh); margin-inline: auto; mask-composite: intersect;
    mask-image: linear-gradient(to bottom, transparent, #000 24%), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
}
/* la carta arriva come una cartolina posata sul tavolo, mentre entra nello schermo (girata,
   sporgerebbe dallo schermo: la tappa la taglia, senza diventare una scatola che scorre) */
html:not(.viaggio) .tappa-tre { overflow-x: clip; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.viaggio) .tappa-tre .carta { animation: cartolina linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes cartolina { from { transform: translateY(48px) rotate(-3deg) scale(.96); } }
@media (max-width: 960px) {
  .pannello-viaggio { min-height: 0; }
  .pannello-viaggio .apertura-lato { justify-items: start; }
}