/* vrc.dj  Hero: homepage hero + carousel */
/* --- Hero */
.hero            { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; }
.hero-glow       { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-glow::before {
  content: '';
  position: absolute;
  width: 70vmax; height: 70vmax; border-radius: 50%;
  top: -25vmax; left: -15vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-base) 14%, transparent) 0%, transparent 65%);
  animation: glowDrift 10s ease-in-out infinite alternate;
}
.hero-glow::after {
  content: '';
  position: absolute;
  width: 55vmax; height: 55vmax; border-radius: 50%;
  bottom: -15vmax; right: -10vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2-base) 9%, transparent) 0%, transparent 65%);
  animation: glowDrift 14s ease-in-out infinite alternate-reverse;
}
@keyframes glowDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(3%,4%) scale(1.1); } }
.hero-content  { position: relative; z-index: 1; text-align: center; padding: 2rem 0 4rem; width: 100%; }
.hero-title    { font-size: clamp(2.5rem,8vw,5.5rem); font-weight: 900; letter-spacing: -.035em; line-height: 1; color: var(--white); margin-bottom: 1.25rem; text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.45); }
.hero-sub      { font-size: clamp(1rem,2.5vw,1.2rem); color: var(--text-secondary); max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.7; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero-actions  { display: flex; align-items: center; justify-content: center; gap: .875rem; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.hero-stat-num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--white); letter-spacing: -.02em; }
.hero-stat-lbl { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-top: 2px; }

/* --- Hero carousel */
@keyframes hero-dot-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
/* Slide layout */
.hero-slide { display: flex; align-items: center; width: 100%; }
.hero--carousel {
  min-height: clamp(440px, 65vh, 720px);
  touch-action: pan-y; /* let JS own horizontal swipes; prevents iOS touchcancel on horizontal pan */
}
.hero--carousel .hero-slide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero--carousel .hero-slide.is-active { pointer-events: auto; }

/* Background layers (sit between glow and slide content in DOM order) */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
/* Only overlay when the inline style sets a background-image (photo layers), not gradients */
.hero-bg-layer[style*="background-image"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
}
/* FotW photo bg: stronger gradient overlay - tag backgrounds vary widely in brightness */
.hero-bg-layer--fotw[style*="background-image"]::after {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.46) 38%,
    rgba(0,0,0,.66) 100%
  );
}

/* ── Slide-specific gradient backgrounds ────────────────────────────────── */
/* Slide 0: personal hero - primary (purple) left/top + secondary (cyan) right/bottom */
.hero-bg-layer--default {
  background-color: rgba(0,0,0,.14);
  background-image:
    radial-gradient(ellipse 110% 70% at 8% 12%, color-mix(in srgb, var(--accent-base) 26%, transparent), transparent 62%),
    radial-gradient(ellipse 80% 80% at 92% 88%, color-mix(in srgb, var(--accent-2-base) 20%, transparent), transparent 62%);
}
/* New to the Scene - purple, matches /artists scope color (var(--accent)) */
.hero-bg-layer--artists {
  background-color: rgba(0,0,0,.14);
  background-image:
    radial-gradient(ellipse 110% 75% at 8% 15%, color-mix(in srgb, var(--accent-base) 30%, transparent), transparent 65%),
    radial-gradient(ellipse 75% 75% at 88% 80%, color-mix(in srgb, var(--accent-base) 16%, transparent), transparent 60%);
}
/* Something to Listen To - amber/orange, matches /livesets scope color (#f59e0b) */
.hero-bg-layer--livesets {
  background-color: rgba(0,0,0,.14);
  background-image:
    radial-gradient(ellipse 110% 75% at 8% 15%, color-mix(in srgb, #f59e0b 28%, transparent), transparent 65%),
    radial-gradient(ellipse 70% 70% at 88% 80%, color-mix(in srgb, #ea580c 18%, transparent), transparent 60%);
}
.hero-bg-layer.is-active { opacity: 1; }

/* Per-element enter/exit animations */
.hero--carousel .hero-slide [data-hero-el] {
  opacity: 0;
  transform: translateX(28px);
}
.hero--carousel .hero-slide.is-active [data-hero-el] {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.hero--carousel .hero-slide.is-active [data-hero-el="pill"]    { transition-delay:   0ms; }
.hero--carousel .hero-slide.is-active [data-hero-el="title"]   { transition-delay:  65ms; }
.hero--carousel .hero-slide.is-active [data-hero-el="sub"]     { transition-delay: 130ms; }
.hero--carousel .hero-slide.is-active [data-hero-el="actions"] { transition-delay: 195ms; }
.hero--carousel .hero-slide.is-active [data-hero-el="stats"]   { transition-delay: 260ms; }
.hero--carousel .hero-slide.is-exiting [data-hero-el] {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
  transition-delay: 0ms !important;
}

/* Progress bar */
.hero-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.10); z-index: 5; }
.hero-progress-fill { height: 100%; width: 0; background: var(--accent-2-base); will-change: width; }

/* Navigation dots */
.hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 6;
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, transform .25s ease;
  opacity: 0;
  animation: hero-dot-pop .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.hero-dot:nth-child(1) { animation-delay: .40s; }
.hero-dot:nth-child(2) { animation-delay: .48s; }
.hero-dot:nth-child(3) { animation-delay: .56s; }
.hero-dot:nth-child(4) { animation-delay: .64s; }
.hero-dot:nth-child(5) { animation-delay: .72s; }
.hero-dot.is-active         { background: var(--accent-2-base); transform: scale(1.25); }
.hero-dot:hover             { background: rgba(255,255,255,.5); }
.hero-dot.is-active:hover   { background: var(--accent-2-base); }

/* Press-and-hold pause state */
.hero--carousel.carousel-held { user-select: none; }

/* Paused state (hold-to-pause and FotW locked) */
.hero--carousel.carousel-paused .hero-progress-fill {
  opacity: .35;
  transition: opacity .25s;
}
.hero-pause-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  padding: 2px 8px 2px 6px;
  border-radius: 99px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.hero--carousel.carousel-paused .hero-pause-badge { opacity: 1; }

/* Chevron nav buttons - desktop/tablet only */
.hero-chevron {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 52px;
  height: 72px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,.80);
  font-size: 1.4rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s, border-color .15s;
  border-radius: 6px;
}
.hero-chevron:hover { color: #fff; background: rgba(0,0,0,.52); border-color: rgba(255,255,255,.22); }
.hero-chevron--prev { left: 8px; }
.hero-chevron--next { right: 8px; }
@media (min-width: 640px) {
  .hero-chevron { display: flex; }
}

/* Light-mode hero: white-alpha dots/bar become invisible - swap to dark-alpha equivalents */
[data-theme="light"] .hero {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-base) 6%, var(--bg-base)) 0%, var(--bg-base) 60%);
}
[data-theme="light"] .hero-progress                   { background: rgba(0,0,0,.10); }
[data-theme="light"] .hero-dot                         { background: rgba(0,0,0,.18); }
[data-theme="light"] .hero-dot:hover                   { background: rgba(0,0,0,.38); }
[data-theme="light"] .hero-dot.is-active               { background: var(--accent-2-base); }
[data-theme="light"] .hero-dot.is-active:hover         { background: var(--accent-2-base); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero {
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent-base) 6%, var(--bg-base)) 0%, var(--bg-base) 60%);
  }
  :root:not([data-theme="dark"]) .hero-progress               { background: rgba(0,0,0,.10); }
  :root:not([data-theme="dark"]) .hero-dot                    { background: rgba(0,0,0,.18); }
  :root:not([data-theme="dark"]) .hero-dot:hover              { background: rgba(0,0,0,.38); }
  :root:not([data-theme="dark"]) .hero-dot.is-active          { background: var(--accent-2-base); }
  :root:not([data-theme="dark"]) .hero-dot.is-active:hover    { background: var(--accent-2-base); }
}

/* FotW pill variant - color driven by --fotw-color set inline on the slide */
.hero-pill--fotw {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 14%, transparent);
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 40%, transparent);
  color: color-mix(in srgb, var(--fotw-color, #38bdf8) 30%, #fff);
}

/* FotW slide: scoped overrides for title gradient */
[data-slide="1"] .fotw-gradient-text {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--fotw-color, #0ea5e9) 80%, #fff) 0%,
    color-mix(in srgb, var(--fotw-color, #0ea5e9) 35%, #fff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* Compact the title + sub when the showcase rows take vertical space */
[data-slide="1"] .hero-title { font-size: clamp(2rem, 5.5vw, 3.5rem); margin-bottom: .75rem; }
[data-slide="1"] .hero-sub {
  margin-bottom: 1.25rem;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 10px rgba(0,0,0,.9),
    0 0 32px rgba(0,0,0,.6),
    0 0 60px color-mix(in srgb, var(--fotw-color, #0ea5e9) 18%, transparent);
}

/* ── FotW showcase panel ───────────────────────────────────────────────── */
.fotw-showcase {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.fotw-showcase-row {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  text-align: left;
}

/* Eyebrow label above each row */
.fotw-eyebrow {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, #fff);
  padding: 0 .1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Track row tinting when inside the FotW slide */
[data-slide="1"] .ls-track-row {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 6%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 22%, rgba(255,255,255,.08));
  backdrop-filter: blur(10px);
}
[data-slide="1"] .ls-track-row:hover {
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 45%, transparent);
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 12%, rgba(0,0,0,.4));
}
[data-slide="1"] .ls-track-row:has(.ls-track-play.is-active) {
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fotw-color, #0ea5e9) 25%, transparent);
}
[data-slide="1"] .ls-track-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
[data-slide="1"] .ls-track-title:hover { color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, #fff); }
[data-slide="1"] .ls-track-artists { color: rgba(255,255,255,.78); }
[data-slide="1"] .ls-track-artists a { color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 55%, #fff); }
[data-slide="1"] .ls-track-date { color: rgba(255,255,255,.55); }
[data-slide="1"] .ls-track-side { border-left-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 18%, rgba(255,255,255,.08)); }

/* Empty-state CTA when no anchor liveset exists */
.fotw-empty-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  padding: .85rem 1.1rem;
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 8%, rgba(0,0,0,.28));
  border: 1px dashed color-mix(in srgb, var(--fotw-color, #0ea5e9) 32%, rgba(255,255,255,.1));
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  font-size: .83rem;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 35%, rgba(255,255,255,.8));
  text-align: center;
}

.fotw-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .79rem;
  font-weight: 600;
  padding: .32rem .8rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 20%, rgba(0,0,0,.3));
  border: 1px solid color-mix(in srgb, var(--fotw-color, #0ea5e9) 45%, transparent);
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 25%, #fff);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fotw-empty-btn:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 38%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 65%, transparent);
  color: #fff;
}

/* "Browse all in {tag} →" link */
.fotw-browse-link {
  text-align: right;
  font-size: .78rem;
  margin-top: .1rem;
  padding-right: .1rem;
}
.fotw-browse-link a {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 45%, rgba(255,255,255,.75));
  text-decoration: none;
  transition: color .15s;
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}
.fotw-browse-link a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ── FotW roster item ──────────────────────────────────────────────────── */
.fotw-roster-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .75rem .45rem .5rem;
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 8%, rgba(0,0,0,.28));
  border: 1px solid color-mix(in srgb, var(--fotw-color, #0ea5e9) 22%, rgba(255,255,255,.08));
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s;
}
.fotw-roster-item:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 16%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 45%, transparent);
  color: #fff;
  text-decoration: none;
}
.fotw-roster-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 20%, rgba(0,0,0,.4));
}
.fotw-roster-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, #fff);
}
.fotw-roster-name {
  font-size: .88rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fotw-roster-arrow {
  font-size: 1.25rem;
  opacity: .5;
  flex-shrink: 0;
  transition: opacity .15s, transform .15s;
}
.fotw-roster-item:hover .fotw-roster-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Persistent play cue on FotW liveset thumbnails */
[data-slide="1"] .ls-track-play-overlay { opacity: .3; }
[data-slide="1"] .ls-track-play:hover .ls-track-play-overlay,
[data-slide="1"] .ls-track-play:focus-visible .ls-track-play-overlay { opacity: 1; }
/* Tint the playing-state overlay with the FotW tag color instead of default amber */
[data-slide="1"] { --liveset-playing-color: var(--fotw-color, #f59e0b); }

/* On small screens: hide the anchor row, keep only "this week" */
@media (max-width: 640px) {
  .fotw-showcase-row--anchor { display: none; }
  [data-slide="1"] .hero-sub { display: none; }
}

/* ── FotW slug note (hashtag under the title) ──────────────────────────── */
.fotw-slug-note {
  display: block;
  font-size: clamp(.7rem, 1.4vw, .85rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 55%, rgba(255,255,255,.4));
  text-decoration: none;
  margin-top: .25rem;
  opacity: .7;
  transition: opacity .15s, color .15s;
  font-family: var(--font-mono, monospace);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.fotw-slug-note:hover {
  opacity: 1;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 75%, #fff);
}

/* ── FotW inline badges (NEW / YOURS) ──────────────────────────────────── */
.fotw-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.fotw-badge--new {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--fotw-color, #0ea5e9) 50%, transparent);
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 30%, #fff);
}
.fotw-badge--yours {
  background: color-mix(in srgb, var(--accent-base) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-base) 52%, transparent);
  color: color-mix(in srgb, var(--accent-base) 20%, #fff);
}

/* ── FotW "your set" track row highlight ───────────────────────────────── */
[data-slide="1"] .ls-track-row--yours {
  background: color-mix(in srgb, var(--accent-base) 13%, rgba(0,0,0,.38));
  border-color: color-mix(in srgb, var(--accent-base) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-base) 20%, transparent),
              0 2px 14px color-mix(in srgb, var(--accent-base) 14%, transparent);
}
[data-slide="1"] .ls-track-row--yours .ls-track-title { color: #c4b5fd; }
[data-slide="1"] .ls-track-row--yours:hover { border-color: color-mix(in srgb, var(--accent-base) 65%, transparent); }

/* ── FotW personalized callout banner ───────────────────────────────────── */
.fotw-user-callout {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-base) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-base) 32%, transparent);
  border-radius: var(--radius-sm);
  padding: .45rem .9rem;
  margin-bottom: .85rem;
  font-size: .83rem;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}
.fotw-user-callout-icon {
  color: #a78bfa;
  font-size: .9rem;
  flex-shrink: 0;
}
.fotw-user-callout strong { color: #c4b5fd; font-weight: 700; }
.fotw-user-callout-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: color-mix(in srgb, var(--accent-base) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-base) 52%, transparent);
  border-radius: 5px;
  padding: .22rem .65rem;
  font-size: .76rem;
  font-weight: 700;
  color: #c4b5fd;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.fotw-user-callout-btn:hover {
  background: color-mix(in srgb, var(--accent-base) 40%, transparent);
  border-color: color-mix(in srgb, var(--accent-base) 68%, transparent);
  color: #fff;
}

/* ── FotW empty state (first-ever set CTA variant) ─────────────────────── */
.fotw-empty-cta--first {
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
}
.fotw-empty-icon {
  font-size: 1.75rem;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 45%, transparent);
  display: block;
}
.fotw-empty-cta--first p {
  font-size: .83rem;
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 38%, rgba(255,255,255,.75));
  margin: 0;
  line-height: 1.5;
}
.fotw-empty-cta-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.fotw-empty-btn--accent {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 32%, rgba(0,0,0,.3));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, transparent);
  color: #fff;
}
.fotw-empty-btn--accent:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 48%, rgba(0,0,0,.3));
  color: #fff;
}

/* ── FotW "no new sets" note ────────────────────────────────────────────── */
.fotw-no-new-note {
  margin-top: .55rem;
  font-size: .77rem;
  color: rgba(255,255,255,.55);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.fotw-no-new-note .bi { font-size: .72rem; }
.fotw-no-new-note a {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 55%, rgba(255,255,255,.7));
  text-decoration: none;
}
.fotw-no-new-note a:hover { color: #fff; text-decoration: underline; }

/* ── New to the Scene slide ─────────────────────────────────────────────── */
.hero-pill--new-artists {
  background: color-mix(in srgb, var(--slide-color, #7c3aed) 14%, transparent);
  border-color: color-mix(in srgb, var(--slide-color, #7c3aed) 40%, transparent);
  color: color-mix(in srgb, var(--slide-color, #7c3aed) 30%, #fff);
}
.new-artists-gradient-text {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--slide-color, #7c3aed) 78%, #fff) 0%,
    color-mix(in srgb, var(--slide-color, #7c3aed) 30%, #fff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.new-artists-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem;
  width: 100%;
  max-width: 680px;
  margin: 0 auto .5rem;
}
.new-artist-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .8rem .6rem .65rem;
  background: color-mix(in srgb, var(--slide-color, #7c3aed) 9%, rgba(0,0,0,.35));
  border: 1px solid color-mix(in srgb, var(--slide-color, #7c3aed) 24%, rgba(255,255,255,.07));
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s, transform .15s;
  cursor: pointer;
  overflow: hidden;
}
.new-artist-chip:hover {
  background: color-mix(in srgb, var(--slide-color, #7c3aed) 18%, rgba(0,0,0,.4));
  border-color: color-mix(in srgb, var(--slide-color, #7c3aed) 48%, transparent);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}
/* Logo area */
.new-artist-logo-wrap {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: .1rem;
}
.new-artist-logo-img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
/* Initial fallback when no logo */
.new-artist-initial {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--slide-color, #7c3aed) 26%, rgba(0,0,0,.5));
  border: 1px solid color-mix(in srgb, var(--slide-color, #7c3aed) 32%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--slide-color, #7c3aed) 80%, #fff);
  flex-shrink: 0;
}
.new-artist-name {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.new-artist-chip:hover .new-artist-name { color: #fff; }
/* Tag chips inside the card */
.new-artist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  justify-content: center;
  min-height: 0;
}
.new-artist-tags .tag-chip {
  font-size: .62rem;
  padding: .1rem .38rem;
  pointer-events: none; /* card is the link; tag is decorative here */
}
.new-artist-age {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--slide-color, #7c3aed) 70%, rgba(255,255,255,.5));
  margin-top: auto;
}
.new-artists-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .85rem;
}
.hero-slide--new-artists .hero-title { font-size: clamp(2rem, 5.5vw, 3.5rem); margin-bottom: .6rem; }
.hero-slide--new-artists .hero-sub   { margin-bottom: .85rem; }
[data-theme="light"] .new-artist-chip {
  background: rgba(0,0,0,.04);
  border-color: color-mix(in srgb, var(--slide-color, #7c3aed) 30%, rgba(0,0,0,.1));
}
[data-theme="light"] .new-artist-chip:hover {
  background: color-mix(in srgb, var(--slide-color, #7c3aed) 10%, rgba(0,0,0,.04));
}
[data-theme="light"] .new-artist-initial {
  background: color-mix(in srgb, var(--slide-color, #7c3aed) 15%, rgba(0,0,0,.06));
  color: color-mix(in srgb, var(--slide-color, #7c3aed) 80%, #000);
}
[data-theme="light"] .new-artist-name  { color: rgba(0,0,0,.7); }
[data-theme="light"] .new-artist-chip:hover .new-artist-name { color: #000; }
[data-theme="light"] .new-artist-age   { color: color-mix(in srgb, var(--slide-color, #7c3aed) 55%, rgba(0,0,0,.5)); }
[data-theme="light"] .fotw-user-callout {
  background: color-mix(in srgb, var(--accent-base) 8%, transparent);
  color: rgba(0,0,0,.65);
}
[data-theme="light"] .fotw-user-callout strong { color: var(--accent-base); }
[data-theme="light"] .fotw-no-new-note { color: rgba(0,0,0,.35); }
@media (max-width: 640px) {
  .new-artists-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
  }
  .new-artist-chip:nth-child(n+4) { display: none; }
  .new-artist-tags { display: none; }
  .new-artist-logo-wrap { height: 40px; }
  .new-artist-logo-img  { max-height: 40px; }
  .new-artist-name  { font-size: .72rem; }
  .hero-slide--new-artists .hero-sub { display: none; }
  .fotw-user-callout { font-size: .78rem; padding: .4rem .7rem; }
}

/* ── Per-slide colored gradient glow + tinted buttons ───────────────────── */
.hero-slide--spotlight,
.hero-slide--new-artists,
.hero-slide--random-liveset { position: relative; }

/* Spotlight has a real background image so skip the gradient overlay there */
.hero-slide--new-artists::before,
.hero-slide--random-liveset::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 15% 60%,
    color-mix(in srgb, var(--slide-color, #a855f7) 20%, transparent) 0%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-slide--spotlight .btn-accent,
.hero-slide--new-artists .btn-accent,
.hero-slide--random-liveset .btn-accent {
  background: color-mix(in srgb, var(--slide-color, #a855f7) 22%, transparent);
  border-color: color-mix(in srgb, var(--slide-color, #a855f7) 50%, transparent);
  color: color-mix(in srgb, var(--slide-color, #a855f7) 30%, #fff);
}
.hero-slide--spotlight .btn-accent:hover,
.hero-slide--spotlight .btn-accent:focus-visible,
.hero-slide--new-artists .btn-accent:hover,
.hero-slide--new-artists .btn-accent:focus-visible,
.hero-slide--random-liveset .btn-accent:hover,
.hero-slide--random-liveset .btn-accent:focus-visible {
  background: color-mix(in srgb, var(--slide-color, #a855f7) 35%, transparent);
  border-color: color-mix(in srgb, var(--slide-color, #a855f7) 65%, transparent);
}

/* ── Artist Spotlight slide ─────────────────────────────────────────────── */
.hero-pill--spotlight {
  background: color-mix(in srgb, var(--slide-color, #a855f7) 28%, rgba(0,0,0,.5));
  border-color: color-mix(in srgb, var(--slide-color, #a855f7) 65%, transparent);
  color: color-mix(in srgb, var(--slide-color, #a855f7) 20%, #fff);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.spotlight-gradient-text {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--slide-color, #a855f7) 78%, #fff) 0%,
    color-mix(in srgb, var(--slide-color, #a855f7) 28%, #fff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
}
a.spotlight-gradient-text:hover { opacity: .82; }
.spotlight-name-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .1em; /* matches old hero-title margin */
}
/* Bookings-open icon next to name - mirrors roster-bookable-icon but bigger */
.spotlight-bookable-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.05rem;
  color: #fff;
  background: #8b5cf6;
  border-radius: 38%;
  flex-shrink: 0;
  align-self: center;
  cursor: default;
  position: relative;
  opacity: .9;
  transition: opacity .15s;
}
.spotlight-bookable-icon:hover { opacity: 1; }
/* Instant CSS tooltip */
.spotlight-bookable-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: var(--bg-card);
  color: var(--text);
  padding: .35rem .65rem;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .08s;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
  z-index: var(--z-tooltip);
}
.spotlight-bookable-icon:hover::after { opacity: 1; }
/* Hidden on desktop; revealed as pill text on mobile */
.spotlight-bookable-text { display: none; }
.artist-spotlight-wordmark-link { display: block; text-decoration: none; }
.artist-spotlight-wordmark {
  max-height: 110px;
  max-width: 400px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.6)) brightness(1.08);
}
.artist-spotlight-wordmark-link:hover .artist-spotlight-wordmark { opacity: .82; }
.artist-spotlight-pic-wrap a { display: block; border-radius: 12px; }
.hero-slide--spotlight .hero-content {
  max-width: 860px;
  text-align: left;
  padding-top: 1.25rem;
  padding-bottom: 3.25rem;
}
.hero-slide--spotlight .hero-title {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  text-align: left;
  margin-bottom: 0;
}
.hero-slide--spotlight .spotlight-name-row {
  margin-bottom: .5rem;
}
.artist-spotlight-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-areas:
    "pic info"
    "label info";
  column-gap: 2rem;
  row-gap: .5rem;
  align-items: start;
}
.artist-spotlight-pic-wrap {
  grid-area: pic;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.artist-spotlight-pic {
  width: 150px;
  height: 270px;
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
  /* box-shadow: 0 0 40px color-mix(in srgb, var(--slide-color, #a855f7) 14%, transparent), 0 6px 28px rgba(0,0,0,.55);*/
}
.artist-spotlight-random-label {
  grid-area: label;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  cursor: default;
  transition: color .2s;
  position: relative;
}
.artist-spotlight-random-label:hover { color: rgba(255,255,255,.95); }
.artist-spotlight-info {
  grid-area: info;
  align-self: center;
  min-width: 0;
}
.artist-spotlight-tags {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
/* Higher-contrast chips on the hero background */
.artist-spotlight-tags .tag-chip {
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 32%, rgba(0,0,0,.45));
  border-color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 65%, transparent);
  color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 20%, #fff);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.artist-spotlight-tags .tag-chip:hover {
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 55%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 85%, transparent);
  color: #fff;
}
.artist-spotlight-bio {
  font-size: .82rem;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  line-height: 1.65;
  margin: 0 0 .85rem;
  max-width: 340px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.artist-spotlight-stats {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.artist-spotlight-stat {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: rgba(255,255,255,.68);
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}
/* Spotlight always has a dark photo overlay - keep white text + shadow even in light mode */
[data-theme="light"] .artist-spotlight-bio { color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.4); }
[data-theme="light"] .artist-spotlight-stat { color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
[data-theme="light"] .artist-spotlight-random-label { color: rgba(255,255,255,.80); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
@media (max-width: 640px) {
  .artist-spotlight-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "pic"
      "info";
    row-gap: .75rem;
    column-gap: 0;
  }
  .artist-spotlight-info { align-self: auto; }
  .hero-slide--spotlight .hero-content { text-align: center; }
  .hero-slide--spotlight .hero-title { text-align: center; font-size: 2.2rem; }
  .hero-slide--spotlight .spotlight-name-row { justify-content: center; flex-direction: column; gap: .45rem; }
  .artist-spotlight-pic  { width: 120px; height: 210px; }
  .artist-spotlight-bio  { max-width: 100%; text-align: center; }
  .artist-spotlight-tags,
  .artist-spotlight-stats { justify-content: center; }
  .artist-spotlight-info .hero-actions { justify-content: center; }
  /* Bookable badge becomes an inline pill with text */
  .spotlight-bookable-icon {
    width: auto;
    height: auto;
    padding: .28rem .75rem;
    border-radius: 20px;
    gap: .35rem;
    font-size: .78rem;
    align-self: center;
  }
  .spotlight-bookable-icon::after { display: none; }
  .spotlight-bookable-text { display: inline; }
}

/* ── Something to Listen To slide ───────────────────────────────────────── */
.hero-pill--random {
  background: color-mix(in srgb, var(--slide-color, #f59e0b) 14%, transparent);
  border-color: color-mix(in srgb, var(--slide-color, #f59e0b) 40%, transparent);
  color: color-mix(in srgb, var(--slide-color, #f59e0b) 30%, #fff);
}
.random-liveset-gradient-text {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--slide-color, #f59e0b) 78%, #fff) 0%,
    color-mix(in srgb, var(--slide-color, #f59e0b) 28%, #fff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.random-liveset-showcase {
  max-width: 500px;
  margin: 0 auto;
}
.random-liveset-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: color-mix(in srgb, var(--slide-color, #f59e0b) 8%, rgba(0,0,0,.45));
  border: 1px solid color-mix(in srgb, var(--slide-color, #f59e0b) 26%, rgba(255,255,255,.07));
  border-radius: 12px;
  padding: .85rem 1rem;
  backdrop-filter: blur(12px);
  margin-bottom: .85rem;
}
.random-liveset-thumb-btn {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--slide-color, #f59e0b) 20%, rgba(0,0,0,.6));
  border: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.random-liveset-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.random-liveset-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  color: rgba(255,255,255,.55);
}
.random-liveset-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
  font-size: 1.1rem;
  color: #fff;
  opacity: .5;
  transition: opacity .15s;
}
.random-liveset-thumb-btn:hover .random-liveset-play-overlay { opacity: 1; }
.random-liveset-thumb-btn.is-playing .random-liveset-play-overlay { opacity: 1; }
.random-liveset-platform-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.random-liveset-platform-badge .bi { font-size: .5rem; color: #fff; }
.random-liveset-body {
  flex: 1;
  min-width: 0;
}
.random-liveset-title {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
  transition: color .15s;
}
.random-liveset-title:hover {
  color: color-mix(in srgb, var(--slide-color, #f59e0b) 50%, #fff);
}
.random-liveset-artist {
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.random-liveset-artist a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.random-liveset-artist a:hover { color: #fff; }
.hero-slide--random-liveset .hero-title { font-size: clamp(2rem, 5.5vw, 3.5rem); margin-bottom: .65rem; }
.hero-slide--random-liveset .hero-sub   { margin-bottom: 1.1rem; }
/* Random liveset row: same dark-glass approach as FotW - white title was invisible on near-transparent bg */
[data-theme="light"] .random-liveset-row {
  background: color-mix(in srgb, var(--slide-color, #f59e0b) 8%, rgba(0,0,0,.52));
  border-color: color-mix(in srgb, var(--slide-color, #f59e0b) 26%, rgba(255,255,255,.10));
}
[data-theme="light"] .random-liveset-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
[data-theme="light"] .random-liveset-artist { color: var(--text-muted); }
@media (max-width: 640px) {
  .hero-slide--random-liveset .hero-sub { display: none; }
}

/* ── Small-phone compaction (≤ 480 px, e.g. iPhone 15 / SE / 13 mini) ───── */
@media (max-width: 480px) {
  /* Shared hero layout */
  .hero-content {
    padding: 1.25rem 0 2.75rem;
  }
  .hero-title {
    font-size: 2.1rem;
    margin-bottom: .85rem;
  }
  .hero-sub {
    font-size: .9rem;
    margin-bottom: 1.75rem;
    line-height: 1.55;
  }
  .hero-pill {
    font-size: .66rem;
    padding: .26rem .75rem;
    margin-bottom: 1rem;
  }
  /* Buttons scoped to hero CTAs only – not global btn-accent/btn-ghost */
  .hero-actions .btn-accent,
  .hero-actions .btn-ghost {
    padding: .55rem 1.1rem;
    font-size: .85rem;
    gap: .35rem;
  }
  /* Stats row */
  .hero-stats {
    gap: 1.75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    flex-wrap: wrap; /* safety for 4-digit counts */
  }
  .hero-stat-num { font-size: 1.4rem; }
  .hero-stat-lbl { font-size: .62rem; }

  /* ── Artist Spotlight slide ── */
  .hero-slide--spotlight .hero-content {
    padding-top: .9rem;
    padding-bottom: 2.25rem;
  }
  .hero-slide--spotlight .hero-title {
    font-size: 1.7rem;
  }
  .spotlight-bookable-icon {
    width: 1.65rem;
    height: 1.65rem;
    font-size: .85rem;
  }
  .artist-spotlight-layout {
    gap: .65rem;
  }
  .artist-spotlight-pic-wrap {
    gap: .3rem;
  }
  .artist-spotlight-pic {
    width: 95px;
    height: 170px;
  }
  .artist-spotlight-wordmark {
    max-height: 78px;
    max-width: 240px;
  }
  .artist-spotlight-random-label {
    font-size: .62rem;
  }
  .artist-spotlight-tags {
    margin-bottom: .5rem;
    gap: .25rem;
  }
  .artist-spotlight-tags .tag-chip {
    font-size: .62rem;
    padding: .1rem .42rem;
  }
  .artist-spotlight-bio {
    font-size: .78rem;
    line-height: 1.5;
    margin-bottom: .55rem;
  }
  .artist-spotlight-stats {
    gap: .55rem;
    margin-bottom: .65rem;
  }
  .artist-spotlight-stat {
    font-size: .7rem;
  }
  .artist-spotlight-info .hero-actions {
    gap: .5rem;
  }

  /* ── FotW title compaction ── */
  [data-slide="1"] .hero-title { font-size: 1.85rem; }

  /* ── New to the Scene title compaction ── */
  .hero-slide--new-artists .hero-title { font-size: 1.85rem; }

  /* ── Random Liveset title compaction ── */
  .hero-slide--random-liveset .hero-title { font-size: 1.85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Light-mode hero: comprehensive pass
   Removes dark text-shadows, fixes white-on-white pill/eyebrow/link colors,
   flips hard-coded rgba(0,0,0,...) backgrounds to light equivalents.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base hero elements ──────────────────────────────────────────────────── */
[data-theme="light"] .hero-title { text-shadow: none; }
[data-theme="light"] .hero-sub   { text-shadow: none; }
[data-theme="light"] .hero-stats { border-top-color: rgba(0,0,0,.12); }

/* Chevrons: dark frosted bg makes white icon readable on both dark (photo) and light (gradient) backgrounds.
   Only tweak the border tint slightly for light mode - the base dark backdrop does the heavy lifting. */
[data-theme="light"] .hero-chevron       { border-color: rgba(0,0,0,.12); }
[data-theme="light"] .hero-chevron:hover { background: rgba(0,0,0,.46); border-color: rgba(0,0,0,.22); }

/* Bg layers: strip dark rgba tint so gradient colors show on white */
[data-theme="light"] .hero-bg-layer--default,
[data-theme="light"] .hero-bg-layer--artists,
[data-theme="light"] .hero-bg-layer--livesets { background-color: transparent; }

/* ── Hero pills: text mixes with #fff → near-invisible on light bg ────────── */
[data-theme="light"] .hero-pill--fotw {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 75%, #000);
}
[data-theme="light"] .hero-pill--new-artists {
  color: color-mix(in srgb, var(--slide-color, #7c3aed) 75%, #000);
}
[data-theme="light"] .hero-pill--spotlight {
  color: color-mix(in srgb, var(--slide-color, #a855f7) 75%, #000);
  text-shadow: none;
}
[data-theme="light"] .hero-pill--random {
  color: color-mix(in srgb, var(--slide-color, #f59e0b) 75%, #000);
}

/* ── Per-slide btn-accent: text mixes with #fff → pale on light bg ─────────── */
[data-theme="light"] .hero-slide--spotlight .btn-accent,
[data-theme="light"] .hero-slide--new-artists .btn-accent,
[data-theme="light"] .hero-slide--random-liveset .btn-accent {
  color: color-mix(in srgb, var(--slide-color, #a855f7) 80%, #000);
}

/* ── Spotlight slide ─────────────────────────────────────────────────────── */
[data-theme="light"] .spotlight-gradient-text {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
}
[data-theme="light"] .artist-spotlight-tags .tag-chip {
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 12%, rgba(0,0,0,.05));
  border-color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 40%, transparent);
  color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 72%, #000);
  text-shadow: none;
}
[data-theme="light"] .artist-spotlight-tags .tag-chip:hover {
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 22%, rgba(0,0,0,.05));
  border-color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 60%, transparent);
  color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 88%, #000);
}

/* ── FotW slide ──────────────────────────────────────────────────────────── */
[data-theme="light"] .fotw-slug-note {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 70%, #000);
}
[data-theme="light"] .fotw-slug-note:hover {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 88%, #000);
}
[data-theme="light"] .fotw-eyebrow {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 65%, #000);
}
[data-theme="light"] .fotw-browse-link a {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 65%, #000);
}
[data-theme="light"] .fotw-browse-link a:hover {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 85%, #000);
  text-decoration: underline;
}
[data-theme="light"] .fotw-no-new-note a {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 65%, #000);
}
[data-theme="light"] .fotw-badge--new {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 65%, #000);
}
[data-theme="light"] .fotw-badge--yours {
  color: color-mix(in srgb, var(--accent-base) 65%, #000);
}
/* FotW slide in light mode: always has a dark photo overlay - restore white text + shadows */
[data-theme="light"] [data-slide="1"] .hero-sub {
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 10px rgba(0,0,0,.9),
    0 0 32px rgba(0,0,0,.6),
    0 0 60px color-mix(in srgb, var(--fotw-color, #0ea5e9) 18%, transparent);
}
[data-theme="light"] [data-slide="1"] .fotw-slug-note {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, rgba(255,255,255,.55));
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
[data-theme="light"] [data-slide="1"] .fotw-eyebrow {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 55%, rgba(255,255,255,.5));
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
[data-theme="light"] [data-slide="1"] .fotw-browse-link a {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 50%, rgba(255,255,255,.6));
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}

/* FotW track rows: keep dark backdrop in light mode - rows float over the hero, not over page content.
   White text on rgba(0,0,0,.04) was invisible; frosted dark glass stays readable on any hero background. */
[data-theme="light"] [data-slide="1"] .ls-track-row {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 8%, rgba(0,0,0,.58));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 22%, rgba(255,255,255,.12));
}
[data-theme="light"] [data-slide="1"] .ls-track-row:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 14%, rgba(0,0,0,.66));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 42%, rgba(255,255,255,.18));
}
[data-theme="light"] [data-slide="1"] .ls-track-title {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
[data-theme="light"] [data-slide="1"] .ls-track-title:hover {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 65%, #fff);
}
[data-theme="light"] [data-slide="1"] .ls-track-artists,
[data-theme="light"] [data-slide="1"] .ls-track-artists a { color: rgba(255,255,255,.78); }
[data-theme="light"] [data-slide="1"] .ls-track-date { color: rgba(255,255,255,.55); }
[data-theme="light"] [data-slide="1"] .ls-track-side {
  border-left-color: rgba(255,255,255,.08);
}
[data-theme="light"] [data-slide="1"] .ls-track-row--yours .ls-track-title { color: #c4b5fd; }

/* FotW empty / roster / callout panels */
[data-theme="light"] .fotw-empty-cta {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 5%, rgba(0,0,0,.03));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 28%, rgba(0,0,0,.1));
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, #000);
}
[data-theme="light"] .fotw-empty-cta--first p {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 50%, #000);
}
[data-theme="light"] .fotw-empty-icon {
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 50%, #000);
}
[data-theme="light"] .fotw-empty-btn {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 10%, rgba(0,0,0,.04));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 40%, transparent);
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 72%, #000);
}
[data-theme="light"] .fotw-empty-btn:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 18%, rgba(0,0,0,.05));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, transparent);
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 88%, #000);
}
[data-theme="light"] .fotw-empty-btn--accent {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 18%, rgba(0,0,0,.04));
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 82%, #000);
}
[data-theme="light"] .fotw-empty-btn--accent:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 30%, rgba(0,0,0,.04));
  color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 92%, #000);
}
[data-theme="light"] .fotw-roster-item {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 6%, rgba(0,0,0,.03));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 22%, rgba(0,0,0,.08));
  color: var(--white);
}
[data-theme="light"] .fotw-roster-item:hover {
  background: color-mix(in srgb, var(--fotw-color, #0ea5e9) 12%, rgba(0,0,0,.04));
  border-color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 42%, rgba(0,0,0,.08));
  color: var(--white);
}
[data-theme="light"] .fotw-user-callout-icon { color: var(--accent-base); }
[data-theme="light"] .fotw-user-callout-btn {
  background: color-mix(in srgb, var(--accent-base) 10%, rgba(0,0,0,.04));
  border-color: color-mix(in srgb, var(--accent-base) 40%, transparent);
  color: var(--accent-base);
}
[data-theme="light"] .fotw-user-callout-btn:hover {
  background: color-mix(in srgb, var(--accent-base) 18%, rgba(0,0,0,.04));
  color: color-mix(in srgb, var(--accent-base) 85%, #000);
}

/* ── New artist logo: lighten drop-shadow ────────────────────────────────── */
[data-theme="light"] .new-artist-logo-img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
}

/* ── Random liveset slide ────────────────────────────────────────────────── */
[data-theme="light"] .random-liveset-title:hover {
  color: color-mix(in srgb, var(--slide-color, #f59e0b) 75%, #000);
}
[data-theme="light"] .random-liveset-artist { color: rgba(0,0,0,.55); text-shadow: none; }
[data-theme="light"] .random-liveset-artist a:hover { color: rgba(0,0,0,.85); }
[data-theme="light"] .random-liveset-thumb-fallback { color: rgba(0,0,0,.4); }
[data-theme="light"] .random-liveset-play-overlay {
  background: rgba(0,0,0,.14);
  color: rgba(0,0,0,.6);
}

/* ── prefers-color-scheme mirror for base elements ───────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-title { text-shadow: none; }
  :root:not([data-theme="dark"]) .hero-sub   { text-shadow: none; }
  :root:not([data-theme="dark"]) .hero-stats { border-top-color: rgba(0,0,0,.12); }
  :root:not([data-theme="dark"]) .hero-chevron       { border-color: rgba(0,0,0,.12); }
  :root:not([data-theme="dark"]) .hero-chevron:hover { background: rgba(0,0,0,.46); border-color: rgba(0,0,0,.22); }
  :root:not([data-theme="dark"]) .hero-bg-layer--default,
  :root:not([data-theme="dark"]) .hero-bg-layer--artists,
  :root:not([data-theme="dark"]) .hero-bg-layer--livesets { background-color: transparent; }
  :root:not([data-theme="dark"]) .new-artist-logo-img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.18)); }
  /* FotW slide: dark photo always present - restore white text */
  :root:not([data-theme="dark"]) [data-slide="1"] .hero-sub {
    color: rgba(255,255,255,.92);
    text-shadow:
      0 1px 10px rgba(0,0,0,.9),
      0 0 32px rgba(0,0,0,.6),
      0 0 60px color-mix(in srgb, var(--fotw-color, #0ea5e9) 18%, transparent);
  }
  :root:not([data-theme="dark"]) [data-slide="1"] .fotw-slug-note {
    color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 60%, rgba(255,255,255,.55));
    text-shadow: 0 1px 8px rgba(0,0,0,.7);
  }
  :root:not([data-theme="dark"]) [data-slide="1"] .fotw-eyebrow {
    color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 55%, rgba(255,255,255,.5));
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
  }
  :root:not([data-theme="dark"]) [data-slide="1"] .fotw-browse-link a {
    color: color-mix(in srgb, var(--fotw-color, #0ea5e9) 50%, rgba(255,255,255,.6));
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
  }
}