/* VengeanceUI-inspired effects, hand-ported for the CDN/React app.
   Dependency-free: CSS animations + a few mouse-driven custom properties.
   Paired with the AnimatedNumber / GlowCard / KineticLoader / MaskedAvatars
   helpers in ui.js. */

/* ── Cursor spotlight glow (Glow Border Card + Cursor Card) ──────────
   A soft primary-tinted radial that follows the cursor inside a card.
   The element needs `overflow-hidden` (the metric/hero cards already
   have it) so the glow clips to the rounded corners. */
.vu-glow { position: relative; }
.vu-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--vu-x, 50%) var(--vu-y, 50%),
    hsl(var(--primary) / 0.14),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.vu-glow:hover::before { opacity: 1; }
/* Keep real content above the glow layer. */
.vu-glow > * { position: relative; z-index: 1; }

/* ── Staggered grid entrance ─────────────────────────────────────────
   Direct children rise + fade in with an increasing delay. fill-mode
   `both` keeps them hidden until their delay starts. */
@keyframes vu-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vu-stagger > * { animation: vu-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.vu-stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.vu-stagger > *:nth-child(2)  { animation-delay: 0.09s; }
.vu-stagger > *:nth-child(3)  { animation-delay: 0.14s; }
.vu-stagger > *:nth-child(4)  { animation-delay: 0.19s; }
.vu-stagger > *:nth-child(5)  { animation-delay: 0.24s; }
.vu-stagger > *:nth-child(6)  { animation-delay: 0.29s; }
.vu-stagger > *:nth-child(7)  { animation-delay: 0.34s; }
.vu-stagger > *:nth-child(8)  { animation-delay: 0.39s; }
.vu-stagger > *:nth-child(9)  { animation-delay: 0.44s; }
.vu-stagger > *:nth-child(10) { animation-delay: 0.49s; }
.vu-stagger > *:nth-child(n+11) { animation-delay: 0.54s; }

/* ── Kinetic text loader ─────────────────────────────────────────────
   Each character bobs and brightens in sequence. */
@keyframes vu-kinetic {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}
.vu-kinetic-ch {
  display: inline-block;
  animation: vu-kinetic 1.1s ease-in-out infinite;
}

/* ── Profile page layout ─────────────────────────────────────────────
   The page was authored with Tailwind's lg:grid-cols-5 / lg:col-span-*
   utilities, but the prebuilt styles.css doesn't include them, so the
   two cards silently stacked full-width. Real CSS instead: account 3fr,
   subscription+preferences 2fr, single column under 1024px. */
/* Centered, self-contained width cap (Tailwind's max-w-5xl/6xl aren't in
   the prebuilt styles.css, so don't rely on them). Centering stops the
   settings content from being shoved into the left with dead space on
   the right of wide screens. */
.profile-page { max-width: 1400px; margin-left: auto; margin-right: auto; }
.profile-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 1024px) {
  .profile-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

/* ── Respect reduced-motion ──────────────────────────────────────────
   Drop the entrance transforms, spotlight transition, and bobbing for
   users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .vu-stagger > * { animation: none; }
  .vu-glow::before { transition: none; }
  .vu-kinetic-ch { animation: none; opacity: 1; }
}