/* =========================================================
   ALPHA — FX layer (v2)
   Additive cinematic upgrade: aurora mesh background, pointer
   spotlight, scroll-reactive marquees, richer reveals, hero depth.
   Loads AFTER styles.css. 100% reduced-motion safe (see bottom).
   Touches ZERO commerce logic — pure visual polish.
   ========================================================= */

/* ---------- Aurora mesh background (drifting gold/silver light) ----------
   PERF: no parent filter + no blend mode — a fixed full-screen blur(42px) layer
   re-rasterized on every animation frame (the #1 idle GPU cost). The radial
   gradients are already soft, so the look survives at a fraction of the cost. */
.aurora { position: fixed; inset: -10vmax; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.aurora b { position: absolute; display: block; border-radius: 50%; opacity: .5; will-change: transform; }
.aurora .a1 { width: 46vmax; height: 46vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle at 50% 50%, rgba(201,162,39,.42), transparent 62%); animation: aFloat1 22s ease-in-out infinite; }
.aurora .a2 { width: 40vmax; height: 40vmax; right: -10vmax; top: -4vmax;
  background: radial-gradient(circle at 50% 50%, rgba(150,160,175,.40), transparent 62%); animation: aFloat2 27s ease-in-out infinite; }
.aurora .a3 { width: 52vmax; height: 52vmax; left: 18vmax; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(232,196,116,.32), transparent 64%); animation: aFloat3 31s ease-in-out infinite; }
.aurora .a4 { width: 34vmax; height: 34vmax; right: 6vmax; bottom: -10vmax;
  background: radial-gradient(circle at 50% 50%, rgba(201,162,39,.26), transparent 62%); animation: aFloat1 25s ease-in-out infinite reverse; }
@keyframes aFloat1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vmax,6vmax,0) scale(1.18); } }
@keyframes aFloat2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-7vmax,8vmax,0) scale(.88); } }
@keyframes aFloat3 { 0%,100% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(-6vmax,-9vmax,0) scale(1.2); } }
html[data-theme="dark"] .aurora b { mix-blend-mode: screen; opacity: .45; }

/* ---------- Pointer spotlight (desktop) — soft light follows cursor ---------- */
.spotlight { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .6s ease; mix-blend-mode: soft-light; will-change: background;
  background: radial-gradient(280px circle at var(--sx,50%) var(--sy,40%), rgba(201,162,39,.30), transparent 60%); }
.spotlight.on { opacity: 1; }
html[data-theme="dark"] .spotlight { mix-blend-mode: screen; }

/* ---------- Scroll-reactive marquees (velocity skew + smoothing) ---------- */
.marquee { will-change: transform; transition: transform .45s cubic-bezier(.16,1,.3,1); transform: skewX(0deg); }

/* ---------- Richer cinematic reveals (lift + scale; no blur filter —
   animating blur on ~94 catalog cards while scrolling caused jank) ---------- */
/* stronger entrance for section heads + cards */
.section-head.reveal { transform: translateY(34px) scale(.985); }
.feature.reveal, .pay.reveal, .review.reveal { transform: translateY(36px) scale(.96); }
/* settle rule must win over the custom transforms above (loaded after styles.css) */
.section-head.reveal.in,
.feature.reveal.in, .pay.reveal.in, .review.reveal.in { transform: none; }

/* ---------- Hero depth (parallax target hooks, JS-driven) ---------- */
.hero-fx, .logo-cloud { will-change: transform; }

/* ---------- Animated section divider sheen on kickers ---------- */
.kicker { position: relative; overflow: hidden; }
.kicker::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(115deg, transparent 40%, rgba(201,162,39,.45) 50%, transparent 60%);
  animation: kickerSheen 6s ease-in-out infinite; }
@keyframes kickerSheen { 0%,72% { transform: translateX(-130%); } 90%,100% { transform: translateX(130%); } }

/* ---------- Button shine on the big CTAs (extra gloss) ---------- */
.btn-lg { will-change: transform; }

/* ---------- Floating scroll cue under hero ---------- */
.scroll-cue { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1;
  width: 26px; height: 42px; border: 2px solid var(--hairline); border-radius: 999px; display: grid; place-items: start center;
  padding-top: 7px; opacity: .65; }
.scroll-cue i { width: 4px; height: 8px; border-radius: 4px; background: var(--gold-grad); animation: cueDrop 1.7s var(--out) infinite; }
@keyframes cueDrop { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* =========================================================
   Reduced-motion: neutralize EVERYTHING this file added.
   (styles.css already handles the base; this covers fx-only nodes.)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .aurora, .spotlight, .scroll-cue { display: none !important; }
  .aurora b, .kicker::after { animation: none !important; }
  .marquee { transform: none !important; transition: none !important; }
  .reveal { filter: none !important; }
  .reveal.in { filter: none !important; }
}