/* AURORA — built from the supplied palette:
   #213A57 · #0B6477 · #14919B · #0AD1C8 · #45DFB1 · #80ED99 */
:root {
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --heading-weight: 700;
  --radius: 26px;
  --radius-sm: 16px;
}
[data-theme="dark"] {
  --bg: #0c1a2b;
  --bg-soft: #13263d;
  --surface: rgba(69, 223, 177, 0.045);
  --surface-strong: rgba(10, 209, 200, 0.09);
  --border: rgba(128, 237, 153, 0.13);
  --text: #eafff7;
  --text-soft: #b5d4d4;
  --muted: #7fa3a8;
  --a1: #0ad1c8;
  --a2: #14919b;
  --a3: #80ed99;
  --grad: linear-gradient(120deg, #0b6477 0%, #0ad1c8 50%, #80ed99 100%);
  --on-accent: #0c1a2b;
  --glow: rgba(10, 209, 200, 0.35);
}
[data-theme="light"] {
  --bg: #f2fbf8;
  --bg-soft: #ffffff;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-strong: rgba(11, 100, 119, 0.07);
  --border: rgba(33, 58, 87, 0.11);
  --text: #213a57;
  --text-soft: #3f5a70;
  --muted: #6b8494;
  --a1: #0b6477;
  --a2: #14919b;
  --a3: #0d8f87;
  --grad: linear-gradient(120deg, #213a57 0%, #0b6477 40%, #14919b 75%, #45dfb1 100%);
  --on-accent: #ffffff;
  --glow: rgba(20, 145, 155, 0.28);
  --shadow: 0 20px 50px -24px rgba(33, 58, 87, 0.25);
}

/* Aurora sky: soft bands of the palette drifting slowly behind the page */
body::before, body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); will-change: transform;
}
body::before {
  top: -30vmax; right: -20vmax; opacity: 0.22;
  background: conic-gradient(from 90deg, #0ad1c8, #14919b, #45dfb1, #0ad1c8);
  animation: aurora-a 26s ease-in-out infinite alternate;
}
body::after {
  bottom: -35vmax; left: -25vmax; opacity: 0.16;
  background: conic-gradient(from 200deg, #80ed99, #45dfb1, #0b6477, #80ed99);
  animation: aurora-b 32s ease-in-out infinite alternate;
}
[data-theme="light"] body::before { opacity: 0.14; }
[data-theme="light"] body::after { opacity: 0.12; }
@keyframes aurora-a {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-18vw, 14vh) rotate(120deg) scale(1.15); }
  100% { transform: translate(-6vw, 30vh) rotate(240deg) scale(0.95); }
}
@keyframes aurora-b {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(22vw, -12vh) rotate(-120deg) scale(1.2); }
  100% { transform: translate(8vw, -28vh) rotate(-220deg) scale(1); }
}
.orb-1 { background: #0ad1c8; opacity: 0.35; }
.orb-2 { background: #45dfb1; opacity: 0.3; }
[data-theme="light"] .orb { opacity: 0.22; }
.shape { border-color: color-mix(in srgb, #45dfb1 60%, transparent); }
.avatar-ring { background: conic-gradient(from 0deg, #213a57, #0b6477, #14919b, #0ad1c8, #45dfb1, #80ed99, #213a57); }

/* Palette strip under the hero name — a nod to the source swatches */
.hero-name::after {
  content: ""; display: block; width: 180px; height: 6px; margin-top: 22px; border-radius: 6px;
  background: linear-gradient(90deg, #213a57 0 16.6%, #0b6477 0 33.3%, #14919b 0 50%, #0ad1c8 0 66.6%, #45dfb1 0 83.3%, #80ed99 0);
}
.section-head h2 em { background: linear-gradient(120deg, #0ad1c8, #80ed99); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .section-head h2 em { background: linear-gradient(120deg, #0b6477, #14919b); -webkit-background-clip: text; background-clip: text; }
.stat { background: linear-gradient(160deg, var(--surface-strong), var(--surface)); }
.tl-dot { border-color: #0ad1c8; color: #0ad1c8; }
[data-theme="light"] .tl-dot { border-color: #0b6477; color: #0b6477; }
.xp-logo { background: linear-gradient(140deg, #0b6477, #14919b); color: #eafff7; }
.cover-art { background: radial-gradient(circle at 20% 20%, rgba(128, 237, 153, 0.45), transparent 55%), radial-gradient(circle at 85% 80%, rgba(10, 209, 200, 0.5), transparent 55%), linear-gradient(140deg, #213a57, #0b6477); }
.cover-ico { color: #eafff7; }

/* The pixel cursor trail replaces the round cursor glow */
.cursor-glow { display: none; }

/* Phones: keep the aurora glow but stop moving it (large blurred layers are costly to animate). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body::before, body::after { animation: none; }
}