/* ── Scroll reveal ── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 760ms ease, transform 760ms var(--spring);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── h2 kinetic typography (per-word mask rise + gradient sweep) ── */
.section-head h2 { overflow: hidden; }
.h2-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.h2-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 700ms var(--spring);
}
html.js .section-head[data-reveal] h2 { opacity: 1; transform: none; }
html.js .section-head[data-reveal]:not(.is-visible) .h2-word-inner { transform: translateY(110%); }
html.js .section-head[data-reveal].is-visible .h2-word-inner { transform: translateY(0); }
.h2-word:nth-child(1) .h2-word-inner { transition-delay: 60ms; }
.h2-word:nth-child(3) .h2-word-inner { transition-delay: 160ms; }
.h2-word:nth-child(5) .h2-word-inner { transition-delay: 260ms; }
.h2-word:nth-child(7) .h2-word-inner { transition-delay: 360ms; }
.h2-word:nth-child(9) .h2-word-inner { transition-delay: 460ms; }
/* gradient sweep on reveal */
html.js .section-head[data-reveal].is-visible h2 {
  animation: h2-sweep 1400ms var(--spring) 120ms;
}
@keyframes h2-sweep {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* ── elevated reveal variants (lightweight, by element type) ── */
/* product grid: 3D stage rise */
html.js .product-grid[data-reveal],
html.js .product-grid [data-reveal] { transform: translateY(50px) scale(.94); }
html.js .product-grid.is-visible,
html.js .product-grid [data-reveal].is-visible { transform: translateY(0) scale(1); }

/* scenario split: split-open (left slides, right scales from right) */
html.js .scenario-split[data-reveal] { transform: translateY(30px); }
html.js .scenario-split[data-reveal] .scenario-list { transform: translateX(-40px); opacity: 0; transition: transform 700ms var(--spring) 80ms, opacity 700ms ease 80ms; }
html.js .scenario-split[data-reveal] .scenario-panel { transform: translateX(40px) scale(.97); opacity: 0; transition: transform 700ms var(--spring) 160ms, opacity 700ms ease 160ms; }
html.js .scenario-split[data-reveal].is-visible .scenario-list { transform: translateX(0); opacity: 1; }
html.js .scenario-split[data-reveal].is-visible .scenario-panel { transform: translateX(0) scale(1); opacity: 1; }

/* ticker: horizontal curtain */
html.js .ticker-wrap[data-reveal] { clip-path: inset(0 50% 0 50%); opacity: 0; transition: clip-path 800ms var(--spring), opacity 800ms ease; }
html.js .ticker-wrap[data-reveal].is-visible { clip-path: inset(0 0 0 0); opacity: 1; }

/* CTA card: rise + glow pulse */
html.js .cta-card[data-reveal] { transform: translateY(50px); }
html.js .cta-card[data-reveal].is-visible { transform: translateY(0); animation: cta-glow 1200ms var(--spring) 300ms; }
@keyframes cta-glow {
  0% { box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 0 0 0 var(--brand-glow); }
  40% { box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 0 60px 8px var(--brand-glow); }
  100% { box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 0 0 0 transparent; }
}

/* hero copy: orchestrated entrance (badge drop, eyebrow slide+blur, lead fade, buttons stagger) */
html.js .hero-copy[data-reveal] .hero-badge { transform: translateY(-14px); opacity: 0; transition: transform 600ms var(--spring), opacity 600ms ease; }
html.js .hero-copy[data-reveal] .eyebrow { transform: translateX(-24px); opacity: 0; filter: blur(8px); transition: transform 700ms var(--spring) 80ms, opacity 600ms ease 80ms, filter 600ms ease 80ms; }
html.js .hero-copy[data-reveal] .hero-lead { transform: translateY(20px); opacity: 0; transition: transform 700ms var(--spring) 320ms, opacity 700ms ease 320ms; }
html.js .hero-copy[data-reveal] .hero-actions { transform: translateY(20px); opacity: 0; transition: transform 700ms var(--spring) 420ms, opacity 700ms ease 420ms; }
html.js .hero-copy[data-reveal] .hero-actions .button:nth-child(2) { transition-delay: 500ms, 500ms; }
html.js .hero-copy[data-reveal].is-visible .hero-badge { transform: translateY(0); opacity: 1; }
html.js .hero-copy[data-reveal].is-visible .eyebrow { transform: translateX(0); opacity: 1; filter: blur(0); }
html.js .hero-copy[data-reveal].is-visible .hero-lead { transform: translateY(0); opacity: 1; }
html.js .hero-copy[data-reveal].is-visible .hero-actions { transform: translateY(0); opacity: 1; }
/* hero h1 line mask rise */
html.js .hero-copy[data-reveal] h1 { overflow: hidden; }
html.js .hero-copy[data-reveal] h1 br { display: block; content: ""; }

/* ── Ticker marquee ── */
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ticker-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ── Terminal cursor blink ── */
@keyframes cursor-blink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

/* ── Terminal line cascade ── */
@keyframes term-line-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Status pulse dot ── */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ── Flowing code lines (product featured card decoration) ── */
@keyframes code-flow {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ── Connector flow (capability zigzag) ── */
@keyframes flow-dash {
  to { stroke-dashoffset: -20; }
}

/* ── First-screen fade in ── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
body { animation: page-enter 800ms var(--spring); }

/* ── Scenario panel transition ── */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Brand gradient shimmer on h1 ── */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Aurora mesh background animations ── */
@keyframes mesh-shift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3%, -2%) scale(1.04); }
  66% { transform: translate(-2%, 3%) scale(.98); }
}
@keyframes aurora-flow-1 {
  0%, 100% { transform: translateX(-8%) rotate(-12deg); opacity: .5; }
  50% { transform: translateX(12%) rotate(-14deg); opacity: .7; }
}
@keyframes aurora-flow-2 {
  0%, 100% { transform: translateX(6%) rotate(8deg); opacity: .4; }
  50% { transform: translateX(-10%) rotate(6deg); opacity: .6; }
}
@keyframes aurora-flow-3 {
  0%, 100% { transform: translateX(-4%) rotate(-6deg); opacity: .35; }
  50% { transform: translateX(8%) rotate(-8deg); opacity: .55; }
}
@keyframes grid-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: .85; }
}
@keyframes depth-drift {
  0%, 100% { transform: translate3d(-1%, 0, 0) rotate(-1deg); opacity: .34; }
  45% { transform: translate3d(2%, -2%, 0) rotate(1deg); opacity: .5; }
  75% { transform: translate3d(0, 2%, 0) rotate(.4deg); opacity: .42; }
}
@keyframes floor-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 132px 132px, 132px 132px; }
}
@keyframes orbit-spin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.04); }
  to { transform: rotate(360deg) scale(1); }
}
@keyframes orbit-spin-rev {
  from { transform: rotate(360deg) scale(1.02); }
  50% { transform: rotate(180deg) scale(.96); }
  to { transform: rotate(0deg) scale(1.02); }
}
@keyframes bg-scan {
  0%, 42% { transform: translateY(-80%); opacity: 0; }
  52% { opacity: .48; }
  72%, 100% { transform: translateY(80%); opacity: 0; }
}
@keyframes widget-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -18px, 0) rotate(1.4deg); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
  .mesh-layer, .aurora-band, .grid-noise, .page-shell::before, .page-shell::after,
  .bg-orbit, .bg-scanline, .bg-widget { animation: none !important; }
  .spotlight { display: none !important; }
}