/* ═══════════════════════════════════════════════════════════════
   REONIX MOTION LAYER — motion.css
   Additive only. Animates transform + opacity (+ box-shadow/filter
   on hover, which never touch layout). Safe to remove at any time.
   Tweak guide: every duration/easing is a literal you can edit.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared easing (edit once, applies everywhere below) ── */
:root {
  --mx-ease: cubic-bezier(.2, .7, .2, 1);   /* confident, no bounce */
  --mx-fast: 220ms;
  --mx-med: 420ms;
}

/* ── 1. HERO HEADLINE — word-level rise (JS splits words) ──
   Base state is VISIBLE; .mx-words-ready is added by JS only
   after the spans exist, so content never hides if JS fails. */
.mx-word {
  display: inline-block;
  will-change: transform, opacity;
}
.mx-words-ready .mx-word {
  opacity: 0;
  transform: translateY(0.55em);
  animation: mxWordRise 640ms var(--mx-ease) forwards;
  animation-delay: calc(120ms + var(--mx-i, 0) * 70ms); /* 70ms stagger */
}
@keyframes mxWordRise {
  to { opacity: 1; transform: translateY(0); }
}
/* cancel the old whole-line animation when words are split */
h1.mx-words-ready .line1 { animation: none; opacity: 1; }

/* ── 2. CTA — soft lime glow + slight scale on hover ── */
.cta-spark, .nav-cta, .faq-book, .wa-fab {
  transition:
    transform var(--mx-fast) var(--mx-ease),
    box-shadow var(--mx-med) ease;
}
.cta-spark:hover, .nav-cta:hover, .faq-book:hover {
  transform: translateY(-1px) scale(1.015);           /* slight lift */
  box-shadow: 0 0 0 1px rgba(244, 255, 75, 0.25),
              0 10px 34px -10px rgba(244, 255, 75, 0.45); /* soft glow */
}
.cta-spark:active, .nav-cta:active, .faq-book:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 90ms;
}

/* ── 3. MAGNETIC HOVER (JS moves via CSS vars, transform only) ── */
.mx-magnet {
  transform: translate(var(--mx-x, 0), var(--mx-y, 0));
  transition: transform 340ms var(--mx-ease);
}

/* ── 4. FOCUS STATES — clean, brand-colored, keyboard only ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid #F4FF4B;
  outline-offset: 3px;
  border-radius: 4px;
}
.nav-cta:focus-visible, .cta-spark:focus-visible,
.faq-book:focus-visible, .wa-fab:focus-visible {
  outline-offset: 4px;
  border-radius: 9999px;
}

/* ── 5. NAV — soft shadow when condensed/scrolled ── */
.nav.scrolled {
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45);
}

/* ── 6. BEFORE/AFTER — one-time attention pulse on the knob
   (class added by JS when the stage first enters view) ── */
.mx-ba-pulse .ba-knob {
  animation: mxKnobPulse 900ms var(--mx-ease) 2; /* pulses twice, stops */
}
@keyframes mxKnobPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.22); }
}

/* ── 7. HEADING MASK REVEAL — h2 rises out of an invisible mask
   (JS wraps heading text; base state visible without JS) ── */
.mx-mask {
  display: block;
  overflow: hidden;
}
.mx-mask > .mx-mask-inner {
  display: block;
  will-change: transform;
}
.mx-mask.mx-armed > .mx-mask-inner {
  transform: translateY(110%);
  opacity: 0;
}
.mx-mask.mx-in > .mx-mask-inner {
  transform: translateY(0);
  opacity: 1;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1), opacity 500ms ease; /* expo-out */
}

/* ── 8. HERO MEDIA — slow parallax drift (JS drives --mx-py) ── */
.hero-media img {
  transform: translateY(var(--mx-py, 0px)) scale(1.02);
  will-change: transform;
}

/* ── 9. MARQUEE VELOCITY SKEW — tracks lean with scroll speed ── */
.mx-skew {
  transform: skewX(var(--mx-skew, 0deg));
  will-change: transform;
}

/* ── 10. WORKS TILES — 3D tilt toward cursor (fine pointers) ── */
.works-tile.mx-tilt {
  transform: perspective(900px) rotateX(var(--mx-rx, 0deg)) rotateY(var(--mx-ry, 0deg)) translateY(var(--mx-ty, 0px));
  transition: transform 480ms cubic-bezier(.2, .7, .2, 1), box-shadow 420ms ease;
}

/* ── 11. BEFORE/AFTER STAGE — settles in with a soft scale ── */
.ba-stage.mx-scale-in {
  transform: scale(0.965);
  opacity: 0.4;
}
.ba-stage.mx-scale-in.mx-in {
  transform: scale(1);
  opacity: 1;
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1), opacity 700ms ease;
}

/* ── 12. CURSOR FLUID TRAIL — canvas overlay (JS-driven) ── */
#mx-trail {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ── 13. BA CAROUSEL CROSSFADE — images dip out, swap, dip in ── */
.ba-layer img { transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.7,.2,1); }
.ba-stage.mx-fade .ba-layer img { opacity: 0; transform: scale(1.02); }

/* ── 14. TESTIMONIAL CARDS — smooth layered soft shadow ──
   Multiple stacked shadows = one diffuse, natural falloff. */
.tst-card {
  box-shadow:
    0 1px 2px rgba(22, 53, 43, 0.04),
    0 4px 8px rgba(22, 53, 43, 0.04),
    0 12px 24px rgba(22, 53, 43, 0.05),
    0 24px 48px -12px rgba(22, 53, 43, 0.07);
}
.tst-card:hover {
  box-shadow:
    0 2px 4px rgba(22, 53, 43, 0.05),
    0 8px 16px rgba(22, 53, 43, 0.06),
    0 20px 36px rgba(22, 53, 43, 0.08),
    0 36px 64px -16px rgba(22, 53, 43, 0.14);
}

/* ── 15. UNCLIP SHADOWS — marquee containers use overflow:hidden,
   which was cutting card shadows at top/bottom. Give the tracks
   breathing room and pull the container back the same amount so
   the layout doesn't shift. ── */
.tst-track { padding-top: 56px; padding-bottom: 64px; }
.tst-marquee { margin-top: -48px; margin-bottom: -56px; }
.works-track { padding-top: 12px; padding-bottom: 56px; }
.works-marquee { margin-top: -12px; margin-bottom: -56px; }

/* ── REDUCED MOTION — soften/disable everything above ── */
@media (prefers-reduced-motion: reduce) {
  .mx-words-ready .mx-word { animation: none; opacity: 1; transform: none; }
  .mx-magnet { transform: none !important; transition: none; }
  .mx-ba-pulse .ba-knob { animation: none; }
  .cta-spark:hover, .nav-cta:hover, .faq-book:hover { transform: none; }
  .mx-mask.mx-armed > .mx-mask-inner { transform: none; opacity: 1; }
  .hero-media img { transform: none; }
  .mx-skew { transform: none; }
  .works-tile.mx-tilt { transform: none; }
  .ba-stage.mx-scale-in { transform: none; opacity: 1; }
  #mx-trail { display: none; }
  .ba-layer img { transition: none; }
}