/* =====================================================================
   Charlotte Aurisch — "Midnight Ink" Theme (serious & moody)
   ---------------------------------------------------------------------
   OPTIONAL OVERRIDE THEME — fully reversible.

   Re-maps the existing colour tokens in css/style.css only. No layout,
   spacing, type or behaviour changes.

   ► To ENABLE  : keep the <link> to this file in index.html (after style.css)
   ► To ROLL BACK: remove or comment out that single <link> line.

   Design intent: serious, moody, cinematic.
   Deep blue-black ink base with a warm FIREWORK-GOLD accent (luminous,
   sparkly gold) and cool slate neutrals. Deliberately NO pink, no neon.
   Reads grown-up, elegant and a little nocturnal.
   ===================================================================== */

:root {
  /* Core palette — ink base, warm firework-gold accent, cool slate */
  --midnight: #060810;       /* deep blue-black ink base */
  --midnight-2: #0e121d;     /* slate panel */
  --deep-purple: #2b2518;    /* deep bronze-brown (was deep purple) */
  --purple: #7a6634;         /* warm bronze (mid stop) */
  --magenta: #e0a92a;        /* rich molten gold (was magenta) */
  --neon-pink: #ffcf5a;      /* bright firework gold accent (was neon pink) */
  --amber: #ffe6a3;          /* luminous pale-gold sparkle (was amber) */
  --silver: #cdd3df;         /* cool steel */

  /* Functional colours */
  --bg: var(--midnight);
  --bg-soft: var(--midnight-2);
  --text: #eef1f8;           /* cool soft white body copy */
  --text-muted: #9aa1b4;     /* cool slate-grey secondary text */
  --line: rgba(205, 211, 223, 0.12);

  /* Gradients — firework gold → molten gold → bronze → deep bronze */
  --grad-aurora: linear-gradient(120deg, var(--neon-pink), var(--magenta) 42%, var(--purple) 78%, var(--deep-purple));
  --grad-stage: radial-gradient(80% 120% at 50% -10%, rgba(255, 207, 90, 0.24), transparent 60%);
  --grad-amber: linear-gradient(120deg, var(--amber), var(--neon-pink));
}

/* ---------------------------------------------------------------------
   Hardcoded blue-toned values in style.css that aren't driven by tokens.
   Re-skin them so the background reads as deep ink, not bright blue.
   --------------------------------------------------------------------- */

/* Ambient background glow — swap neon halos for warm firework gold & ink */
.bg-aura {
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(255, 207, 90, 0.13), transparent 60%),
    radial-gradient(50% 60% at 85% 10%, rgba(122, 102, 52, 0.18), transparent 60%),
    radial-gradient(80% 80% at 50% 110%, rgba(255, 230, 163, 0.10), transparent 60%),
    var(--bg);
}

/* Scrolled nav bar — deep ink tint */
.nav.is-scrolled {
  background: rgba(6, 8, 16, 0.80);
}

/* Hero city skyline — fade to deep ink, dark slate buildings */
.hero__skyline {
  background:
    linear-gradient(transparent, rgba(6, 8, 16, 0.94) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><g fill='%230b0e18'><rect x='40' y='150' width='60' height='150'/><rect x='110' y='100' width='40' height='200'/><rect x='160' y='180' width='70' height='120'/><rect x='240' y='120' width='50' height='180'/><rect x='300' y='90' width='38' height='210'/><rect x='350' y='160' width='80' height='140'/><rect x='440' y='130' width='46' height='170'/><rect x='500' y='70' width='42' height='230'/><rect x='555' y='150' width='64' height='150'/><rect x='630' y='110' width='40' height='190'/><rect x='685' y='175' width='74' height='125'/><rect x='770' y='95' width='44' height='205'/><rect x='825' y='150' width='58' height='150'/><rect x='895' y='120' width='48' height='180'/><rect x='955' y='80' width='40' height='220'/><rect x='1005' y='160' width='78' height='140'/><rect x='1095' y='130' width='50' height='170'/></g></svg>") repeat-x bottom / auto 100%;
}

/* Spotlight art shadow halo — swap blue glow for warm gold over ink */
.spotlight__art::before {
  background:
    radial-gradient(40% 50% at 30% 20%, rgba(255, 230, 163, 0.42), transparent 60%),
    radial-gradient(50% 60% at 80% 80%, rgba(6, 8, 16, 0.7), transparent 60%);
}

/* Genre badge on cards — deep ink */
.card__media[data-genre]::after {
  background: rgba(6, 8, 16, 0.6);
}

/* Social card overlay — deep ink */
.social-card::before {
  background: linear-gradient(transparent 40%, rgba(6, 8, 16, 0.85));
}

/* Footer — deep ink */
.footer {
  background: rgba(6, 8, 16, 0.6);
}

/* Mobile slide-in nav panel — slate */
@media (max-width: 860px) {
  .nav__links {
    background: rgba(14, 18, 29, 0.96);
  }
}

/* ---------------------------------------------------------------------
   Hero — moody cinematic treatment.
   Lightly grade the portrait toward a cool, low-key look (not full B&W)
   and lay a deep ink vignette with a faint gold edge so it feels
   theatrical and serious.
   --------------------------------------------------------------------- */

/* Hero base stays transparent so the fixed golden sparkle canvas shows
   through behind the content (the deep ink comes from <body> + vignette). */
.hero {
  background: transparent;
}

/* Low-key cool grade on the portrait — keeps depth without colour pop */
.hero__portrait {
  opacity: 0.62;
  filter: grayscale(30%) contrast(1.06) brightness(0.9) saturate(112%);
}

/* Deep ink vignette with a faint warm gold lift (above art, below text) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 70% 22%, rgba(201, 162, 75, 0.10) 0%, rgba(6, 8, 16, 0) 30%, rgba(6, 8, 16, 0.6) 65%, var(--midnight) 100%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.35) 0%, rgba(6, 8, 16, 0.08) 35%, rgba(6, 8, 16, 0.88) 100%);
}

/* Keep the hero text/content above the new vignette */
.hero__content { position: relative; z-index: 1; }

/* Floating hero lyrics — were pink, now faint warm gold */
.hero__lyrics span {
  color: rgba(255, 207, 90, 0.22);
}

/* ---------------------------------------------------------------------
   Hero title — golden shimmer (Tina Turner sequin-dress energy).
   1) Replace the leftover PURPLE drop-shadow with a warm gold glow that
      still reacts to the audio level.
   2) Sweep a bright highlight band across the gold letters like light
      catching a shimmering dress.
   --------------------------------------------------------------------- */
.hero h1 {
  filter:
    drop-shadow(0 0 16px rgba(255, 207, 90, calc(0.28 + var(--audio-level) * 0.5)))
    drop-shadow(0 12px 40px rgba(224, 169, 42, calc(0.22 + var(--audio-level) * 0.4)));
}

.hero .text-gradient {
  background-image: linear-gradient(
    100deg,
    var(--magenta) 0%,
    var(--neon-pink) 22%,
    #fff7da 44%,
    #ffffff 50%,
    #fff7da 56%,
    var(--neon-pink) 78%,
    var(--magenta) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: heroGoldSheen 5.5s linear infinite;
}

@keyframes heroGoldSheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -60% 0; }
}

/* Respect users who prefer reduced motion: hold a static gold fill */
@media (prefers-reduced-motion: reduce) {
  .hero .text-gradient { animation: none; background-position: 50% 0; }
}

/* Primary buttons — even gold so they don't fade to a dark bronze right
   edge (the old gradient ended in deep bronze, which looked lopsided).
   Soft, symmetric gold glow instead of a one-sided sliver. */
.btn--primary {
  background: linear-gradient(120deg, var(--amber), var(--neon-pink) 55%, var(--magenta));
  color: #2a2008;
  box-shadow: 0 10px 28px -14px rgba(224, 169, 42, 0.55);
}
.btn--primary:hover {
  box-shadow: 0 16px 38px -16px rgba(255, 207, 90, 0.6);
}

/* ---------------------------------------------------------------------
   Remove ALL remaining hardcoded pink/magenta outlines & glows.
   These three values are baked into style.css and not token-driven, so
   they are re-skinned to warm gold here.
   --------------------------------------------------------------------- */

/* Spotlight pulse ring outline — was pink */
.spotlight__art .pulse-ring {
  border-color: rgba(255, 207, 90, 0.5);
}

/* Card hover border — was pink */
.card:hover {
  border-color: rgba(255, 207, 90, 0.5);
}

/* Timeline node halo — was pink */
.timeline__item::before {
  box-shadow: 0 0 0 4px rgba(255, 207, 90, 0.18);
}