/* Cromatico — foglio di stile */

/* ==========================================================================
   CROMATICO — sistema visivo
   --------------------------------------------------------------------------
   TESI
   Il nome promette colore, e la sala di sera lo toglie a tutto: antracite,
   vetro, acciaio, il buio fra un tavolo e l'altro. Ne resta uno solo — la
   brace, il caldo della luce che cade sul piatto — e proprio perche' in
   tutta la pagina compare cinque volte, quando compare si ricorda.
   Il contrario della trattoria: essenziale, di sera, di citta'.

   CONSEGUENZE
   · Tutta la pagina e' acromatica. Grigi con dentro il blu della sala,
     mai grigi puri, mai un secondo accento.
   · L'arancio compare in cinque punti e basta: il pulsante di chiamata,
     l'arco di luce sul piatto in apertura, l'anello di focus, il filo che
     separa le sezioni, due parole nel titolo di chiusura.
   · I segnaposto [DA CONFERMARE] NON sono in arancio. Sono in fumo con un
     tratteggio sotto: se prendessero l'accento, l'accento sarebbe ovunque.
   · Raggio zero su tutto. Nessuna superficie arrotondata, nessun caso di
     raggi concentrici da risolvere. La geometria e' quella della sala:
     rettangoli, fili, un piano.
   · Nessuna ombra. In una stanza scura l'ombra non si vede: la profondita'
     la fa la luminosita' della superficie, non un alone grigio.

   SUPERFICI     Sala    #121417   fondo, la stanza
                 Tavolo  #191c21   pannelli e blocchi
                 Rilievo #22262c   righe alternate, righello della carta

   TESTO         Luce    #f4f3f0   titoli e testo forte
                 Fumo    #b4bac2   corpo secondario
                 Cenere  #969da6   etichette mono, dati minori

   AZIONE        Brace       #ff6a1f   un solo scopo: chiamare
                 Brace alto  #ff8340   solo :hover del pulsante pieno
                 ATTENZIONE: sul pieno arancio il testo e' SALA (scuro).
                 Bianco su arancio fa 2,58:1 — non si usa mai.

   BORDI         Filo     rgba(244,243,240,.13)  struttura, decorativo
                 Filo forte rgba(244,243,240,.38) bordo dei controlli

   CONTRASTI MISURATI (WCAG 2.1, calcolati, non stimati)
     luce   su sala 16,63:1 · su tavolo 15,39:1 · su rilievo 13,70:1
     fumo   su sala  9,44:1 · su tavolo  8,74:1 · su rilievo  7,78:1
     cenere su sala  6,74:1 · su tavolo  6,24:1 · su rilievo  5,55:1
     brace  su sala  6,44:1 · su tavolo  5,97:1 · su rilievo  5,31:1
     sala su brace (testo del pulsante pieno)            6,44:1
     sala su brace-alto (:hover del pulsante)            7,53:1
     filo forte su sala 3,35:1 · tavolo 3,34:1 · rilievo 3,24:1  (>=3:1)
     anello di focus (brace) contro tutti e tre i fondi  >=5,31:1
     Sotto l'alone caldo dell'apertura (brace all'8% sopra sala, cioe'
     #251b18) il fondo si schiarisce: luce 15,16:1 · fumo 8,60:1 ·
     cenere 6,14:1 · brace 5,87:1. Nessuna coppia scende sotto 4,5:1.

   CARATTERI     Titoli  Franklin Gothic / Segoe UI  (sans sopra)
                 Corpo   Cambria                     (serif sotto)
                 Dati    Consolas                    (numeri e etichette)
                 L'inversione e' voluta: il titolo e' un'insegna, il testo
                 e' una carta stampata.

   SCALA         12 · 14 · 17 · 20 · 26 · 34 · 48 · 72
   RITMO         base 4px · dentro un gruppo 8-16px · fra gruppi 32-128px
   TELAIO        1120px
   ========================================================================== */

:root{
  /* — Superfici: tre piani, nessun quarto — */
  --sala:    #121417;
  --tavolo:  #191c21;
  --rilievo: #22262c;

  /* — Testo — */
  --luce:   #f4f3f0;
  --fumo:   #b4bac2;
  --cenere: #969da6;

  /* — L'unico colore della pagina — */
  --brace:      #ff6a1f;
  --brace-alto: #ff8340;

  /* — Fili — */
  --filo:       rgba(244,243,240,.13);
  --filo-fioco: rgba(244,243,240,.07);
  --filo-forte: rgba(244,243,240,.38);

  /* — Caratteri: sans sopra, serif sotto — */
  --titolo: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic",
            "Segoe UI", system-ui, sans-serif;
  --corpo:  Cambria, "Palatino Linotype", Constantia, Georgia, ui-serif, serif;
  --dato:   Consolas, ui-monospace, "Courier New", monospace;

  /* — Scala — */
  --t12:12px; --t14:14px; --t17:17px; --t20:20px;
  --t26:26px; --t34:34px; --t48:48px; --t72:72px;

  /* — Ritmo, base 4 — */
  --s4:4px;   --s8:8px;   --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s48:48px; --s64:64px; --s96:96px; --s128:128px;

  --telaio:1120px;

  /* — Curve: quelle forti, non quelle di serie.
       ease-in non compare in nessun punto di questo file. — */
  --uscita:  cubic-bezier(0.23, 1, 0.32, 1);
  --sposta:  cubic-bezier(0.77, 0, 0.175, 1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sala);
  color:var(--luce);
  font-family:var(--corpo);
  font-size:var(--t17);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
svg{display:block}

/* I titoli sono un'insegna: sans stretto, tracking negativo, riga corta. */
h1,h2,h3,.insegna{
  font-family:var(--titolo);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
p{text-wrap:pretty}

/* Anello di focus: arancio, 2px, staccato. Misurato contro tutti e tre
   i fondi (>=5,31:1) e contro il pieno arancio (dove diventa luce). */
:focus-visible{outline:2px solid var(--brace);outline-offset:3px}
.pieno:focus-visible{outline-color:var(--luce)}

/* ---------- Impalcatura ---------- */
.telaio{width:100%;max-width:var(--telaio);margin-inline:auto;padding-inline:var(--s24)}
.pagina{display:flex;flex-direction:column;gap:var(--s128);padding-block:var(--s96)}
.sezione{display:flex;flex-direction:column;gap:var(--s48)}

/* ---------- Etichetta: mono, minuscola, spaziata ---------- */
.etichetta{
  font-family:var(--dato);
  font-size:var(--t12);
  font-weight:400;
  line-height:1;
  letter-spacing:0.18em;   /* maiuscoletto piccolo: tracking positivo */
  text-transform:uppercase;
  color:var(--cenere);
}

/* ---------- Segnaposto ----------
   Il motivo per cui il titolare risponde. Riconoscibile senza il colore:
   parentesi quadre nel testo + mono + tratteggio sotto. Mai in arancio. */
.forse{
  font-family:var(--dato);
  font-size:0.82em;
  letter-spacing:0.08em;
  color:var(--fumo);
  border-bottom:1px dotted var(--filo-forte);
  padding-bottom:1px;
  white-space:nowrap;
}
.forse--lungo{white-space:normal}

/* ---------- Controlli ----------
   Un solo pulsante pieno per schermata: quello che chiama.
   Il secondo e' un filo, il terzo non e' un pulsante ma testo con freccia. */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:44px;                       /* obiettivo tocco 44x44 */
  padding:12px var(--s24);
  border:1px solid transparent;border-radius:0;
  font-family:var(--titolo);font-size:var(--t14);font-weight:600;
  letter-spacing:0.04em;line-height:1;text-decoration:none;
  background:none;cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease,
             border-color 160ms ease,transform 140ms var(--uscita);
}
.pieno{background:var(--brace);color:var(--sala)}
.filo-b{border-color:var(--filo-forte);color:var(--luce)}
.bottone:active{transform:scale(0.96)}

/* Il movimento su :hover vive solo qui dentro. */
@media (hover: hover) and (pointer: fine){
  .pieno:hover{background:var(--brace-alto);transform:translateY(-1px)}
  .filo-b:hover{border-color:var(--luce)}
  .fantasma:hover{color:var(--luce)}
  .fantasma:hover::after{transform:translateX(6px)}
  .riga-link:hover{border-bottom-color:var(--brace)}

  .voce,.portata,.recapito{transition:transform 160ms var(--uscita)}
  .voce:hover,.recapito:hover{transform:translateY(-3px)}
  .portata:hover{transform:translateX(3px)}
  .orari li{transition:transform 140ms var(--uscita)}
  .orari li:hover{transform:translateX(3px)}
}
/* Senza puntatore fine (telefono) il pulsante cambia comunque stato al tocco,
   e il cambiamento non e' solo movimento: cambia anche il colore di fondo. */
.pieno:active{background:var(--brace-alto)}

.fantasma{
  display:inline-flex;align-items:center;gap:var(--s8);
  min-height:44px;
  font-family:var(--titolo);font-size:var(--t14);font-weight:600;
  letter-spacing:0.04em;color:var(--fumo);text-decoration:none;
  transition:color 160ms ease;
}
.fantasma::after{
  content:"\2192";display:inline-block;
  transition:transform 200ms var(--uscita);
}

/* Link dentro la prosa: sottolineatura vera, non un colore soltanto. */
.riga-link{
  color:var(--luce);text-decoration:none;
  border-bottom:1px solid var(--filo-forte);padding-bottom:1px;
  transition:border-color 160ms ease;
}

/* ---------- Il filo: l'unico gradiente della pagina ----------
   Un capello che si scalda al centro e torna al buio ai bordi: la luce
   che attraversa la sala. Interpolato in oklab per non passare dal grigio. */
.filo-luce{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,rgba(255,106,31,0) 0%,rgba(255,106,31,.55) 50%,rgba(255,106,31,0) 100%);
  background:linear-gradient(90deg in oklab,rgba(255,106,31,0) 0%,rgba(255,106,31,.55) 50%,rgba(255,106,31,0) 100%);
}

/* ---------- Navigazione ----------
   A filo, senza barra e senza fondo: in apertura non c'e' un secondo piano.
   Qui il numero e' un link di testo, non un pulsante: il pulsante pieno
   della prima schermata deve essere uno solo, ed e' quello dell'apertura. */
.nav{position:absolute;inset:0 0 auto 0;z-index:3;padding-block:var(--s32)}
.nav__dentro{display:flex;align-items:center;justify-content:space-between;gap:var(--s24)}
.marchio{
  font-family:var(--titolo);font-size:var(--t20);font-weight:600;
  letter-spacing:0.02em;text-transform:uppercase;color:var(--luce);text-decoration:none;
}
.nav__voci{display:flex;align-items:center;gap:var(--s32);
  font-family:var(--titolo);font-size:var(--t14);letter-spacing:0.02em}
.nav__voci a{color:var(--fumo);text-decoration:none;transition:color 160ms ease}
@media (hover: hover) and (pointer: fine){.nav__voci a:hover{color:var(--luce)}}

/* Il numero in barra: stessa griglia mono dei dati, non un pulsante.
   Il filo sotto lo dichiara link senza dargli un fondo pieno. */
.nav__tel{
  font-family:var(--dato);font-size:var(--t14);letter-spacing:0.06em;
  color:var(--luce);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--filo-forte);padding-bottom:2px;
  transition:border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine){.nav__tel:hover{border-bottom-color:var(--brace)}}

/* ---------- Apertura ----------
   Una sola sorgente di luce, in alto a destra. Tutto il resto e' la stanza. */
.apertura{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.apertura::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 76% 8%,rgba(255,106,31,.08) 0%,rgba(18,20,23,0) 72%);
  background:radial-gradient(58% 46% at 76% 8% in oklab,rgba(255,106,31,.08) 0%,rgba(18,20,23,0) 72%);
}
.apertura__griglia{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  align-items:center;gap:var(--s48);padding-block:var(--s128) var(--s96);
}
@media (min-width:940px){
  .apertura__griglia{grid-template-columns:1.05fr .95fr;gap:var(--s64)}
}
.apertura__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24)}
.apertura h1{
  font-size:clamp(52px,13vw,var(--t72));
  letter-spacing:-0.03em;text-transform:uppercase;margin:0;
}
.apertura__occhiello{font-size:var(--t20);font-family:var(--corpo);color:var(--luce);
  line-height:1.4;max-width:22ch}
.apertura__corpo{font-size:var(--t17);color:var(--fumo);max-width:46ch}
.apertura__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16);padding-top:var(--s8)}
/* 16px fra due controlli con bordo: sopra il minimo di 12px richiesto. */

/* Riga dei dati in apertura: mono, tabellare, separata da fili verticali. */
.dati{display:flex;flex-wrap:wrap;gap:var(--s12) var(--s24);
  padding-top:var(--s24);border-top:1px solid var(--filo-fioco);
  width:100%;max-width:34rem}
.dati span{font-family:var(--dato);font-size:var(--t12);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--cenere);font-variant-numeric:tabular-nums}

/* Il disegno: un cono di luce e un piatto. Nessuna foto, nessuna emoji. */
.piatto{width:100%;height:auto;max-width:460px;margin-inline:auto}

/* ---------- Testata di sezione ---------- */
.testata{display:flex;flex-direction:column;gap:var(--s16);max-width:640px}
.testata h2{font-size:clamp(28px,5.2vw,var(--t48))}
.testata p{color:var(--fumo);max-width:62ch}

/* ---------- Blocchi «cosa si trova qui» ----------
   Non schede: quattro colonne separate da un filo verticale, come le voci
   di un pannello. Niente ombre, niente rettangoli galleggianti. */
.quattro{display:grid;grid-template-columns:1fr;gap:var(--s32)}
@media (min-width:720px){.quattro{grid-template-columns:1fr 1fr;gap:var(--s48)}}
@media (min-width:1000px){.quattro{grid-template-columns:repeat(4,1fr);gap:var(--s32)}}
.voce{display:flex;flex-direction:column;gap:var(--s8);
  padding-left:var(--s16);border-left:1px solid var(--filo)}
.voce h3{font-size:var(--t20);font-weight:600}
.voce p{font-size:var(--t17);color:var(--fumo);line-height:1.5}
.voce__num{font-family:var(--dato);font-size:var(--t12);letter-spacing:0.16em;
  color:var(--cenere);font-variant-numeric:tabular-nums}

/* ---------- Il pannello (la sala) ---------- */
.pannello{background:var(--tavolo);padding:var(--s48) var(--s32)}
@media (min-width:820px){.pannello{padding:var(--s64)}}
.doppia{display:grid;grid-template-columns:1fr;gap:var(--s32);align-items:start}
@media (min-width:900px){.doppia{grid-template-columns:1fr 1fr;gap:var(--s64)}}
.doppia p{color:var(--fumo);max-width:60ch}
.doppia p + p{margin-top:var(--s16)}
.doppia strong{color:var(--luce);font-weight:600}

/* ---------- La carta ----------
   Righe vuote, di proposito. Il nome del piatto non c'e' perche' non ce
   l'ho: nessun piatto e nessun prezzo inventato compare in questa pagina. */
.carta{display:flex;flex-direction:column;border-top:1px solid var(--filo)}
.portata{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s8) var(--s16);
  padding:var(--s16);border-bottom:1px solid var(--filo-fioco)}
/* Il righello della carta: una riga su due poggia sul piano piu' chiaro.
   Nessuna riga e' distinta dal solo colore — hanno tutte lo stesso testo. */
.portata:nth-child(odd){background:var(--rilievo)}
.portata__nome{font-family:var(--titolo);font-size:var(--t20);font-weight:600;
  letter-spacing:-0.01em;flex:none}
.portata__punti{flex:1 1 40px;min-width:24px;border-bottom:1px dotted var(--filo);
  transform:translateY(-.32rem)}
.portata__val{font-family:var(--dato);font-size:var(--t12);letter-spacing:0.08em;
  color:var(--fumo);flex:none;font-variant-numeric:tabular-nums}
/* La nota va a capo da sola: e' la domanda da fare al titolare, non un
   secondo prezzo. Cenere, mai arancio — non e' un'azione. */
.portata__nota{flex:1 0 100%;font-size:var(--t14);line-height:1.5;color:var(--cenere);
  max-width:60ch}

.avviso{border-left:2px solid var(--filo-forte);padding:var(--s16) var(--s24);
  background:var(--tavolo);max-width:70ch}
.avviso p{font-size:var(--t17);color:var(--fumo)}
.avviso strong{color:var(--luce);font-weight:600}

/* ---------- Banda: la sera, l'unico momento a tutta larghezza ---------- */
.banda{position:relative;width:100%;background:var(--tavolo);
  padding-block:var(--s96);overflow:hidden;border-block:1px solid var(--filo-fioco)}
.banda::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 62% at 82% 14%,rgba(255,106,31,.08) 0%,rgba(25,28,33,0) 70%);
  background:radial-gradient(46% 62% at 82% 14% in oklab,rgba(255,106,31,.08) 0%,rgba(25,28,33,0) 70%)}
.banda .telaio{position:relative}
.banda h2{font-size:clamp(28px,5.4vw,var(--t48));max-width:18ch}
.banda p{color:var(--fumo);max-width:52ch;margin-top:var(--s16)}

/* ---------- Dove e quando ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s48)}
@media (min-width:860px){.visita{grid-template-columns:1fr 1fr;gap:var(--s64)}}
.orari{display:flex;flex-direction:column;border-top:1px solid var(--filo-fioco)}
.orari li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s8) var(--s16);padding-block:var(--s12);
  border-bottom:1px solid var(--filo-fioco);color:var(--fumo);font-size:var(--t17)}
/* Il giorno corrente ha tre segnali, non solo il colore: testo piu' chiaro,
   la parola «oggi» in chiaro, e il filo di sinistra. */
.orari li[data-oggi]{color:var(--luce);border-left:2px solid var(--brace);
  padding-left:var(--s12);margin-left:calc(var(--s12) * -1 - 2px)}
.orari__oggi{font-family:var(--dato);font-size:var(--t12);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--brace);margin-left:var(--s8)}
.orari__val{font-family:var(--dato);font-size:var(--t12);letter-spacing:0.08em;
  color:var(--cenere);font-variant-numeric:tabular-nums}

.recapiti{display:flex;flex-direction:column;gap:var(--s32)}
/* 32px fra due recapiti (gruppi), 4px dentro il recapito: il divario fra
   gruppi e' 8 volte quello interno, ben oltre il 2x richiesto. */
.recapito{display:flex;flex-direction:column;gap:var(--s4)}
.recapito__v{font-size:var(--t17);line-height:1.5;font-variant-numeric:tabular-nums}
.recapito__nota{font-size:var(--t14);color:var(--fumo);max-width:46ch}

/* ---------- Chiusura ---------- */
.chiusura{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);
  padding-block:var(--s96) var(--s48);border-top:1px solid var(--filo-fioco)}
.chiusura h2{font-size:clamp(34px,8vw,var(--t72));text-transform:uppercase;
  letter-spacing:-0.03em;max-width:14ch}
.chiusura h2 em{font-style:normal;color:var(--brace)}
.piede{display:flex;flex-wrap:wrap;gap:var(--s12) var(--s32);
  justify-content:space-between;padding-block:var(--s24) var(--s64);
  border-top:1px solid var(--filo-fioco);
  font-family:var(--dato);font-size:var(--t12);letter-spacing:0.1em;color:var(--cenere)}

/* ---------- Comparse ----------
   Salita corta e messa a fuoco: 240ms, sotto la soglia dei 300.
   Lo stato nascosto lo applica solo `html.anima`, che main.js aggiunge
   prima del primo disegno: senza JS la pagina e' intera e leggibile.

   Dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa):
   · .rivela--righe fa entrare le righe di un gruppo a cascada di ~50ms;
   · la brace dell'apertura e della banda respira, lenta, invece di stare
     ferma — stesso arancio, nessun sesto uso di colore;
   · micro-reazioni hover su voci, portate e righe.
   Solo transform e opacity, tutto <=300ms, guardia movimento ridotto. */
.rivela{transition:opacity 240ms var(--uscita),transform 240ms var(--uscita);
  transition-delay:var(--rit,0ms)}
html.anima .rivela{opacity:0;transform:translateY(14px)}
html.anima .rivela.dentro{opacity:1;transform:none}

/* Cascata sulle righe di un gruppo (nav, dati, orari, recapiti, piede). */
html.anima .rivela--righe > *{opacity:0;transform:translateY(10px)}
html.anima .rivela--righe.dentro > *{opacity:1;transform:none;
  transition:opacity 220ms var(--uscita),transform 220ms var(--uscita)}
html.anima .rivela--righe.dentro > *:nth-child(1){transition-delay:30ms}
html.anima .rivela--righe.dentro > *:nth-child(2){transition-delay:80ms}
html.anima .rivela--righe.dentro > *:nth-child(3){transition-delay:130ms}
html.anima .rivela--righe.dentro > *:nth-child(4){transition-delay:180ms}
html.anima .rivela--righe.dentro > *:nth-child(5){transition-delay:230ms}
html.anima .rivela--righe.dentro > *:nth-child(6){transition-delay:270ms}
html.anima .rivela--righe.dentro > *:nth-child(n+7){transition-delay:290ms}

/* La brace respira. Non e' un elemento nuovo e non e' un colore nuovo: e'
   l'alone caldo che gia' c'era in apertura e nella banda, reso vivo. Solo
   transform e opacity, curva simmetrica, ciclo lungo. Vive solo dove il
   movimento e' ammesso. */
@media (prefers-reduced-motion: no-preference){
  .apertura::before{
    /* durata dichiarata: alone ambientale continuo, non un feedback UI;
       ciclo lungo perche' e' una brace che respira, non una risposta. */
    animation:brace-respiro 11s ease-in-out infinite alternate;
  }
  .banda::before{
    /* durata dichiarata: stesso alone, ritmo appena diverso per non battere
       all'unisono con l'apertura. */
    animation:brace-respiro 13s ease-in-out infinite alternate;
  }
}
@keyframes brace-respiro{
  from{ transform:scale(1);        opacity:0.72; }
  to  { transform:scale(1.06);     opacity:1; }
}

/* ---------- Chiamata fissa sul telefono ----------
   Compare solo dopo l'apertura: finche' si vede il pulsante dell'apertura,
   di pulsanti pieni sullo schermo ce n'e' uno solo. Entra con transform e
   opacita', mai con height o bottom. */
.chiama-fisso{display:none}
@media (max-width:820px){
  .nav__voci{display:none}
  body{padding-bottom:64px}
  .chiama-fisso{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;z-index:50;min-height:56px;
    background:var(--brace);color:var(--sala);text-decoration:none;
    font-family:var(--titolo);font-size:var(--t17);font-weight:600;letter-spacing:0.03em;
    transform:translateY(100%);opacity:0;
    transition:transform 240ms var(--uscita),opacity 240ms var(--uscita);
  }
  .chiama-fisso.su{transform:translateY(0);opacity:1}
  .pagina{gap:var(--s96);padding-block:var(--s64) var(--s64)}
  .apertura{min-height:auto}
  .apertura__griglia{padding-block:var(--s128) var(--s64)}
  .pannello{padding:var(--s32) var(--s24)}
}

/* ---------- Movimento ridotto ----------
   Niente si sposta. L'opacita' resta, ma tutto parte gia' visibile:
   main.js non aggiunge nemmeno la classe `anima`. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important;
  }
  .rivela,
  .rivela--righe > *{opacity:1 !important;transform:none !important}
  /* La brace non respira: l'alone resta, fermo, alla sua opacita' piena. */
  .apertura::before,.banda::before{animation:none !important;transform:none !important;opacity:1 !important}
  /* La barra continua a comparire dopo l'apertura — ma senza scivolare:
     con la durata azzerata il passaggio e' immediato, non animato. */
  .bottone:active{transform:none}
}