/* ==========================================================================
   animations.css — stati iniziali e regole di movimento
   Gli stati "nascosti" si applicano solo se il JS è attivo (html.js):
   senza JavaScript il sito resta completamente leggibile.
   ========================================================================== */

/* ---------- Stati iniziali ---------- */
.js .reveal-up {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform;
}

/* I titoli restano invisibili finché main.js non li ha divisi in righe */
.js [data-split="lines"] { opacity: 0; }

/* Righe di testo generate da main.js: ogni riga è dentro una maschera */
.line-mask {
  display: block;
  overflow: hidden;
  /* la finestra di ritaglio è più alta della riga: le lettere con
     ascendenti e discendenti non vengono mai tagliate */
  padding-block: 0.24em 0.30em;
  margin-block: -0.24em -0.30em;
}
.js .line-inner {
  display: block;
  transform: translate3d(0, 142%, 0);
  will-change: transform;
}

.js [data-card],
.js [data-aud] {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.985);
  will-change: opacity, transform;
}

.js .shot,
.js .phones {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
  will-change: opacity, transform;
}

.js [data-step] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

/* ---------- Micro-interazioni ---------- */
.magnetic { will-change: transform; }

.shot--blob img {
  transition: border-radius 0.1s linear;
}

/* Barra di avanzamento lettura in cima alla pagina */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  height: 2px;
  width: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Il menu mobile entra con una tendina */
.mobile-menu { transition: opacity 0.45s var(--ease); }
.mobile-menu.is-open { opacity: 1; }

/* ---------- Rispetto di prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal-up,
  .js [data-card],
  .js [data-aud],
  .js .shot,
  .js .phones,
  .js [data-step],
  .js .line-inner {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .line-mask { overflow: visible; }

  .cursor-glow,
  .progress-bar,
  .hero__scroll { display: none !important; }

  .orb { opacity: 0.35; }
  .hero__eyebrow .dot { animation: none; }
  .marquee__track { transform: none !important; }
}