/* ==========================================================================
   BOZZA ANIMAZIONI — file isolato da components.css.
   Stessi principi usati per Ottica Lepori. 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. "Lugano"). 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;
}

/* Parallax verticale sulle immagini full-width: qui, a differenza di
   Lepori, i contenitori non hanno già overflow:hidden — serve aggiunto
   per non far uscire l'immagine ingrandita dal suo riquadro. */
.claim-image,
.full-bleed-image {
  overflow: hidden;
}

/* Header hide-on-scroll: sticky è il prerequisito del pattern (prima
   l'header era nel flusso normale e scompariva scrollando col resto).
   A differenza di Lepori, qui .site-header non ha uno sfondo proprio
   (si vedeva il nero di body dietro, invisibile finché l'header stava
   nel flusso normale sopra l'hero). Da sticky, senza sfondo il contenuto
   sottostante scorrerebbe "attraverso" l'header — va aggiunto esplicito.
   .site-header ha anche la classe .container (max-width, centrato): un
   semplice background riempirebbe solo quel riquadro centrale, lasciando
   scoperti i lati su monitor larghi. Uno pseudo-elemento largo 100vw ma
   alto quanto l'header (non box-shadow: lo spread si espande anche in
   verticale, coprendo quasi tutta la pagina — bug già preso e corretto)
   dipinge il colore a piena larghezza senza toccare la struttura HTML. */
.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::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background: var(--color-bg);
  z-index: -1;
}

.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-height,
     già definito nel sito (nota: qui il breakpoint mobile sovrascrive
     l'altezza resa via CSS diretto, non via token — la traslazione resta
     comunque sicura: "più del necessario" verso l'alto non lascia mai
     un margine visibile). */
  transform: translateY(calc(-1 * var(--header-height)));
}