/* ============================================================
   Motion: keyframes, reveal states, scroll-driven animations,
   reduced-motion safety net
   ============================================================ */

@keyframes aurora-a {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(8vw, 6vh, 0) scale(1.18) rotate(20deg); }
}

@keyframes aurora-b {
  from { transform: translate3d(0, 0, 0) scale(1.1) rotate(0deg); }
  to { transform: translate3d(-7vw, -5vh, 0) scale(0.95) rotate(-16deg); }
}

@keyframes aurora-c {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to { transform: translate3d(-5vw, 7vh, 0) scale(1.15); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(2 168 132 / 0.55); }
  70% { box-shadow: 0 0 0 0.65rem rgb(2 168 132 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(2 168 132 / 0); }
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(0.35rem); opacity: 1; }
}

@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes orb-float-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0.6rem, -1.1rem, 0) scale(1.05); }
}

@keyframes orb-float-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-0.5rem, 0.9rem, 0) scale(0.96); }
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes headline-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- Hero entrance (CSS only, fires on load) ---------- */

.hero-inner > * {
  animation: rise-in 0.9s var(--ease-out-expo) backwards;
}

.hero-inner > :nth-child(1) { animation-delay: 0.05s; }
.hero-inner > :nth-child(2) { animation-delay: 0.15s; }
.hero-inner > :nth-child(3) { animation-delay: 0.28s; }
.hero-inner > :nth-child(4) { animation-delay: 0.4s; }
.hero-inner > :nth-child(5) { animation-delay: 0.52s; }

/* Headline gradient shimmer */
.hero .gradient-text {
  background-size: 220% 100%;
  animation: headline-shimmer 7s ease-in-out infinite;
}

/* ---------- IO reveals (with directional + blur variants) ---------- */
/* Without JS everything stays visible; html.js arms hidden states. */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo),
    filter var(--dur-3) var(--ease-out-expo);
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}

html.js [data-reveal="left"] { transform: translateX(-36px); }
html.js [data-reveal="right"] { transform: translateX(36px); }
html.js [data-reveal="blur"] { transform: translateY(14px); filter: blur(10px); }
html.js [data-reveal="scale"] { transform: scale(0.94); }

html.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Scene zoom-in choreography ---------- */
/* The mockup zooms in from depth on its side; rAF fallback writes
   the same transforms inline where animation-timeline is missing. */

html.js .mockup-shell {
  transform-origin: 50% 60%;
}

@keyframes mockup-zoom-right {
  0% {
    opacity: 0.2;
    transform: perspective(1200px) translateX(110px) rotateY(-14deg) rotateX(6deg) scale(0.78);
  }
  78% {
    opacity: 1;
    transform: perspective(1200px) translateX(-6px) rotateY(1.5deg) rotateX(-0.5deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateX(0) rotateY(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes mockup-zoom-left {
  0% {
    opacity: 0.2;
    transform: perspective(1200px) translateX(-110px) rotateY(14deg) rotateX(6deg) scale(0.78);
  }
  78% {
    opacity: 1;
    transform: perspective(1200px) translateX(6px) rotateY(-1.5deg) rotateX(-0.5deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateX(0) rotateY(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes num-parallax {
  from { transform: translateY(14vh); }
  to { transform: translateY(-14vh); }
}

@media (min-width: 64rem) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    html.js .scene[data-side="right"] .mockup-shell {
      animation: mockup-zoom-right both linear;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }

    html.js .scene[data-side="left"] .mockup-shell {
      animation: mockup-zoom-left both linear;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }

    html.js .scene-num {
      animation: num-parallax both linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    html.js .float-chips .chip {
      animation: chip-drift both linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes chip-drift {
  from { transform: translateY(calc(var(--drift, 1) * 2.2rem)); }
  to { transform: translateY(calc(var(--drift, 1) * -2.2rem)); }
}

/* ---------- Scroll progress (cheap, all devices) ---------- */

@keyframes progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
}

/* ---------- Cipher scramble ---------- */

.cipher-text span {
  display: inline-block;
  animation: cipher-flip 1.6s steps(8) infinite;
}

@keyframes cipher-flip {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Reduced motion: switch it all off ---------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

  html.js .mockup-shell,
  html.js .mockup-tilt,
  html.js .scene-num {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .aurora span,
  .orb i,
  .marquee-row,
  .scroll-hint svg,
  .hero .gradient-text { animation: none !important; }

  .hero-ring,
  .cursor-glow,
  .mock-glare { display: none !important; }

  /* The progress bar stays (positional feedback) — JS sets it directly. */
  .scroll-progress { animation: none !important; }
}