/* vrc.dj  Fancy FX: reusable mouse-reactive aurora background + per-card
   spotlight/lift. Shared by /support and /roadmap (the FAQ ships its own
   baked-in variant). Driven by _js/fancy-fx.js, which writes
   --fx-mx / --fx-my (viewport-normalised, -1..1) on .fancy-fx-aurora and
   --spot-x / --spot-y (%) on the hovered [data-fancy-card].
   Everything degrades gracefully with JS off and is silenced under
   prefers-reduced-motion / hover:none. */

/* ─── Aurora field (fixed, sits behind page content) ─── */
.fancy-fx-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --fx-mx: 0;
  --fx-my: 0;
  animation: fxAuroraIn 1.4s var(--ease) both;
}

/* Wrapper = mouse parallax; ::before = autonomous slow drift. */
.fancy-fx-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.fancy-fx-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(64px);
  will-change: transform, opacity;
}

.fancy-fx-blob--1 {
  width: 48vmax; height: 48vmax;
  top: -14vmax; left: -8vmax;
  transform: translate3d(calc(var(--fx-mx) * 34px), calc(var(--fx-my) * 34px), 0);
}
.fancy-fx-blob--1::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 46%, transparent), transparent 66%);
  opacity: .55;
  animation: fxBlobDriftA 26s ease-in-out infinite alternate;
}

.fancy-fx-blob--2 {
  width: 40vmax; height: 40vmax;
  top: 8vmax; right: -10vmax; left: auto;
  transform: translate3d(calc(var(--fx-mx) * -52px), calc(var(--fx-my) * 40px), 0);
}
.fancy-fx-blob--2::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--scope-color-community, #38bdf8) 42%, transparent), transparent 66%);
  opacity: .42;
  animation: fxBlobDriftB 32s ease-in-out infinite alternate;
}

.fancy-fx-blob--3 {
  width: 34vmax; height: 34vmax;
  bottom: -12vmax; left: 24%;
  transform: translate3d(calc(var(--fx-mx) * 26px), calc(var(--fx-my) * -30px), 0);
}
.fancy-fx-blob--3::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--scope-color-tag, #a78bfa) 40%, transparent), transparent 66%);
  opacity: .4;
  animation: fxBlobDriftA 29s ease-in-out infinite alternate-reverse;
}

.fancy-fx-grain {
  position: absolute;
  inset: -2vmax;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
  transform: translate3d(calc(var(--fx-mx) * -12px), calc(var(--fx-my) * -12px), 0);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
[data-theme="light"] .fancy-fx-grain { opacity: .5; }

@keyframes fxAuroraIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fxBlobDriftA {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.12); }
}
@keyframes fxBlobDriftB {
  from { transform: translate3d(4%, 2%, 0) scale(1.08); }
  to   { transform: translate3d(-5%, -4%, 0) scale(.96); }
}

/* ─── Per-card spotlight + lift ─── */
.fancy-fx-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      320px circle at var(--spot-x, 50%) var(--spot-y, 0%),
      color-mix(in srgb, var(--accent) 18%, transparent),
      transparent 60%);
  transition: opacity .35s var(--ease);
}
[data-fancy-card] {
  position: relative;
}
[data-fancy-card]:hover .fancy-fx-spot,
[data-fancy-card]:focus-within .fancy-fx-spot {
  opacity: 1;
}
/* Keep real content above the decorative spotlight layer. */
[data-fancy-card] > *:not(.fancy-fx-spot) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fancy-fx-aurora { animation: none; }
  .fancy-fx-blob,
  .fancy-fx-blob::before,
  .fancy-fx-grain { animation: none !important; transition: none; }
  .fancy-fx-spot { transition: none; }
}

@media (hover: none) {
  .fancy-fx-spot { display: none; }
}