/* =====================================================================
   GM Radiocom — MOTION layer. Lane "La Dorsale": sobrio, misurato, tecnico.

   Tutto gated sotto html.has-motion (aggiunto SOLO se JS è vivo e
   prefers-reduced-motion non è "reduce"). Senza JS / con reduced-motion
   la baseline resta perfettamente intatta. Coppia con motion.js.
   ===================================================================== */

/* ---------- Lenis runtime ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Failsafe: se motion.js non parte, rivela tutto ---------- */
html.motion-failed [data-reveal] { opacity: 1 !important; transform: none !important; }
html.motion-failed .rv-line__inner { transform: none !important; }

/* =====================================================================
   1. REVEAL — risalita morbida (potenzia l'hook [data-reveal])
   ===================================================================== */
html.has-motion [data-reveal] {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform;
}
html.has-motion [data-reveal].is-in { will-change: auto; }

/* =====================================================================
   2. REVEAL A MASCHERA — titoli che salgono da dietro una riga
   ===================================================================== */
html.has-motion [data-reveal].rv-mask { opacity: 1; transform: none; }
html.has-motion .rv-mask .rv-line {
  display: block; overflow: hidden; padding-bottom: 0.04em;
}
html.has-motion .rv-mask .rv-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.95s var(--ease);
  transition-delay: var(--rv-delay, 0s);
  will-change: transform;
}
html.has-motion .rv-mask.is-in .rv-line__inner { transform: none; will-change: auto; }

/* =====================================================================
   3. HERO — il segnale "respira": anelli concentrici dalla cima
   (decorativo, sobrio — golden-hour del settore: la propagazione radio)
   ===================================================================== */
html.has-motion .hero__signal circle {
  transform-box: fill-box; transform-origin: center;
  animation: signalBreathe 6s ease-in-out infinite;
}
html.has-motion .hero__signal circle:nth-child(2) { animation-delay: 0.6s; }
html.has-motion .hero__signal circle:nth-child(3) { animation-delay: 1.2s; }
html.has-motion .hero__signal circle:nth-child(4) { animation-delay: 1.8s; }
/* pulsazione sobria: leggerissimo respiro di scala (l'opacità a strati
   resta quella inline dell'SVG → la propagazione del segnale resta leggibile) */
@keyframes signalBreathe {
  0%, 100% { transform: scale(0.985); }
  50%      { transform: scale(1.02); }
}

/* =====================================================================
   4. SCROLLSPY — voce di nav attiva (statico)
   ===================================================================== */
.site-nav a.is-active { opacity: 1; }

/* =====================================================================
   5. PARALLAX — composizione transform sicura, GPU-friendly.
   motion.js scrive --px (px) sull'elemento hook (.feature__media).
   L'immagine ha overscale via CSS → mai gap, niente layout shift.
   ===================================================================== */
html.has-motion .feature__media {
  will-change: transform;
  transform: translate3d(0, var(--px, 0px), 0);
}

/* =====================================================================
   6. RISPETTO prefers-reduced-motion (belt & suspenders)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.has-motion [data-reveal],
  html.has-motion .rv-line__inner { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.has-motion .hero__signal circle { animation: none !important; }
  html.has-motion .feature__media { transform: none !important; }
}