/* ==========================================================================
   BOZZA ANIMAZIONI — file isolato da components.css.
   Definisce solo gli stati iniziali degli elementi animati via Motion
   (js/animations.js). Le classi .reveal-init vengono applicate via JS,
   mai staticamente: se lo script non parte per qualsiasi motivo, il
   contenuto resta visibile invece di sparire.
   ========================================================================== */

.reveal-init {
  opacity: 0;
}

.mask-line {
  display: block;
  overflow: hidden;
  /* Il line-height dei titoli è molto compresso (0.952): senza questo
     respiro, overflow:hidden taglia i discendenti delle lettere come
     g/p/j/q/y (es. "peso"). Il margin-bottom negativo compensa lo
     spazio aggiunto, così non si sposta il divisore/contenuto sotto. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.mask-line__inner {
  display: block;
  will-change: transform;
}

/* Header hide-on-scroll: sticky è il prerequisito del pattern (prima
   l'header era nel flusso normale e scompariva scrollando col resto). */
.site-header {
  position: sticky;
  top: 0;
  /* Sopra .mobile-menu (z-index 200): l'header (e il toggle a X al suo
     interno) deve restare visibile e cliccabile sopra l'overlay quando
     il menu mobile è aperto, altrimenti l'overlay lo copre del tutto. */
  z-index: 250;
  transition: transform 0.4s ease;
}

/* A menu aperto l'header resta sopra l'overlay solo per mostrare la X
   (necessaria per chiudere il menu): il logo va invece nascosto, non ha
   senso vederlo affiancato ai link dell'overlay. */
.site-header--menu-open .site-header__logo {
  visibility: hidden;
}

.site-header--hidden {
  /* Non -100%: su un elemento position:sticky, Chrome non risolve sempre
     correttamente le percentuali di transform sull'altezza dell'elemento
     mentre è "agganciato" (bug noto). Uso invece il token --header-h,
     già allineato all'altezza reale dell'header a ogni breakpoint. */
  transform: translateY(calc(-1 * var(--header-h)));
}