/* ==========================================================================
   ANIMATIONS — scroll reveals, entrance, laser scan, reduced-motion gate
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-triggered reveals
   Elements start hidden ONLY when JS is running (html.js), so the page is
   fully readable if scripts fail.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--t-entrance) var(--ease-standard),
    transform var(--t-entrance) var(--ease-entrance),
    clip-path var(--t-entrance) var(--ease-entrance);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal="up"] {
  transform: translate3d(0, 34px, 0);
}
.js [data-reveal="down"] {
  transform: translate3d(0, -28px, 0);
}
.js [data-reveal="left"] {
  transform: translate3d(-38px, 0, 0);
}
.js [data-reveal="right"] {
  transform: translate3d(38px, 0, 0);
}
.js [data-reveal="scale"] {
  transform: scale(0.92);
}
.js [data-reveal="wipe"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}
.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* --------------------------------------------------------------------------
   Hero entrance sequence
   -------------------------------------------------------------------------- */
.js .hero__title .line > span {
  transition: transform 900ms var(--ease-entrance);
  transition-delay: calc(var(--i, 0) * 90ms + 180ms);
}
.js .hero.is-loaded .hero__title .line > span {
  transform: translateY(0);
}

.js .hero__eyebrow,
.js .hero__lead,
.js .hero__actions,
.js .hero__trust,
.js .hero__stage {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 780ms var(--ease-standard), transform 780ms var(--ease-entrance);
}
.js .hero__eyebrow {
  transition-delay: 90ms;
}
.js .hero__lead {
  transition-delay: 520ms;
}
.js .hero__actions {
  transition-delay: 620ms;
}
.js .hero__trust {
  transition-delay: 710ms;
}
.js .hero__stage {
  transform: translate3d(28px, 0, 0) scale(0.96);
  transition-delay: 380ms;
}
.js .hero.is-loaded .hero__eyebrow,
.js .hero.is-loaded .hero__lead,
.js .hero.is-loaded .hero__actions,
.js .hero.is-loaded .hero__trust,
.js .hero.is-loaded .hero__stage {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Laser scan line — a beam sweeps across the heading, "engraving" it.
   Applied to a handful of key section headings only.
   -------------------------------------------------------------------------- */
.laser-head {
  position: relative;
  display: inline-block;
}
.js .laser-head::after {
  content: "";
  position: absolute;
  top: -6%;
  left: -4%;
  width: 3px;
  height: 112%;
  background: linear-gradient(180deg, transparent, var(--brass-200), var(--crimson-400), transparent);
  box-shadow: 0 0 18px 4px rgba(224, 195, 119, 0.55);
  opacity: 0;
  pointer-events: none;
}
.js .laser-head.is-visible::after {
  animation: laser-sweep 1.15s var(--ease-standard) 180ms 1;
}
@keyframes laser-sweep {
  0% {
    left: -4%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: 104%;
    opacity: 0;
  }
}

/* Heading text revealed behind the beam. */
.js .laser-head .laser-head__text {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--ease-standard) 230ms;
  display: inline-block;
}
.js .laser-head.is-visible .laser-head__text {
  clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Counters — hold layout while counting
   -------------------------------------------------------------------------- */
.stat__num,
.split__stat-num {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Magnetic CTA
   -------------------------------------------------------------------------- */
.magnetic {
  transition: transform 260ms var(--ease-entrance);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — the hard gate.
   Everything above must degrade to a static, fully-visible page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .js .hero__title .line > span,
  .js .hero__eyebrow,
  .js .hero__lead,
  .js .hero__actions,
  .js .hero__trust,
  .js .hero__stage {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .laser-head .laser-head__text {
    clip-path: none !important;
  }
  .js .laser-head::after {
    display: none !important;
  }

  .marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .hero__card,
  .hero__badge,
  .hero__glow--a,
  .hero__glow--b,
  .cta-band__particle,
  .mobile-bar__btn--wa .pulse {
    animation: none !important;
  }

  .process::after {
    transition: none !important;
    width: 84% !important;
  }

  .cursor-dot {
    display: none !important;
  }
}