/* ==========================================================================
   1800GEEK — Enhancement layer (v2 motion polish)
   Ported from 21st.dev Magic concepts into the static command-center system:
   animated aurora, drifting particle field, perspective grid floor,
   rotating keyword, gradient-text shimmer, spotlight + magnetic interactions,
   marquee trust strip, richer scroll reveals. Fully reduced-motion safe.
   ========================================================================== */

/* ---- Hero FX stack (works in .hero and .lp-hero) ---------------------- */
.hero, .lp-hero { isolation: isolate; }
.hero-fx {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  pointer-events: none; contain: strict;
}
.hero-fx > * { position: absolute; }

/* Drifting particle field (JS-rendered canvas) */
.fx-particles { inset: 0; width: 100%; height: 100%; opacity: .6; }

/* Aurora — soft moving color light, masked to the upper-right */
.fx-aurora {
  inset: -30%;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 72% 8%, #000 8%, transparent 68%);
          mask-image: radial-gradient(ellipse 70% 60% at 72% 8%, #000 8%, transparent 68%);
}
.fx-aurora::before, .fx-aurora::after {
  content: ""; position: absolute; inset: 0; border-radius: 46%;
  filter: blur(58px); mix-blend-mode: screen; will-change: transform;
}
.fx-aurora::before {
  background: conic-gradient(from 120deg at 52% 46%,
    rgba(59,130,246,0), rgba(53,230,255,.55), rgba(139,92,246,.42),
    rgba(59,130,246,.30), rgba(53,230,255,0));
  opacity: .55; animation: auroraSpin 30s linear infinite;
}
.fx-aurora::after {
  background: radial-gradient(closest-side at 34% 38%, rgba(53,230,255,.42), transparent 70%),
              radial-gradient(closest-side at 70% 60%, rgba(139,92,246,.34), transparent 72%);
  opacity: .6; animation: auroraFloat 19s ease-in-out infinite alternate;
}
@keyframes auroraSpin { to { transform: rotate(360deg); } }
@keyframes auroraFloat { from { transform: translate3d(-4%,-3%,0) scale(1); } to { transform: translate3d(5%,4%,0) scale(1.12); } }

/* Tron-style perspective grid floor that pans toward the viewer */
.fx-grid-floor {
  left: -25%; right: -25%; bottom: -12%; height: 56%;
  background-image:
    linear-gradient(var(--line-bright) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-bright) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(440px) rotateX(66deg);
  transform-origin: bottom center; opacity: .16;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 78%);
          mask-image: linear-gradient(to top, #000, transparent 78%);
  animation: gridPan 7s linear infinite;
}
@keyframes gridPan { to { background-position: 0 44px; } }

/* ---- Rotating keyword ------------------------------------------------- */
.word-rotator { display: inline-block; position: relative; }
.word-rotator .word {
  display: inline-block;
  background: var(--grad-brand-soft); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform, opacity; animation: textShine 7s linear infinite;
}
.word-rotator .word.is-out { animation: wordOut .42s var(--ease) forwards; }
.word-rotator .word.is-in  { animation: wordIn  .52s var(--ease) forwards; }
@keyframes wordOut { to   { opacity: 0; transform: translateY(-38%) rotateX(62deg); } }
@keyframes wordIn  { from { opacity: 0; transform: translateY(38%)  rotateX(-62deg); } to { opacity: 1; transform: none; } }

/* Animated gradient shimmer on existing accents */
.hero h1 .accent, .grad-purple {
  background-size: 220% auto; animation: textShine 7s linear infinite;
}
@keyframes textShine { to { background-position: 220% center; } }

/* ---- Spotlight cards (cursor-following glow) -------------------------- */
.card { will-change: transform; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
              rgba(53,230,255,.16), transparent 58%);
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 0;
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }

/* ---- Magnetic CTA micro-motion (JS sets --tx/--ty) -------------------- */
.btn { will-change: transform; }
.btn-magnetic { transform: translate(var(--tx, 0), var(--ty, 0)); }

/* ---- Marquee trust strip --------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex; flex-wrap: nowrap; width: max-content; gap: 14px 40px;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-track .trust-item { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Richer scroll reveals (additive variants) ----------------------- */
.reveal-l { opacity: 0; transform: translateX(-34px); filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal-r { opacity: 0; transform: translateX(34px); filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal-scale { opacity: 0; transform: scale(.93); filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal-l.in, .reveal-r.in, .reveal-scale.in { opacity: 1; transform: none; filter: none; }

/* Stagger children of a revealed grid */
.stagger.in > * { animation: rise .6s var(--ease) both; }
.stagger.in > *:nth-child(1){ animation-delay:.04s } .stagger.in > *:nth-child(2){ animation-delay:.10s }
.stagger.in > *:nth-child(3){ animation-delay:.16s } .stagger.in > *:nth-child(4){ animation-delay:.22s }
.stagger.in > *:nth-child(5){ animation-delay:.28s } .stagger.in > *:nth-child(6){ animation-delay:.34s }
.stagger.in > *:nth-child(7){ animation-delay:.40s } .stagger.in > *:nth-child(8){ animation-delay:.46s }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---- Section divider scan beam (decorative top border on dark) -------- */
.section-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-bright), transparent);
  opacity: .7;
}

/* ---- Reduced-motion: hold everything still --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora::before, .fx-aurora::after, .fx-grid-floor,
  .word-rotator .word, .hero h1 .accent, .grad-purple,
  .marquee-track, .stagger.in > * { animation: none !important; }
  .marquee-track { transform: none; }
  .reveal-l, .reveal-r, .reveal-scale { opacity: 1; transform: none; filter: none; }
}