/* ============================================================
   NeurAlpha motion.css  (ADDITIVE shared motion + theme layer)
   Phase A: reveal / stagger / scroll-progress / hover micro-interactions
   Phase B: hero aurora, headline wipe, shimmer, mascot, step rings
   RULES baked in:
     - animate ONLY transform / opacity (GPU)
     - prefers-reduced-motion: full static, instant final state
     - .motion-lite: aurora + heavy blur disabled (low-end / saveData)
     - lazy below-the-fold via IntersectionObserver (.in-view added by JS)
     - never blocks first paint; aurora starts after load
   Uses canonical live tokens: --a / --ad (amber), --amber/--amber-deep aliases.
   ============================================================ */

/* ---------- 0. tokens / fallbacks (do not override live theme) ---------- */
:root{
  --mo-ease: cubic-bezier(.22,.61,.36,1);
  --mo-dur: .62s;
  --mo-amber: var(--amber, var(--a, #F59E0B));
  --mo-amber-deep: var(--amber-deep, var(--ad, #B45309));
}

/* ============================================================
   1. SCROLL PROGRESS BAR  (transform scaleX only)
   ============================================================ */
.motion-progress{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%;
  max-width: 480px;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--mo-amber), var(--mo-amber-deep));
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  will-change: transform;
  opacity: .92;
}
/* JS sets --mo-scroll (0..1); we drive scaleX off a custom prop via inline style. */

/* ============================================================
   2. REVEAL  ([data-reveal] -> .in-view)
   transform + opacity only; stagger via --i index
   ============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--mo-dur) var(--mo-ease),
    transform var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: transform, opacity;
}
[data-reveal="fade"]{ transform: none; }
[data-reveal="slide-left"]{ transform: translateX(-22px); }
[data-reveal="slide-right"]{ transform: translateX(22px); }
[data-reveal="scale"]{ transform: scale(.94); }

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

/* ============================================================
   3. CARD / BUTTON MICRO-INTERACTIONS  (sheen + lift)
   Sheen is an ::before sweep using transform translateX only.
   ============================================================ */
.mo-sheen{ position: relative; overflow: hidden; }
.mo-sheen::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-180%) skewX(-12deg);
  opacity: 0;
  transition: transform .7s var(--mo-ease), opacity .3s ease;
  will-change: transform;
}
body.dark .mo-sheen::before{
  background: linear-gradient(
    100deg,
    rgba(245,158,11,0) 0%,
    rgba(245,158,11,.22) 50%,
    rgba(245,158,11,0) 100%
  );
}
.mo-sheen:hover::before,
.mo-sheen:focus-visible::before{
  transform: translateX(220%) skewX(-12deg);
  opacity: 1;
}

/* Lift on hover (transform only; never touches layout) */
.mo-lift{ transition: transform .25s var(--mo-ease), box-shadow .25s ease; will-change: transform; }
.mo-lift:hover{ transform: translateY(-3px); }

/* Button press / glow micro-interaction (transform + opacity safe) */
.mo-press{ transition: transform .15s var(--mo-ease); }
.mo-press:active{ transform: scale(.97); }

/* ============================================================
   4. HERO AURORA  (drifting amber radial gradients)
   absolute layer behind hero content; GPU float; parallax via --px/--py
   disabled under .motion-lite + reduced-motion.
   ============================================================ */
.hero{ position: relative; isolation: isolate; }
.mo-aurora{
  position: absolute;
  inset: -20% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.mo-aurora.mo-on{ opacity: 1; }
.mo-aurora .mo-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
  /* parallax offsets (set by JS) default to 0 */
  --px: 0px;
  --py: 0px;
}
.mo-aurora .b1{
  width: 56%; height: 60%;
  top: -8%; left: 8%;
  background: radial-gradient(circle at 50% 50%, rgba(245,158,11,.40), rgba(245,158,11,0) 70%);
  animation: moDrift1 18s ease-in-out infinite;
}
.mo-aurora .b2{
  width: 48%; height: 52%;
  top: 14%; right: 2%;
  background: radial-gradient(circle at 50% 50%, rgba(217,119,6,.32), rgba(217,119,6,0) 70%);
  animation: moDrift2 22s ease-in-out infinite;
}
.mo-aurora .b3{
  width: 44%; height: 46%;
  bottom: -6%; left: 26%;
  background: radial-gradient(circle at 50% 50%, rgba(251,191,36,.30), rgba(251,191,36,0) 72%);
  animation: moDrift3 26s ease-in-out infinite;
}
body.dark .mo-aurora .b1{ background: radial-gradient(circle at 50% 50%, rgba(245,158,11,.28), rgba(245,158,11,0) 70%); }
body.dark .mo-aurora .b2{ background: radial-gradient(circle at 50% 50%, rgba(217,119,6,.24), rgba(217,119,6,0) 70%); }
body.dark .mo-aurora .b3{ background: radial-gradient(circle at 50% 50%, rgba(251,191,36,.22), rgba(251,191,36,0) 72%); }

@keyframes moDrift1{
  0%,100%{ transform: translate3d(var(--px),var(--py),0) scale(1); }
  50%{ transform: translate3d(calc(var(--px) + 18px), calc(var(--py) + 22px), 0) scale(1.08); }
}
@keyframes moDrift2{
  0%,100%{ transform: translate3d(var(--px),var(--py),0) scale(1.04); }
  50%{ transform: translate3d(calc(var(--px) - 22px), calc(var(--py) + 14px), 0) scale(.96); }
}
@keyframes moDrift3{
  0%,100%{ transform: translate3d(var(--px),var(--py),0) scale(1); }
  50%{ transform: translate3d(calc(var(--px) + 14px), calc(var(--py) - 18px), 0) scale(1.1); }
}

/* keep hero children above the aurora (additive; existing layout unchanged) */
.hero > *{ position: relative; z-index: 1; }

/* ============================================================
   5. HEADLINE wipe-up (overflow mask per line)
   We wrap each visual line in .mo-h1-line > .mo-h1-inner (additive, same text).
   ============================================================ */
.mo-h1-line{
  display: block;
  overflow: hidden;
  /* keep descenders visible */
  padding-bottom: .06em;
  margin-bottom: -.06em;
}
.mo-h1-inner{
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .75s var(--mo-ease), opacity .75s var(--mo-ease);
  will-change: transform, opacity;
}
.hero.mo-h1-go .mo-h1-line:nth-child(1) .mo-h1-inner{ transition-delay: .10s; }
.hero.mo-h1-go .mo-h1-line:nth-child(2) .mo-h1-inner{ transition-delay: .24s; }
.hero.mo-h1-go .mo-h1-inner{
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   6. SHIMMER on "Real results." (background-clip:text amber sweep)
   ============================================================ */
.mo-shimmer{
  background: linear-gradient(
    100deg,
    var(--mo-amber-deep) 0%,
    var(--mo-amber) 28%,
    #FDE68A 48%,
    var(--mo-amber) 68%,
    var(--mo-amber-deep) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: moShimmer 3.4s linear infinite;
}
@keyframes moShimmer{
  0%{ background-position: 180% 0; }
  100%{ background-position: -80% 0; }
}

/* ============================================================
   8. STEP RINGS  (.hc gets an SVG ring drawn via stroke-dashoffset,
   number badge pops after). Ring injected by JS as .mo-ring svg.
   We KEEP the existing 2px amber border but make the drawing ring overlay it;
   the static border stays as the reduced-motion / lite fallback.
   ============================================================ */
.hc{ position: relative; }
.mo-ring{
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  transform: rotate(-90deg);   /* start ring at top */
  overflow: visible;
}
.mo-ring circle{
  fill: none;
  stroke: var(--mo-amber);
  stroke-width: 2;
  stroke-linecap: round;
  /* dash set inline by JS to circumference; we animate offset */
  stroke-dashoffset: var(--mo-ring-len, 999);
  transition: stroke-dashoffset 1s var(--mo-ease);
}
.hc.mo-ring-go .mo-ring circle{ stroke-dashoffset: 0; }
/* number badge pop after ring draws */
.hc .hn{
  transition: transform .4s var(--mo-ease), opacity .4s ease;
}
.hc.mo-ring-armed .hn{ transform: scale(.4); opacity: 0; }
.hc.mo-ring-go .hn{ transform: scale(1); opacity: 1; transition-delay: .85s; }
/* when ring overlay is active, hide the original static border to avoid double line */
.hc.mo-ring-armed{ border-color: transparent; }

/* ============================================================
   9. GUARD: .motion-lite  (low-end / saveData)
   disable aurora + heavy blur; keep cheap reveals/shimmer.
   ============================================================ */
body.motion-lite .mo-aurora{ display: none !important; }
body.motion-lite .mo-blob{ filter: blur(0) !important; }

/* ============================================================
   10. prefers-reduced-motion  (full static, instant final state)
   placed last so it wins; disables EVERY animation/transition.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
  .mo-h1-inner{ transform: none !important; opacity: 1 !important; }
  .mo-aurora{ display: none !important; }
  .mo-shimmer{
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--mo-amber) !important;
    color: var(--mo-amber) !important;
  }
  .mo-ring{ display: none !important; }
  .hc.mo-ring-armed{ border-color: var(--a) !important; }
  .hc.mo-ring-armed .hn{ transform: none !important; opacity: 1 !important; }
  .motion-progress{ display: none !important; }
  .mo-sheen::before{ display: none !important; }
  .mo-lift:hover{ transform: none !important; }
}