/* =============================================================
   Parea Sons — i mondi, a piena pagina

   Quattro fotografie che occupano tutta la finestra e si scoprono
   una dopo l'altra, a tempo con lo scorrimento. La regola sta in
   SISTEMA.md §4quater: l'immagine non arriva, ESCE DALL'ORIZZONTE.

   Un filetto da 1px si apre dal centro fino ai due bordi — è il
   gesto unico del sito (§4) alla scala della finestra — e la
   fotografia esce da quella riga, sopra il mondo precedente, che
   non se ne va: viene coperto. Per questo fra due mondi non c'è
   mai un vuoto.

   Tutto in CSS scroll-driven animation, SENZA UN SOLO ASCOLTATORE
   DI SCROLL. È la stessa licenza del respiro delle schede, ed è
   anche il motivo per cui va a tempo davvero: l'avanzamento lo
   legge il compositore dalla posizione di scorrimento reale, quindi
   segue inerzia del trackpad, rimbalzo del telefono e scatti della
   rotellina senza un fotogramma di ritardo.
   ============================================================= */

.orizzonti {
  position: relative;
  z-index: 1;
  background: var(--inchiostro);
}

/* --- La pellicola e le quattro tacche ------------------------
   La pellicola è alta 500svh e il palco ci resta appeso per 400:
   100svh di scorrimento a mondo.

   Le tacche sono quattro segni ad altezza zero, uno ogni 100svh a
   partire da 100. Una tacca senza altezza ha un `cover` lungo
   esattamente quanto la finestra, e per quella messa a k×100svh il
   `cover` coincide al pixel con la fetta del mondo k: cover 0% è
   l'istante in cui il mondo k comincia, cover 100% quello in cui
   finisce. È il motivo per cui in tutto questo foglio non c'è un
   solo conto: ogni mondo parla della propria fetta in percentuale,
   e i quattro sono identici.

   Servono anche da fermata: `scroll-margin-top: 100svh` fa sì che
   un link alla tacca porti all'INIZIO della fetta e non alla fine,
   e la conta in basso a destra è fatta di quei quattro link.        */

.orizzonti__pellicola {
  position: relative;
  height: 500svh;
  timeline-scope: --mondo-1, --mondo-2, --mondo-3, --mondo-4;
}

.orizzonti__tacca {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  top: calc(var(--n) * 100svh);
  /* Il margine decide dove si arriva premendo la conta. A 100svh si
     arriverebbe all'INIZIO della fetta, dove il sipario di quel mondo
     è ancora chiuso: si chiede il terzo e si vede il secondo. A 55
     si arriva subito dopo il sipario (che finisce al 45%), con la
     fotografia aperta e il testo che sta per salire. */
  scroll-margin-top: 55svh;
  view-timeline-axis: block;
  pointer-events: none;
}

.orizzonti__tacca[data-n="1"] { --n: 1; view-timeline-name: --mondo-1; }
.orizzonti__tacca[data-n="2"] { --n: 2; view-timeline-name: --mondo-2; }
.orizzonti__tacca[data-n="3"] { --n: 3; view-timeline-name: --mondo-3; }
.orizzonti__tacca[data-n="4"] { --n: 4; view-timeline-name: --mondo-4; }

/* --- Il palco ------------------------------------------------
   Il fondo è inchiostro e non lino: se per un fotogramma si vedesse
   attraverso, un lampo di bianco fra due fotografie si nota, uno
   scuro no.                                                        */

.orizzonti__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--inchiostro);
}

/* --- Un mondo ------------------------------------------------
   Quattro pannelli impilati nella stessa cella. Chi viene dopo
   nell'HTML sta sopra, e comincia con la lastra chiusa sulla riga
   dell'orizzonte: si vede il primo, e basta.                       */

.orizzonte {
  position: absolute;
  inset: 0;
}

/* --- La lastra: la fotografia e il suo velo ------------------
   Il velo sta DENTRO la lastra, dopo l'immagine, perché deve
   essere ritagliato dallo stesso sipario: un velo fuori dal
   ritaglio coprirebbe il mondo precedente prima che il suo
   arrivi.                                                          */

.orizzonte__lastra {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.orizzonte__lastra img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il fuoco è di ogni fotografia, non del componente: su un
     telefono in verticale una 16:9 perde due terzi della larghezza
     e il soggetto va tenuto in campo a mano. I valori e il perché
     stanno in SISTEMA.md §4quater. */
  object-position: var(--fuoco, 50% 50%);
  transform-origin: var(--fuoco, 50% 50%);
}

/* Il velo. Non è un rettangolo scuro: è un angolo che sfuma, e
   arriva a niente prima di metà finestra — come il velo del segno
   di zoom (§4ter), che non ha contorno perché un contorno si
   staccherebbe dalla fotografia.

   Le due forze non sono scelte a occhio. Sopra un pixel bianco
   puro — il cielo di Monaco, lo scafo dello yacht — l'inchiostro
   al 62% darebbe 4,29:1 al testo in lino, sotto soglia; al 78% ne
   dà 6,9. La misura sta in §4quater.                               */
.orizzonte__velo {
  position: absolute;
  inset: 0;
  /* Le fermate della sfumatura sono in `rem` e NON in percentuale.
     Misurato: il blocco di testo è alto in pixel — non cambia se la
     finestra è alta 900 o 1200 — e con le percentuali su una finestra
     bassa il velo restava indietro. A 1440x900 i quattro occhielli
     davano 3,0-4,1:1, sotto soglia, proprio perché lì il testo
     occupava il 48% dell'altezza invece del 35%.

     --velo-alto alza tutta la sfumatura senza cambiarne la forma. È
     una misura del singolo pannello, come --fuoco: un mondo con una
     frase in più ha il testo che arriva più su, e il velo deve
     arrivarci con lui invece di far pagare a tutti e quattro la
     fotografia coperta. */
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--inchiostro) 80%, transparent) 0,
      color-mix(in srgb, var(--inchiostro) 72%, transparent) calc(24rem * var(--velo-alto, 1)),
      color-mix(in srgb, var(--inchiostro) 28%, transparent) calc(34rem * var(--velo-alto, 1)),
      transparent calc(42rem * var(--velo-alto, 1))),
    linear-gradient(to right,
      color-mix(in srgb, var(--inchiostro) 46%, transparent) 0%,
      color-mix(in srgb, var(--inchiostro) 18%, transparent) 28%,
      transparent 52%);
}

/* Il mondo che ha anche una frase — oggi Equestrian, che non avendo
   una pagina dove andare la racconta qui — ha il testo che arriva
   116px più su degli altri tre. Misurato: la cima del suo blocco sta
   a 476px dal fondo contro i 360 degli altri, e il velo si ferma a
   384. Una volta e un terzo lo porta a 499.

   Il selettore guarda il CONTENUTO e non la posizione: è la frase a
   chiedere il velo, non l'essere l'ultimo pannello. */
.orizzonte:has(.orizzonte__frase) { --velo-alto: 1.3; }

/* --- Il gallone che diventa fotografia -----------------------
   Non è una riga bianca: è il **gallone**, lo stesso segno che chiude
   la fascia degli annunci in cima al sito (`.annunci::after`). Oro
   sopra, rosso sotto, due pixel di lino in mezzo — i due metalli
   dello stemma, la corona e il campo dello scudo. Quattro pixel in
   tutto, centrati sull'orizzonte, ed è da lì che esce la fotografia.

   In cima al sito quei due pixel di mezzo sono il lino della fascia
   che si vede attraverso il vuoto. Qui il vuoto non c'è — sotto c'è
   una fotografia — quindi vanno dipinti, e sono DUE: un lino e un
   inchiostro, la luce e l'ombra del gallone. Non è un ornamento, è
   la condizione perché il segno esista.

   Misurato, e il conto e la misura coincidono al centesimo.
   Luminanze: oro 0,213 · lino 0,948 · inchiostro 0,012 ·
   rosso 0,091. Con le sole tre bande dello stemma resta scoperta
   una finestra di luminanza — il lino copre fino a 0,283, il rosso
   riprende da 0,373 — e in mezzo, sui grigi medi intorno a
   rgb(145,145,145), il meglio che si ottiene è **2,66:1**. L'erba
   del campo pratica e i palazzi di Monaco ci cadevano dentro.

   Il filo d'inchiostro copre da 0,136 in su e si sovrappone al
   lino: il buco sparisce e il minimo garantito diventa **4,01:1**,
   sopra la soglia di 3 di §2 per un segno. Misurato su tutta la
   larghezza dell'orizzonte, sulle tre fotografie che stanno sotto
   un gallone: 4,03 · 4,01 · 4,03.

   Il contenitore non si trasforma: si trasformano le quattro bande,
   ciascuna con la sua, tutte con lo stesso tempo. Se scalasse anche
   lui, le bande dentro sarebbero il prodotto delle due scale.        */

/* Otto pixel e non quattro. In cima al sito il gallone è alto 4 su
   una fascia di 40: un decimo, e si legge. Qui la «fascia» è la
   finestra intera, e quattro pixel su novecento tornavano a essere
   una riga sola di colore indistinto — cioè esattamente la riga
   bianca che questo doveva sostituire. Due pixel per banda sono
   ancora meno di un centesimo dell'altezza: è lo stesso segno, alla
   scala del gesto. */
.orizzonte__filo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
}

.orizzonte__filo::before,
.orizzonte__filo::after,
.orizzonte__filo i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: center;
}

.orizzonte__filo::before       { top: 0;    height: 2px; background: var(--oro); }
.orizzonte__filo i:first-child { top: 2px;  height: 2px; background: var(--bianco-lino); }
.orizzonte__filo i:last-child  { top: 4px;  height: 2px; background: var(--inchiostro); }
.orizzonte__filo::after        { bottom: 0; height: 2px; background: var(--rosso); }

/* --- Il testo ------------------------------------------------
   Occhiello, nome, claim e il cartellino. Le frasi lunghe e i
   destinatari non stanno qui: stanno già dentro nautica.html,
   heritage.html e golf.html, che è dove porta il bottone.          */

.orizzonte__testo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-96);
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
  display: grid;
  justify-items: start;
  gap: var(--s-24);
}

/* La maschera. Il nome e il claim salgono da sotto la riga invece
   di sfumare: sfumare è un effetto qualunque, salire da sotto una
   riga è un gesto che quella riga la usa.

   Il padding-bottom con il margine negativo uguale è obbligatorio,
   come nei titoli del listino: senza, l'overflow taglia la
   discendente della «g» di «Golfing Excellence».

   Il cartellino resta fuori: ha già il suo overflow, che gli serve
   per i due filetti, e una maschera in più glieli taglierebbe. */
.orizzonte__testo > *:not(.bottone) {
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.orizzonte__testo > *:not(.bottone) > span { display: block; }

/* Sopra una fotografia il rosso non si legge: sul velo darebbe
   1,03:1, cioè niente. L'occhiello qui è lino al 78%, che sullo
   stesso fondo ne dà 5,4. */
.orizzonte .occhiello {
  color: color-mix(in srgb, var(--bianco-lino) 78%, transparent);
}

.orizzonte__nome {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--t-32), 5.2vw, var(--t-72));
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--bianco-lino);
  text-wrap: balance;
  /* 20ch e non 14: a tutta misura i quattro nomi ci stanno in una
     riga sola, e una riga in meno è 75px di testo in meno da
     coprire col velo — cioè fotografia guadagnata. */
  max-width: 20ch;
}

.orizzonte__claim {
  font-family: var(--font-testo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(var(--t-20), 2.2vw, var(--t-32));
  line-height: 1.25;
  color: color-mix(in srgb, var(--bianco-lino) 88%, transparent);
  max-width: 28ch;
}

/* Equestrian non ha una pagina dove andare: al posto del bottone
   tiene la sua frase e il segno d'attesa. */
.orizzonte__frase {
  font-size: var(--t-20);
  line-height: 1.5;
  color: color-mix(in srgb, var(--bianco-lino) 82%, transparent);
  max-width: 46ch;
}

.orizzonte .attesa {
  border-top-color: color-mix(in srgb, var(--bianco-lino) 34%, transparent);
  color: color-mix(in srgb, var(--bianco-lino) 78%, transparent);
  width: auto;
  min-width: 22ch;
}

/* Il cartellino non ha bisogno del velo: la tela rossa è piena, e
   il lino sopra il rosso dà 7,7:1 su qualunque fotografia. È
   l'unica forma di bottone che tenga il contrasto qui sopra, ed è
   il motivo per cui non se ne usa un'altra (§3). */
.orizzonte__testo .bottone { margin-top: var(--s-8); }

/* --- La conta ------------------------------------------------
   L'orizzonte in miniatura: quattro filetti in fila, e quello del
   mondo che si sta guardando è acceso e più lungo. Sono anche
   quattro fermate — portano alla tacca, che grazie al suo
   scroll-margin apre la fetta invece di chiuderla.                 */

.orizzonti__conta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-32);
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-16);
}

.conta__voce {
  display: block;
  width: 32px;
  padding-block: var(--s-16);
}

.conta__voce i {
  display: block;
  height: 1px;
  background: color-mix(in srgb, var(--bianco-lino) 34%, transparent);
  transform-origin: left;
}

.conta__voce:hover i,
.conta__voce:focus-visible i {
  background: color-mix(in srgb, var(--bianco-lino) 70%, transparent);
}

/* Il segno acceso è un secondo filetto che si stende sopra il
   primo: il colore non cambia, si accende una lunghezza. */
.conta__voce i::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--bianco-lino);
  transform: scaleX(0);
  transform-origin: left;
}

/* =============================================================
   Il film

   Da qui in giù tutto è legato allo scorrimento e a nient'altro.
   Ogni mondo parla in percentuale della PROPRIA fetta, e i quattro
   dicono gli stessi numeri: la differenza è solo su quale delle
   quattro tacche guardano.

     filetto   0 → 16%     si apre dal centro, poi si consuma
     sipario   8 → 45%     la fotografia esce dalla riga
     respiro   0 → 100%    scala 1,12 → 1, per tutta la traversata
     testo    30 → 52%     sale dentro la maschera, a scaglioni
              92 → 100%    torna giù dietro l'orizzonte

   Il testo se ne va prima che il filetto dopo si apra, ed è
   voluto: la riga che spacca l'orizzonte si vede meglio su una
   fotografia pulita che sopra delle parole.
   ============================================================= */

@supports (animation-timeline: view()) and (timeline-scope: --a) {

  .orizzonte[data-mondo="1"] { --tacca: --mondo-1; }
  .orizzonte[data-mondo="2"] { --tacca: --mondo-2; }
  .orizzonte[data-mondo="3"] { --tacca: --mondo-3; }
  .orizzonte[data-mondo="4"] { --tacca: --mondo-4; }

  /* --- Il gallone ----------------------------------------------
     Le quattro bande si aprono dal centro **insieme**, nello stesso
     tempo: 21 punti della fetta per andare dal centro ai due bordi.
     Un gallone è un segno solo, cucito in un colpo — non quattro
     fili che si rincorrono. Erano scaglionate (oro 14, rosso 17,
     luce e ombra 21) e le tre corse distinte si vedevano: la riga
     non arrivava mai, arrivava tre volte.

     Poi il gallone **resta disteso un momento e se ne va**: tocca i
     due bordi al 21%, tiene fino al 28, è spento al 34. Sette punti
     di posa e sei di spegnimento, cioè un centotrenta pixel di
     scorrimento su una finestra da mille.

     I due estremi sono stati provati tutti e due ed erano tutti e
     due sbagliati. Prima teneva fino al 26 e si spegneva al 50: in
     quei trenta punti non faceva più niente, il segno aveva già
     spaccato l'orizzonte e restava steso sulla fotografia che si
     apriva. Poi si spegneva subito al 26, e la riga non si vedeva
     mai ferma — arrivava e spariva nello stesso gesto. La posa serve
     a farla leggere come un segno e non come un lampo.

     L'opacità sta sul contenitore e non sulle bande: arrivano
     insieme e se ne vanno insieme, con un valore solo da leggere.   */

  @keyframes orizzonte-apre {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes orizzonte-gallone {
    0%, 82% { opacity: 1; }   /* l'82% di 34 è il 28 */
    100%    { opacity: 0; }
  }

  .orizzonte__filo::before,
  .orizzonte__filo::after,
  .orizzonte__filo i {
    animation: orizzonte-apre linear both;
    animation-timeline: var(--tacca);
  }

  .orizzonte__filo::before,
  .orizzonte__filo::after,
  .orizzonte__filo i { animation-range: cover 0% cover 21%; }

  .orizzonte__filo {
    animation: orizzonte-gallone linear both;
    animation-timeline: var(--tacca);
    animation-range: cover 0% cover 34%;
  }

  /* --- Il sipario --------------------------------------------- */

  @keyframes orizzonte-sipario {
    from { clip-path: inset(50% 0 50% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  .orizzonte__lastra {
    animation: orizzonte-sipario linear both;
    animation-timeline: var(--tacca);
    animation-range: cover 8% cover 45%;
  }

  /* --- Il velo -------------------------------------------------
     Il velo non c'è mentre il sipario si apre: arriva col testo e se
     ne va con lui. Serve a leggere delle parole, e finché parole non
     ce ne sono è solo una fotografia scurita — nella rivelazione,
     che è il momento della sezione, si vedeva aprirsi una banda
     buia invece del capo. Parte prima del testo (18-36% contro
     30-52%) perché quando la prima riga sale il contrasto dev'essere
     già quello misurato. */

  /* Se ne va DOPO il testo (92% contro 88%): mentre le parole
     scendono il velo è ancora pieno, e il contrasto misurato vale
     fino all'ultimo fotogramma in cui si leggono. */
  @keyframes orizzonte-velo {
    0%, 18%  { opacity: 0; }
    36%, 92% { opacity: 1; }
    100%     { opacity: 0; }
  }

  @keyframes orizzonte-velo-ultimo {
    0%, 18%   { opacity: 0; }
    36%, 100% { opacity: 1; }
  }

  .orizzonte__velo {
    animation: orizzonte-velo linear both;
    animation-timeline: var(--tacca);
    animation-range: cover 0% cover 100%;
  }

  .orizzonte:last-of-type .orizzonte__velo {
    animation-name: orizzonte-velo-ultimo;
  }

  /* --- Il respiro ---------------------------------------------
     Come nel listino e nella scheda: la fotografia si assesta
     mentre la si attraversa. Qui l'escursione è più larga — 12%
     invece di 8 — perché la traversata è lunga una schermata
     intera invece di una lastra. */

  @keyframes orizzonte-respiro {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
  }

  .orizzonte__lastra img {
    animation: orizzonte-respiro linear both;
    animation-timeline: var(--tacca);
    animation-range: cover 0% cover 100%;
  }

  /* --- Il testo -----------------------------------------------
     Lo scaglionamento non è un ritardo — con una linea del tempo
     legata allo scorrimento `animation-delay` non esiste — è un
     inizio spostato più avanti nella fetta, un punto per riga. */

  /* `100% + .2em` e non una percentuale sola: sotto la parola c'è
     il padding delle discendenti, che è .14em, e una percentuale di
     un'altezza che cambia con la riga non lo copre sempre. Così la
     punta della «g» non resta mai in vista, a qualunque corpo. */
  @keyframes orizzonte-testo {
    0%   { transform: translateY(calc(100% + .2em)); opacity: 0; }
    26%  { transform: translateY(0);                 opacity: 1; }
    88%  { transform: translateY(0);                 opacity: 1; }
    100% { transform: translateY(60%);               opacity: 0; }
  }

  .orizzonte__testo > *:not(.bottone) > span,
  .orizzonte__testo > .bottone {
    animation: orizzonte-testo linear both;
    animation-timeline: var(--tacca);
    animation-range:
      cover calc((30 + var(--i, 0) * 2) * 1%)
      cover 100%;
  }

  .orizzonte__testo > *:nth-child(1) { --i: 0; }
  .orizzonte__testo > *:nth-child(2) { --i: 1; }
  .orizzonte__testo > *:nth-child(3) { --i: 2; }
  .orizzonte__testo > *:nth-child(4) { --i: 3; }

  /* L'ultimo mondo non ha niente che gli venga sopra: il suo testo
     non torna giù, se ne va con la pellicola. */
  @keyframes orizzonte-testo-ultimo {
    0%   { transform: translateY(calc(100% + .2em)); opacity: 0; }
    26%  { transform: translateY(0);                 opacity: 1; }
    100% { transform: translateY(0);                 opacity: 1; }
  }

  .orizzonte:last-of-type .orizzonte__testo > *:not(.bottone) > span,
  .orizzonte:last-of-type .orizzonte__testo > .bottone {
    animation-name: orizzonte-testo-ultimo;
  }

  /* --- Il primo mondo -----------------------------------------
     Non ha sipario e non ha filetto: arriva scorrendo come
     qualunque immagine a piena larghezza, si ferma, e solo allora
     l'orizzonte si spacca. La sorpresa serve dopo che l'occhio si
     è posato — aprirla su una schermata ancora vuota la
     sprecherebbe. */

  .orizzonte:first-of-type .orizzonte__lastra {
    animation-name: none;
    clip-path: none;
  }

  /* --- La conta ----------------------------------------------- */

  @keyframes conta-accesa {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .conta__voce i::after {
    animation: conta-accesa linear both;
    animation-timeline: var(--tacca);
    animation-range: cover 0% cover 12%;
  }

  .conta__voce[data-n="1"] { --tacca: --mondo-1; }
  .conta__voce[data-n="2"] { --tacca: --mondo-2; }
  .conta__voce[data-n="3"] { --tacca: --mondo-3; }
  .conta__voce[data-n="4"] { --tacca: --mondo-4; }
}

/* --- Larghezze minori ---------------------------------------- */

@media (max-width: 900px) {
  .orizzonte__testo {
    bottom: var(--s-64);
    gap: var(--s-16);
  }
  .orizzonte__nome { max-width: 14ch; }
  .orizzonte__claim { max-width: 24ch; }
  .orizzonte__frase { max-width: none; }
  .orizzonte__testo .bottone { width: 100%; }
}

@media (max-width: 640px) {
  /* Il velo va rinforzato: a colonna sola il testo sale, e la
     sfumatura da sinistra non aiuta più — resta solo quella dal
     basso a garantire il contrasto, e deve farlo da sola.

     22rem e non 17: a 375px il claim di Heritage Sailing va a tre
     righe e la cima del blocco arriva a 349px, oltre la vecchia
     fermata di 272. Il suo occhiello dava 4,47:1. */
  .orizzonte__velo {
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--inchiostro) 82%, transparent) 0,
        color-mix(in srgb, var(--inchiostro) 74%, transparent) calc(22rem * var(--velo-alto, 1)),
        color-mix(in srgb, var(--inchiostro) 34%, transparent) calc(30rem * var(--velo-alto, 1)),
        transparent calc(38rem * var(--velo-alto, 1)));
  }

  .orizzonti__conta { justify-content: flex-start; }
}

/* --- Il ripiego ----------------------------------------------
   Senza scroll-driven animation, o con il movimento ridotto, si
   arriva nello stesso posto: quattro fotografie a piena finestra
   una sotto l'altra. Si perde la rivelazione, non si perde niente
   altro — è la regola 1 di §4, una comparsa che non parte non
   deve mai lasciare il contenuto invisibile.                      */

@supports not ((animation-timeline: view()) and (timeline-scope: --a)) {
  .orizzonti__pellicola { height: auto; }
  .orizzonti__tacca { display: none; }
  .orizzonti__palco {
    position: static;
    height: auto;
    display: grid;
  }
  .orizzonte {
    position: relative;
    inset: auto;
    height: 100svh;
  }
  /* Detto per esteso anche se qui il blocco del film non è mai
     entrato: il giorno in cui una di quelle regole finisse fuori dal
     suo @supports, il ripiego mostrerebbe tre lastre chiuse su una
     riga sola invece di tre fotografie. */
  .orizzonte__lastra { clip-path: none; }
  .orizzonte__velo { opacity: 1; }
  .orizzonte__filo { display: none; }
  .orizzonti__conta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orizzonti__pellicola { height: auto; }
  .orizzonti__tacca { display: none; }
  .orizzonti__palco {
    position: static;
    height: auto;
    display: grid;
  }
  .orizzonte {
    position: relative;
    inset: auto;
    height: 100svh;
  }
  .orizzonte__filo { display: none; }
  .orizzonti__conta { display: none; }
  .orizzonte__lastra,
  .orizzonte__lastra img,
  .orizzonte__velo,
  .orizzonte__testo > *:not(.bottone) > span,
  .orizzonte__testo > .bottone,
  .conta__voce i::after { animation: none; }
  .orizzonte__velo { opacity: 1; }
  .orizzonte__lastra { clip-path: none; }
  .orizzonte__lastra img { transform: none; }
  .orizzonte__testo > *:not(.bottone) > span,
  .orizzonte__testo > .bottone { transform: none; opacity: 1; }
}

/* L'introduzione della pagina «Mondi» non ha bisogno di niente di
   nuovo: è il .blocco delle pagine di collezione, che quella pagina
   carica già. Di css/mondi.css non resta nulla — l'orizzonte a
   schede, il segno che scivola e le bande di lino tessuto al posto
   delle fotografie non servono più: adesso le fotografie ci sono. */