/* ============================================================================
   fx-aurora.css — OPTIONAL "Aurora" visual style (Wow factor), fully opt-in.
   Everything is scoped under :root[data-style="aurora"] so the default "clean"
   look is 100% untouched and pays ZERO cost unless the style is turned on.
   Effects ride the existing dynamic tokens, so they auto-adapt to light/dark,
   accent colour and custom backgrounds.
   Toggle: set data-style="aurora" on <html>  (XPRF.setStyle('aurora') later).
   ============================================================================ */

/* theme-aware gradient-text endpoints (display name only — never balances) */
:root[data-style="aurora"],
:root[data-style="aurora"][data-bg="dark"] {
  --profile-gx-start: #00f2fe;
  --profile-gx-end:   #4facfe;
}
:root[data-style="aurora"][data-bg="light"] {
  --profile-gx-start: #0b3c5d;
  --profile-gx-end:   #328cc1;
}

/* ---- 1. Glassmorphism cards (theme-aware tint + moderate blur) ---------- */
:root[data-style="aurora"] .xprf-block {
  background: rgba(22, 24, 35, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(15px) saturate(1.25);
  backdrop-filter: blur(15px) saturate(1.25);
}
:root[data-style="aurora"][data-theme="light"] .xprf-block {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 34, 0.08);
}
/* glass also on the small surfaces for cohesion */
:root[data-style="aurora"] .xprf-id-pill,
:root[data-style="aurora"] .xprf-stat,
:root[data-style="aurora"] .pp-chip {
  background: rgba(22, 24, 35, 0.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.10);
}
:root[data-style="aurora"][data-theme="light"] .xprf-id-pill,
:root[data-style="aurora"][data-theme="light"] .xprf-stat,
:root[data-style="aurora"][data-theme="light"] .pp-chip {
  background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 34, 0.08);
}
/* dual-logo (Liquidity) ring blends into the glass card instead of a hard
   opaque-surface edge */
:root[data-style="aurora"] .xprf-duo__c { border-color: rgba(255, 255, 255, 0.16); }
:root[data-style="aurora"][data-theme="light"] .xprf-duo__c { border-color: rgba(15, 23, 34, 0.12); }

/* collapse fade tuned to the glass tone (opaque-surface fade looked like a band) */
:root[data-style="aurora"] .xprf-block.is-collapsed::after {
  background: linear-gradient(to top, rgba(20, 22, 32, 0.82) 30%, rgba(20, 22, 32, 0.28) 66%, transparent);
}
:root[data-style="aurora"][data-theme="light"] .xprf-block.is-collapsed::after {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.86) 30%, rgba(255, 255, 255, 0.3) 66%, transparent);
}

/* ---- 2. Glowing border on hover (auto-follows accent) ------------------- */
:root[data-style="aurora"] .xprf-block:hover {
  border-color: color-mix(in srgb, var(--profile-accent) 55%, var(--profile-border));
  box-shadow: var(--profile-shadow-card-hover),
              0 0 30px -6px var(--profile-accent-glow),
              0 0 0 1px var(--profile-accent-glow);
}

/* ---- 2b. The Link button is its OWN surface (bare — no .xprf-block card),
   so the glass + glow must be applied directly or it stays opaque and clashes
   with the aurora cards around it. ---------------------------------------- */
:root[data-style="aurora"] .xprf-linkbtn {
  background: rgba(22, 24, 35, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(15px) saturate(1.25);
  backdrop-filter: blur(15px) saturate(1.25);
}
:root[data-style="aurora"][data-theme="light"] .xprf-linkbtn {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 34, 0.08);
}
:root[data-style="aurora"] .xprf-linkbtn:hover {
  border-color: color-mix(in srgb, var(--profile-accent) 55%, var(--profile-border));
  box-shadow: var(--profile-shadow-card-hover),
              0 0 30px -6px var(--profile-accent-glow),
              0 0 0 1px var(--profile-accent-glow);
}

/* ---- 3. Gradient display-name (balances stay flat & legible) ------------ */
:root[data-style="aurora"] .xprf-display-name,
:root[data-style="aurora"] .pp-name-grad {
  background: linear-gradient(92deg, var(--profile-gx-start), var(--profile-gx-end));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- 4. Ambient orbs (default bg only; hidden on custom bg) ------------- */
:root[data-style="aurora"] body::before,
:root[data-style="aurora"] body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(72px); opacity: 0.5; will-change: transform;
}
:root[data-style="aurora"] body::before {
  width: 400px; height: 400px; top: -90px; left: -70px;
  background: radial-gradient(circle, var(--profile-accent) 0%, transparent 68%);
  animation: aurora-orb1 20s ease-in-out infinite;
}
:root[data-style="aurora"] body::after {
  width: 340px; height: 340px; top: 38%; right: -60px;
  background: radial-gradient(circle, var(--profile-accent-2) 0%, transparent 68%);
  animation: aurora-orb2 26s ease-in-out infinite;
}
@keyframes aurora-orb1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, 70px); } }
@keyframes aurora-orb2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, -50px); } }
/* guard: hide orbs when the owner set a custom background */
:root[data-style="aurora"]:has(#xprf-bg-custom) body::before,
:root[data-style="aurora"]:has(#xprf-bg-custom) body::after { display: none; }

/* ---- 5. Micro-interactions on token / coin rows (scale + spark glow) ---- */
:root[data-style="aurora"] .xprf-asset__logo,
:root[data-style="aurora"] .xprf-coin__logo,
:root[data-style="aurora"] .pp-logo {
  transition: transform var(--profile-dur-base) var(--profile-ease);
}
:root[data-style="aurora"] .xprf-asset:hover .xprf-asset__logo,
:root[data-style="aurora"] .xprf-coin:hover .xprf-coin__logo,
:root[data-style="aurora"] .pp-row:hover .pp-logo { transform: scale(1.12); }
:root[data-style="aurora"] .xprf-coin:hover .xprf-coin__spark svg,
:root[data-style="aurora"] .pp-row:hover .pp-spark svg {
  filter: brightness(1.3) drop-shadow(0 0 4px var(--profile-accent-glow));
}

/* ---- motion / accessibility guard -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-style="aurora"] body::before,
  :root[data-style="aurora"] body::after { animation: none; }
}