/* ============================================================
   Animazioni della home · "Rimbalzo e lame"
   (era la variante A dello studio: studio/animazioni/, dove restano
   le altre direzioni e NOTE.md con le regole e le verifiche)
   Si muove tutto: testata, nastro, copertina, ogni titolo, ogni
   riga di elenco, ogni pastiglia. E tutto si ferma ESATTAMENTE
   dov'è nella home attuale.

   La regola che lo garantisce: qui non si scrive mai "transform".
   Si usano le proprietà indipendenti "translate" e "scale", che
   si sommano al transform di base invece di sostituirlo. Così
   KitchenLESS e WasteLESS restano ruotati dei loro -3° e il bollo
   ZERO SPRECHI dei suoi -2°, come nel sito vero.

   Altri vincoli: si animano solo proprietà che non fanno
   ricalcolare il layout; la foto della copertina non si anima
   (è l'elemento più grande, farla comparire fa sembrare il sito
   più lento); tutto dentro "prefers-reduced-motion: no-preference";
   zero librerie.
   ============================================================ */

@media (prefers-reduced-motion:no-preference){

  /* ---------- Al caricamento ---------- */

  /* La tenda scende come quella vera di un negozio */
  .tenda{transform-origin:top center;animation:tenda-giu .55s cubic-bezier(.22,.9,.24,1) backwards}
  @keyframes tenda-giu{from{scale:1 0}to{scale:1 1}}

  /* La testata e il nastro entrano dall'alto */
  .testata{animation:cala .5s cubic-bezier(.22,.9,.24,1) .15s backwards}
  .nastro {animation:cala .5s cubic-bezier(.22,.9,.24,1) .3s backwards}
  @keyframes cala{from{opacity:0;translate:0 -100%}to{opacity:1;translate:none}}

  .testata__logo,.nav > *{animation:sali .55s cubic-bezier(.34,1.4,.64,1) backwards}
  .testata__logo{animation-delay:.35s}
  .nav > *:nth-child(1){animation-delay:.42s}
  .nav > *:nth-child(2){animation-delay:.48s}
  .nav > *:nth-child(3){animation-delay:.54s}
  .nav > *:nth-child(n+4){animation-delay:.6s}

  /* La copertina: il titolo con la lama, il resto rimbalzando */
  .copertina .stato,.copertina__logo,.copertina__sotto,.copertina__cta{
    animation:sali .7s cubic-bezier(.34,1.4,.64,1) backwards}
  .copertina .stato {animation-delay:.5s}
  .copertina__logo  {animation-delay:.6s}
  .copertina__sotto {animation-delay:.9s}
  .copertina__cta   {animation-delay:1s}
  @keyframes sali{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}

  .copertina h1{animation:lama-su .9s cubic-bezier(.76,0,.24,1) .72s backwards}
  @keyframes lama-su{from{clip-path:inset(110% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

  /* ---------- Allo scorrimento ----------
     Tutto arriva dal basso con un rimbalzo, e si ferma al suo posto. */
  html.anim .rivela{opacity:0;translate:0 24px;
    transition:opacity .45s ease,translate .7s cubic-bezier(.34,1.56,.64,1),
               scale .7s cubic-bezier(.34,1.56,.64,1),clip-path .8s cubic-bezier(.76,0,.24,1)}
  html.anim .rivela.visto{opacity:1;translate:none}

  /* I titoli si scoprono come una saracinesca che si alza */
  html.anim h1.rivela,html.anim h2.rivela,html.anim h3.rivela,
  html.anim .claim.rivela,html.anim .menu-sez__titolo.rivela{
    opacity:1;translate:none;clip-path:inset(110% 0 0 0)}
  html.anim h1.rivela.visto,html.anim h2.rivela.visto,html.anim h3.rivela.visto,
  html.anim .claim.rivela.visto,html.anim .menu-sez__titolo.rivela.visto{clip-path:inset(0 0 0 0)}

  /* Il filetto rosso si disegna da sinistra */
  html.anim .rivela--filetto{opacity:1;translate:none;clip-path:inset(0 100% 0 0)}
  html.anim .rivela--filetto.visto{clip-path:inset(0 0 0 0)}

  /* Le voci brevi — categorie, pastiglie, passi — scattano invece di salire */
  html.anim .categorie > li.rivela,html.anim .pillole > li.rivela,
  html.anim .passi > li.rivela,html.anim .club__numeri > div.rivela{
    translate:0 10px;scale:.88}
  html.anim .categorie > li.rivela.visto,html.anim .pillole > li.rivela.visto,
  html.anim .passi > li.rivela.visto,html.anim .club__numeri > div.rivela.visto{
    translate:none;scale:1}

  /* Le righe dei piatti scorrono da sinistra, fitte e veloci */
  html.anim .sempre > li.rivela,html.anim .piatto.rivela{translate:-14px 0}
  html.anim .sempre > li.rivela.visto,html.anim .piatto.rivela.visto{translate:none}

  /* I blocchi pieni: il colore cala dall'alto, una volta sola.
     NON e' agganciato allo scorrimento. Con animation-timeline:view() il
     ritaglio seguiva il dito: bastava fermarsi a meta' per restare con il
     blocco tagliato in due e il titolo mozzato. Qui parte quando il blocco
     entra e finisce comunque, poi rivela.js toglie la classe e del ritaglio
     non resta niente.
     Cala dall'alto e non sale dal basso perche' il bordo alto e' quello che
     entra per primo dal fondo dello schermo: cosi' il colore si vede crescere
     invece di comparire tutto insieme a fine corsa. */
  html.anim .rivela-blocco{clip-path:inset(0 0 100% 0);
    transition:clip-path .75s cubic-bezier(.76,0,.24,1)}
  html.anim .rivela-blocco.visto{clip-path:inset(0 0 0 0)}
}