/* ================================================================
   Capitoli — la meccanica, senza il vestito.

   Questo file accompagna js/scroll.js e il kit: contiene solo ciò che
   serve al funzionamento (la battuta, la barra, l'entrata del testo,
   l'apertura). I colori passano da due variabili — il resto del look
   appartiene alla pagina che monta il motore.
   ================================================================ */

:root{
  --accento: #5468ee;      /* la barra, i segni */
  --fondo:   #0b0e17;      /* il velo dell'apertura sfuma su questo */

  /* LA BATTUTA. Le scene lunghe non hanno figli su cui appoggiare una
     fermata: la loro corsa è espressa in BATTUTE, e il motore legge lo
     stesso numero (--beats) per sapere dove si ferma. Altezza della
     corsa e fermate escono da un dato solo, quindi non possono
     divergere. --beat lo scrive js/scroll.js dalla manopola K.beat. */
  --beat: 88svh;
}

/* Lo scorrimento lo governa js/scroll.js: un gesto, un capitolo.
   Niente scroll-snap — l'aggancio pieno del browser interrompe il
   momentum per forzare l'atterraggio. E niente scroll-behavior:smooth:
   farebbe ri-animare dal browser ogni scrollTo del motore. */
html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

/* Una corsa: l'elemento con data-corsa. La sua altezza è la corsa
   stessa; il contenuto da tenere fermo va in un figlio sticky. */
[data-corsa]{
  position:relative;
  height:calc(var(--beats, 3) * var(--beat) + 100svh);
}

/* ---------------- LA BARRA DI AVANZAMENTO ----------------
   Si riempie lungo la tratta che le affidi con Capitoli.barra(). */
.barra{
  position:fixed; left:0; right:0; top:0; height:2px;
  z-index:55; background:rgba(255,255,255,.14);
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.barra--on{ opacity:1; }
.barra i{
  display:block; height:100%; width:100%;
  background:var(--accento); box-shadow:0 0 12px var(--accento);
  transform:scaleX(0); transform-origin:0 50%;
}
.is-apertura .barra{ opacity:0; }

/* ---------------- L'ENTRATA DEL TESTO ----------------
   Le lettere compaiono dal loro centro: dissolvenza e un filo di
   ingrandimento, sfalsate di 14 ms l'una dall'altra — una riga intera
   si posa in poco più di mezzo secondo. Le parole restano intere
   (.w non va a capo dentro), quindi il testo si spezza dove si
   spezzerebbe comunque.

   Niente will-change: sono centinaia di lettere e l'animazione
   avviene una volta sola. */
.split{ white-space:pre-wrap; }
.split .w{ display:inline-block; white-space:nowrap; }
.split > i, .split .w > i{
  display:inline-block; font-style:normal;
  opacity:0; transform:scale(.84) translateY(.08em);
  transform-origin:50% 56%;
  transition:opacity .30s cubic-bezier(.2,.72,.28,1),
             transform .46s cubic-bezier(.2,.72,.28,1);
  transition-delay:calc(var(--i, 0) * 14ms);
}
.is-in.split > i, .is-in.split .w > i{ opacity:1; transform:none; }

/* Il resto entra intero, con un ritardo opzionale (data-ritardo). */
.rise{
  opacity:0; transform:translateY(10px);
  transition:opacity .42s cubic-bezier(.2,.72,.28,1),
             transform .52s cubic-bezier(.2,.72,.28,1);
  transition-delay:var(--d, 0ms);
}
.rise.is-in{ opacity:1; transform:none; }

/* ---------------- L'APERTURA ----------------
   Un velo sopra tutto, congedato dal primo gesto (js/apertura.js).
   Il contenuto — marchio, fotografia, quello che è — lo mette la
   pagina dentro l'elemento data-apertura. */
.apertura{
  position:fixed; inset:0; z-index:200; overflow:hidden;
  display:grid; place-items:center;
  background:var(--fondo);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), visibility .9s;
}
.apertura--on{ opacity:1; visibility:visible; pointer-events:auto; cursor:pointer; }

.apertura__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center; padding:0 24px;
  transform:translateY(12px); opacity:0;
  transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}
.apertura--on .apertura__inner{ transform:none; opacity:1; }

/* ---------------- accessibilità ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .split > i, .split .w > i, .rise{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .apertura, .apertura__inner{ transition:none; }
}