/* ============================================================
   CarVerdict — Landing FX
   New motion system for the landing page (desktop + mobile app
   home). Vanilla CSS, transform/opacity only, paired with
   landing-fx.js. Replaces the old landing-motion.css entirely.
   ============================================================ */

/* Page content sits above the ambient background. Header gets a higher
   z-index than the rest — it comes first in DOM order, so at equal
   z-index its dropdown/mega-menu would paint BELOW later content like the
   hero's floating cards (which carry their own z-index:2-4). Header must
   stay on top of everything below it. */
.scroll-prog { z-index: 9999; }
body > header { position: relative; z-index: 100; }
body > main, body > .lp-landing, body > footer.main-footer { position: relative; z-index: 1; }

/* ---------- Ambient background (hero only) ---------- */
.amb {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.amb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .18;
  will-change: transform;
}
.amb-orb.o1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(232,255,71,.2), transparent 70%);
  top: -170px; left: -130px;
  animation: fxDrift1 26s ease-in-out infinite;
}
.amb-orb.o2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(96,165,250,.15), transparent 70%);
  top: 26%; right: -170px;
  animation: fxDrift2 32s ease-in-out infinite;
}
.amb-orb.o3 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(167,139,250,.13), transparent 70%);
  bottom: -250px; left: 28%;
  animation: fxDrift3 36s ease-in-out infinite;
}
@keyframes fxDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(110px,70px) scale(1.08); }
  66% { transform: translate(30px,150px) scale(.95); }
}
@keyframes fxDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-130px,80px) scale(1.12); }
}
@keyframes fxDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40% { transform: translate(80px,-60px) scale(1.06); }
  75% { transform: translate(-70px,35px) scale(.94); }
}
.amb-noise {
  position: absolute; inset: 0; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Drifting particles — slow glowing dust motes, like light
   catching particles in a headlight beam. ---------- */
.amb-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #E8FF47;
  box-shadow: 0 0 8px 2px rgba(232,255,71,.5);
  opacity: 0;
  will-change: transform, opacity;
}
.amb-particle.p1 { top: 20%; left: 12%; animation: fxParticle 14s ease-in-out 0s   infinite; }
.amb-particle.p2 { top: 65%; left: 22%; animation: fxParticle 18s ease-in-out 2s   infinite; box-shadow: 0 0 8px 2px rgba(96,165,250,.5); background: #60a5fa; }
.amb-particle.p3 { top: 40%; left: 48%; animation: fxParticle 16s ease-in-out 4s   infinite; }
.amb-particle.p4 { top: 78%; left: 60%; animation: fxParticle 20s ease-in-out 1s   infinite; box-shadow: 0 0 8px 2px rgba(167,139,250,.5); background: #a78bfa; }
.amb-particle.p5 { top: 10%; left: 72%; animation: fxParticle 15s ease-in-out 6s   infinite; }
.amb-particle.p6 { top: 52%; left: 85%; animation: fxParticle 19s ease-in-out 3s   infinite; }
.amb-particle.p7 { top: 30%; left: 35%; animation: fxParticle 17s ease-in-out 8s   infinite; box-shadow: 0 0 8px 2px rgba(96,165,250,.5); background: #60a5fa; }
.amb-particle.p8 { top: 85%; left: 15%; animation: fxParticle 13s ease-in-out 5s   infinite; }
@keyframes fxParticle {
  0%   { transform: translate(0,0) scale(.6); opacity: 0; }
  10%  { opacity: .8; }
  50%  { transform: translate(40px,-90px) scale(1); opacity: .5; }
  90%  { opacity: 0; }
  100% { transform: translate(70px,-170px) scale(.6); opacity: 0; }
}

/* ---------- Scroll-triggered header ---------- */
header.cv-shrunk {
  background: rgba(5,5,5,.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.35);
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow, .8s) var(--ease-out-premium, cubic-bezier(.16,1,.3,1)),
              transform var(--dur-slow, .8s) var(--ease-out-premium, cubic-bezier(.16,1,.3,1));
  transition-delay: var(--fx-delay, 0s);
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="scale"] { transform: translateY(20px) scale(.96); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].fx-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Magnetic elements (JS sets --mx/--my via transform) ---------- */
[data-magnetic] {
  transition: transform .35s var(--ease-out-premium, cubic-bezier(.16,1,.3,1));
  will-change: transform;
}

/* ---------- Cursor-follow glow (tool cards, dropdown items) ---------- */
.tool-card, .lp-tool {
  position: relative;
  overflow: hidden;
}
.tool-card::before, .lp-tool::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(232,255,71,.09), transparent 42%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.tool-card:hover::before, .lp-tool:hover::before { opacity: 1; }

/* ---------- Filter transition (tools grid) ---------- */
.lp-tool {
  transition: opacity .3s ease, transform .3s var(--ease-out-premium, cubic-bezier(.16,1,.3,1)),
              border-color .3s, box-shadow .3s;
}
.lp-tool.fx-hide {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}

/* ---------- Hero accent shimmer ---------- */
.hero-accent, h1 .lime {
  background: linear-gradient(100deg, #E8FF47 0%, #ffffff 30%, #E8FF47 55%, #c6e000 80%, #E8FF47 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fxShimmer 5s linear infinite;
}
@keyframes fxShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Eyebrow sweep ---------- */
.cvx-eyebrow, .lp-eyebrow {
  position: relative;
  overflow: hidden;
}
.cvx-eyebrow::before, .lp-eyebrow::before {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(232,255,71,.16), transparent);
  animation: fxSweep 4s ease-in-out infinite;
}
@keyframes fxSweep { 0% { left: -60%; } 55%,100% { left: 130%; } }

/* ---------- Final CTA breathing glow (scoped, not global) ---------- */
.cv2-final .cv2-btn-primary,
.gr-promo .cvx-btn-primary {
  animation: fxBreathe 3.2s ease-in-out infinite;
}
@keyframes fxBreathe {
  0%,100% { box-shadow: 0 8px 28px rgba(232,255,71,.18); }
  50%     { box-shadow: 0 10px 40px rgba(232,255,71,.35); }
}

/* ---------- Scroll progress bar ---------- */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #E8FF47, #c6e000);
  transition: width .1s linear;
}

/* ---------- Quiz leaderboard row stagger ---------- */
.qspot-lb-row {
  opacity: 0;
  transform: translateY(10px);
  animation: fxRowIn .5s var(--ease-out-premium, cubic-bezier(.16,1,.3,1)) forwards;
}

/* ---------- Reduced motion — one consolidated override ---------- */
@media (prefers-reduced-motion: reduce) {
  .amb-orb, .amb-particle,
  .hero-accent, h1 .lime, .cvx-eyebrow::before, .lp-eyebrow::before,
  .cv2-final .cvx-btn-primary, .gr-promo .cvx-btn-primary, .qspot-lb-row, [data-reveal] {
    animation: none !important;
    transition: none !important;
  }
  .hero-accent, h1 .lime { -webkit-text-fill-color: #E8FF47; color: #E8FF47; }
  [data-reveal], .qspot-lb-row { opacity: 1 !important; transform: none !important; }
  [data-magnetic] { transform: none !important; }
}
@keyframes fxRowIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Mobile ambient tuning ---------- */
@media (max-width: 900px) {
  .amb-orb { opacity: .1; }
  .amb-orb.o1 { width: 340px; height: 340px; top: -90px; left: -70px; }
  .amb-orb.o2 { width: 280px; height: 280px; }
  .amb-orb.o3 { width: 380px; height: 380px; }
  /* Trim to half the particles on mobile — same cinematic effect, lighter
     DOM/paint cost on weaker devices. */
  .amb-particle.p2, .amb-particle.p4, .amb-particle.p6, .amb-particle.p8 {
    display: none;
  }
}