/* ═══════════════════════════════════════════════════════════════════════════
   IL MOTIVO DEL SITO: la notte che lavora.

   ── LA TESI DEL MOVIMENTO ────────────────────────────────────────────────
   Una sola sequenza autoriale, e racconta esattamente quello che fa il
   prodotto: una recensione da una stella arriva alle 23:47, e alle 07:02 la
   risposta è già scritta. Il movimento NON è un effetto di comparsa: è la
   macchina che scrive, riga per riga, come una telescrivente.

   Tutto il resto della pagina sta fermo. Un sito dove ogni sezione entra
   scorrendo non ha una sequenza: ha un tic.

   ── PERCHÉ IN CSS E BASTA ────────────────────────────────────────────────
   Perché questo sito vieta ogni JavaScript (`default-src 'none'`), e non è
   un limite da aggirare: è la ragione per cui una pagina pubblica di un
   prodotto che tratta dati di terzi non ha superficie d'attacco. Il
   movimento si fa con quello che il browser sa già fare da solo.

   ── E CHI NON VUOLE MOVIMENTO ────────────────────────────────────────────
   `prefers-reduced-motion` non spegne il senso: mostra la stessa scena, già
   composta, senza che niente si muova. Chi ha quell'impostazione vede il
   contenuto intero, subito.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La scena ─────────────────────────────────────────────────────────────
   Tre battute: la recensione arriva, la macchina legge, la risposta è
   scritta. Ogni battuta parte da uno stato VISIBILE e si compone: se le
   animazioni non partono — browser vecchio, foglio non caricato — resta una
   scena leggibile, non una pagina vuota. */
.notte{
  background:var(--acciaio); color:oklch(0.93 0.01 150);
  border:1px solid var(--acciaio-2); border-radius:3px; overflow:hidden;
  box-shadow:0 18px 40px -28px oklch(0.2 0.02 150 / .55), 0 2px 6px -2px oklch(0.2 0.02 150 / .35);
}
.notte .fascia{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--acciaio-2);
  color:oklch(0.72 0.02 150);
}
.notte .battuta{ padding:16px; border-top:1px solid var(--acciaio-2) }
.notte .battuta:first-of-type{ border-top:none }
.notte .ora{ color:oklch(0.66 0.02 150); display:flex; gap:10px; align-items:center }
.notte .stelle{ color:var(--ambra); letter-spacing:.08em }
.notte .detto{ margin-top:8px; color:oklch(0.88 0.012 150); line-height:1.45 }
.notte .nostro{ margin-top:8px; color:oklch(0.95 0.01 150); line-height:1.45 }

/* La spia: accesa e viva. È l'unico elemento che continua a muoversi, ed è
   il messaggio del prodotto — sta guardando anche adesso. */
.spia-viva{ display:inline-flex; align-items:center; gap:8px }
.spia-viva i{
  width:7px; height:7px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 0 oklch(0.76 0.175 148 / .55);
  animation:respiro 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes respiro{
  0%,100%{ box-shadow:0 0 0 0 oklch(0.76 0.175 148 / .5) }
  60%    { box-shadow:0 0 0 7px oklch(0.76 0.175 148 / 0) }
}

/* Il lavoro in mezzo: la riga che dice cosa ha capito. */
.notte .lavoro{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  padding:12px 16px; border-top:1px solid var(--acciaio-2);
  background:oklch(0.185 0.016 155); color:oklch(0.70 0.02 150);
}
.notte .tema{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border:1px solid oklch(0.36 0.02 150); border-radius:2px;
}
.notte .tema.grave{ color:var(--ambra); border-color:oklch(0.45 0.06 74) }

/* ── LA BATTUTA CHE CONTA: la risposta che si scrive ──────────────────────
   Non una comparsa: una SCRITTURA. Il testo viene scoperto da sinistra con
   una maschera, alla velocità con cui lo leggerebbe una persona, e il
   cursore sta sul bordo dello scoprimento. È il prodotto che lavora, non un
   effetto preso da una libreria. */
.scrive{ position:relative; display:block }

@media (prefers-reduced-motion: no-preference){
  /* Le tre battute si compongono una dopo l'altra. Partono da visibile e
     vengono nascoste SOLO qui dentro: chi non ha animazioni non vede mai
     niente sparire. */
  .notte .battuta, .notte .lavoro{ animation:arriva .5s cubic-bezier(.16,1,.3,1) backwards }
  .notte .battuta:nth-of-type(1){ animation-delay:.15s }
  .notte .lavoro                { animation-delay:.95s }
  .notte .battuta:nth-of-type(2){ animation-delay:1.5s }

  @keyframes arriva{
    from{ opacity:0; transform:translateY(6px); filter:blur(3px) }
    to  { opacity:1; transform:none;            filter:none }
  }

  /* La scrittura vera. `clip-path` invece di `width`: non fa ricalcolare il
     testo a ogni fotogramma, quindi non balla e non scalda il telefono. */
  .scrive{
    animation:scrittura 1.9s steps(58, end) 1.75s backwards;
    clip-path:inset(0 0 0 0);
  }
  @keyframes scrittura{
    from{ clip-path:inset(0 100% 0 0) }
    to  { clip-path:inset(0 0 0 0) }
  }
  .scrive::after{
    content:""; position:absolute; inset-block:2px; width:2px;
    background:var(--verde); opacity:0;
    animation:cursore 1.9s steps(58, end) 1.75s backwards, spegni .2s linear 3.65s forwards;
  }
  @keyframes cursore{
    from{ left:0;   opacity:1 }
    to  { left:100%; opacity:1 }
  }
  @keyframes spegni{ to{ opacity:0 } }
}

/* ── LE COMPARSE LEGATE ALLO SCORRIMENTO: TOLTE ───────────────────────────
   C'erano, e le ho tolte guardando la pagina su un telefono: sotto
   l'apertura era **tutta bianca**. Le animazioni legate allo scorrimento
   partono da invisibile, e quello che non è ancora stato scorso resta
   invisibile — per una macchina fotografica, per la stampa, per «trova nella
   pagina», e per chiunque se quella regola smettesse di funzionare.

   Ma c'è un motivo migliore per non rimetterle: far comparire ogni sezione
   scorrendo non è una sequenza, è un tic. Il movimento di questo sito è UNO,
   e racconta una cosa sola: la notte in cui la risposta si scrive da sola.
   Se ce ne fossero dieci, quello non lo guarderebbe più nessuno.

   Sotto l'apertura la pagina sta ferma, ed è una scelta. */