/* Direction: Bandora — midnight plum stage, electric lavender, ivory paper, a bold geometric display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #faf8ff;
  --surface: #ffffff;
  --surface-2: #efedf4;
  --border: #e4dff2;
  --border-strong: #b6b3bd;
  --ink: #201a35;
  --muted: #6b6585;
  --accent: #a78bfa;
  --accent-hover: #8e76d5;
  --accent-ink: #171323;
  --accent-text: #6234d1;
  --accent-strong: #6f5ca5;
  --accent-soft: #eee9fe;
  --accent-border: #d5c7fd;
  --success: #2f9e6e;
  --success-ink: #201a35;
  --success-soft: #e2edee;
  --success-strong: #22704f;
  --warning: #d98a1c;
  --warning-ink: #201a35;
  --warning-soft: #f6ebe4;
  --warning-strong: #8f5b12;
  --danger: #d6455d;
  --danger-ink: #ffffff;
  --danger-soft: #f6e3ec;
  --danger-strong: #b53a4f;
  --chart-1: #9b7fec;
  --chart-2: #d9649a;
  --chart-3: #bd600a;
  --chart-4: #8d941e;
  --chart-5: #1b8e75;
  --chart-6: #2498ca;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgba(32, 26, 53, 0.05), 0 8px 24px -12px rgba(32, 26, 53, 0.12);
  --x-plum: #201a35;
  --x-plum-2: #2c2447;
  --x-silver: #a5a1b5;
  --x-on-photo: #faf8ff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #14101e;
  --surface: #2c2835;
  --surface-2: #201c29;
  --border: #35313e;
  --border-strong: #5b5862;
  --ink: #faf8ff;
  --muted: #9e9ba5;
  --accent: #a78bfa;
  --accent-hover: #b49cfb;
  --accent-ink: #171323;
  --accent-text: #a78bfa;
  --accent-strong: #a78bfa;
  --accent-soft: #342b4e;
  --accent-border: #564781;
  --success: #2f9e6e;
  --success-ink: #ffffff;
  --success-soft: #1a2f30;
  --success-strong: #40a67a;
  --warning: #d98a1c;
  --warning-ink: #ffffff;
  --warning-soft: #3f2b1e;
  --warning-strong: #d98a1c;
  --danger: #d6455d;
  --danger-ink: #ffffff;
  --danger-soft: #3f1c2c;
  --danger-strong: #df6f81;
  --chart-1: #a78bfa;
  --chart-2: #fb9bc3;
  --chart-3: #cb6c1f;
  --chart-4: #b7c131;
  --chart-5: #169c80;
  --chart-6: #5dc7fd;
}

.eq { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.eq span {
  width: 10px;
  border-radius: 6px;
  background: var(--accent);
  height: 30%;
  animation: eq-bounce 1.6s ease-in-out infinite;
}
.eq span:nth-child(2n) { animation-delay: -0.4s; opacity: 0.7; }
.eq span:nth-child(3n) { animation-delay: -0.9s; opacity: 0.5; }
.eq span:nth-child(5n) { animation-delay: -1.2s; }
@keyframes eq-bounce {
  0%, 100% { height: 25%; }
  50% { height: 100%; }
}
html.reduced-motion .eq span { animation: none; }

.hatch {
  background-image: repeating-linear-gradient(135deg, var(--x-silver) 0 1px, transparent 1px 6px);
}
.stage-glow {
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%),
    var(--x-plum);
}
.bar-grow { transform-origin: bottom; animation: bar-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bar-grow-x { transform-origin: left; animation: bar-right 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes bar-up { from { transform: scaleY(0.1); } to { transform: scaleY(1); } }
@keyframes bar-right { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }
html.reduced-motion .bar-grow, html.reduced-motion .bar-grow-x { animation: none; }
.nav-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--x-on-photo); }
.nav-link[aria-current="page"] svg { color: var(--accent); }
.pill-on { background: var(--accent); color: var(--x-plum); border-color: var(--accent); }