/* Victory — site-wide premium FX layer (aurora, grain, sheen, scroll reveal) */

:root {
  --vfx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ───────────────────────── Aurora background ─────────────────────────
   Injected by victory-fx.js as <div class="vfx-aurora"> (first body child).
   Sits above the page background, behind all content (z-index:-1). */
.vfx-aurora {
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(37, 99, 235, 0.22), transparent 60%),
    radial-gradient(34vmax 34vmax at 88% 14%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(42vmax 42vmax at 72% 96%, rgba(14, 165, 233, 0.16), transparent 62%),
    radial-gradient(30vmax 30vmax at 24% 88%, rgba(99, 102, 241, 0.12), transparent 60%);
  filter: blur(12px) saturate(118%);
  opacity: 0.9;
  will-change: transform;
  animation: vfxAuroraDrift 28s var(--vfx-ease) infinite alternate;
}

@keyframes vfxAuroraDrift {
  0% {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.02) rotate(0deg);
  }
  100% {
    transform: translate3d(2.5%, 2%, 0) scale(1.08) rotate(3deg);
  }
}

/* Faint moving conic shimmer for extra life on big empty areas */
.vfx-aurora::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(56, 189, 248, 0.05) 90deg,
    transparent 180deg,
    rgba(99, 102, 241, 0.05) 270deg,
    transparent 360deg
  );
  filter: blur(40px);
  animation: vfxSpin 40s linear infinite;
}

@keyframes vfxSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ───────────────────────── Film grain overlay ─────────────────────────
   Injected as <div class="vfx-grain">. Above content, never blocks clicks. */
.vfx-grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ───────────────────────── Card sheen / depth polish ─────────────────────────
   A faint top-edge light line on glass surfaces — the "catches the light" look. */
.vds-glass,
.card,
.section-card,
.metric-tile,
.membership-card,
.prm-checkout,
.prm-feature-card,
.prm-plan {
  position: relative;
}

.vds-glass::before,
.section-card::before,
.metric-tile::before,
.membership-card::before,
.prm-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0) 38%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

/* ───────────────────────── Card hover lift ─────────────────────────
   Subtle, consistent feedback. Big form panels get a border/shadow
   highlight only (no transform) so inputs don't jump under the cursor. */
.section-card,
.membership-card,
.prm-feature-card {
  transition:
    border-color var(--vds-duration, 0.22s) var(--vfx-ease),
    box-shadow var(--vds-duration, 0.22s) var(--vfx-ease),
    transform var(--vds-duration, 0.22s) var(--vfx-ease);
}

.section-card:hover,
.membership-card:hover {
  border-color: var(--vds-border-strong);
  box-shadow: var(--vds-shadow-glow);
}

.prm-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--vds-border-strong);
  box-shadow: var(--vds-shadow-glow);
}

/* ───────────────────────── Skeleton loading ─────────────────────────
   Add .vfx-skeleton via JS while data is fetching; remove on render. */
.vfx-skeleton {
  color: transparent !important;
  display: inline-block;
  min-width: 3ch;
  border-radius: 6px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(125, 211, 252, 0.18) 50%,
    rgba(255, 255, 255, 0.05) 70%
  );
  background-size: 200% 100%;
  animation: vfxShimmer 1.25s linear infinite;
}

@keyframes vfxShimmer {
  to {
    background-position: -200% 0;
  }
}

/* ───────────────────────── Page transition ─────────────────────────
   victory-fx.js adds .vfx-leaving to <body> just before a same-origin
   navigation so pages cross-fade instead of hard-cutting. */
body.vfx-leaving {
  opacity: 0;
  transition: opacity 0.16s var(--vfx-ease);
}

/* ───────────────────────── Scroll reveal ─────────────────────────
   JS adds .fx-reveal (hides) then .fx-in (reveals). Fail-open:
   if JS never runs, nothing is hidden. */
.fx-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--vfx-ease),
    transform 0.7s var(--vfx-ease);
  will-change: opacity, transform;
}

.fx-reveal.fx-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vfx-aurora,
  .vfx-aurora::after {
    animation: none;
  }

  .vfx-skeleton {
    animation: none;
  }

  .prm-feature-card:hover {
    transform: none;
  }

  body.vfx-leaving {
    opacity: 1;
    transition: none;
  }

  .fx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}