/* Movimento della landing.
 *
 * Le classi sono scritte da movimento.js; qui c'e' solo come si muovono.
 * Tutto passa da `transform` e `opacity`: sono le due proprieta' che il
 * browser anima senza rifare il layout.
 */

/* --- comparse allo scroll ------------------------------------------------
   Lo stato di partenza sta nel CSS e non nel JS: se lo script non parte,
   `e-visibile` non arriva mai e il contenuto resterebbe invisibile. Per
   questo l'ultima regola qui sotto lo rimette in piedi quando il
   movimento e' disattivato. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--ritardo, 0ms);
}
[data-reveal].e-visibile {
  opacity: 1;
  transform: none;
}

[data-parallax],
[data-strato] {
  will-change: transform;
}

/* --- barra di avanzamento della lettura --------------------------------- */
.avanzamento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1030;
  background: var(--clb-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* --- nav che si stacca dall'alto ----------------------------------------
   Posizione e z-index stanno nello style condiviso: qui c'e' solo cio' che
   in hero e' diverso. Sopra l'animazione la barra deve sparire nel fondo;
   il fondo pieno torna appena la pagina si stacca dall'alto, cioe' quando
   sotto la barra comincia a passare del testo. */
.site-header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 240ms ease, border-color 240ms ease;
}
.site-header.e-staccata {
  background: color-mix(in srgb, var(--clb-color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--clb-color-border-hair);
}

/* --- tappe in colonna ---------------------------------------------------- */
[data-tappa] {
  opacity: .35;
  transition: opacity 300ms ease;
}
[data-tappa].e-attiva {
  opacity: 1;
}
[data-tappa].e-attiva .tappa-numero {
  color: var(--clb-color-accent-text);
}

/* --- chi ha chiesto meno movimento --------------------------------------
   Non si accontenta di fermare le animazioni: rimette anche gli elementi
   allo stato finale, o resterebbero a opacita' zero. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax],
  [data-strato] {
    transform: none !important;
  }
  .avanzamento {
    display: none;
  }
}