/* ==========================================================================
   Motion layer — reveals, keyframes, interactive states
   All animation is skipped/flattened when .no-motion is set on <html>
   (applied via JS when prefers-reduced-motion: reduce)
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="scale"].is-visible {
  transform: scale(1);
}

[data-reveal="left"] {
  transform: translateX(-36px);
}

[data-reveal="left"].is-visible {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(36px);
}

[data-reveal="right"].is-visible {
  transform: translateX(0);
}

[data-reveal-group] [data-reveal] {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

/* Hero entrance */
.hero-badges,
.hero-title .line span,
.hero-copy,
.hero-ctas,
.hero-call,
.hero-stats {
  opacity: 0;
}

html.is-loaded .hero-badges {
  animation: riseIn 0.9s var(--ease-out) 0.15s forwards;
}

html.is-loaded .hero-title .line span {
  animation: riseInBig 1s var(--ease-out) forwards;
}

html.is-loaded .hero-title .line:nth-child(1) span {
  animation-delay: 0.28s;
}

html.is-loaded .hero-title .line:nth-child(2) span {
  animation-delay: 0.4s;
}

html.is-loaded .hero-title .line:nth-child(3) span {
  animation-delay: 0.52s;
}

html.is-loaded .hero-copy {
  animation: riseIn 0.9s var(--ease-out) 0.68s forwards;
}

html.is-loaded .hero-ctas {
  animation: riseIn 0.9s var(--ease-out) 0.8s forwards;
}

html.is-loaded .hero-call {
  animation: riseIn 0.9s var(--ease-out) 0.92s forwards;
}

html.is-loaded .hero-stats {
  animation: riseIn 0.9s var(--ease-out) 0.85s forwards;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes riseInBig {
  from {
    opacity: 0;
    transform: translateY(100%) rotate(1deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes scrollPulse {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }

  40% {
    transform: scaleY(1);
    opacity: 1;
  }

  60% {
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 1;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
}

/* Loading veil */
.load-veil {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ink-950);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.load-veil svg {
  width: 52px;
  height: 52px;
  animation: markSpin 1.1s linear infinite;
}

html.is-loaded .load-veil {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes markSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Magnetic buttons */
[data-magnetic] {
  transition: transform 0.25s var(--ease-out);
}

/* Card tilt */
[data-tilt] {
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

/* FAQ chevron handled via grid-template-rows already */

/* Step icon float */
.step-card {
  animation: none;
}

.step-card[data-reveal].is-visible {
  animation: floatSoft 6s ease-in-out infinite;
  animation-delay: calc(var(--reveal-index, 0) * 0.4s + 1s);
}

@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* Gradient drift on final CTA */
.final-cta {
  background-size: 150% 150%;
  animation: gradientDrift 12s ease-in-out infinite;
}

@keyframes gradientDrift {
  0%,
  100% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }
}

/* Marquee-style trust ticker (optional use) */
.ticker-track {
  display: flex;
  gap: 3rem;
  animation: tickerScroll 28s linear infinite;
}

@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- Reduced motion ---------- */
html.no-motion * {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  transition-duration: 0.12s !important;
  scroll-behavior: auto !important;
}

html.no-motion .hero-media img {
  transform: none !important;
}

html.no-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

html.no-motion .hero-badges,
html.no-motion .hero-title .line span,
html.no-motion .hero-copy,
html.no-motion .hero-ctas,
html.no-motion .hero-call,
html.no-motion .hero-stats {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html.no-motion .load-veil {
  display: none !important;
}

html.no-motion .step-card[data-reveal].is-visible {
  animation: none !important;
}

html.no-motion .final-cta {
  animation: none !important;
}

html.no-motion .ticker-track {
  animation: none !important;
}