/* Movimento legato allo scroll, in solo CSS: ogni elemento segue la posizione della pagina, avanti e indietro.
   Dove il browser non conosce animation-timeline la pagina resta ferma e completa, com'era prima.
   Chi ha chiesto meno movimento vede solo l'ombra dell'intestazione, che è un cambio di stato. */
@supports (animation-timeline: view()) {
  /* Intestazione: si stacca dalla pagina appena si comincia a scorrere */
  .ds-navbar {
    animation: navbar-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }
  @keyframes navbar-lift { to { box-shadow: var(--shadow-header); } }

  @media (prefers-reduced-motion: no-preference) {
    /* Ingresso: un solo movimento, regolato da tre variabili (--from-x, --from-y, --from-scale).
       Curva morbida in uscita: più decisa farebbe scattare gli elementi nei primi pixel di scroll. */
    .section__head {
      animation: scroll-in cubic-bezier(0.33, 1, 0.68, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
      /* Chi arriva con la tastiera su un link appena entrato nello schermo lo vede subito per intero */
      &:has(:focus-visible), &:focus-visible { animation: none; }
    }
    @keyframes scroll-in {
      from {
        opacity: 0;
        transform: translate(var(--from-x, 0), var(--from-y, 32px)) scale(var(--from-scale, 1));
      }
    }
  }
}