/* 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, var(--fotw-color-default)) 14%, transparent);
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 40%, transparent);
  color: color-mix(in srgb, var(--fotw-color, #38bdf8) 30%, #fff);
}

/* FotW slide: scoped overrides for title gradient */
.hero-slide--fotw .fotw-gradient-text {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 80%, #fff) 0%,
    color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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 */
.hero-slide--fotw .hero-title { font-size: clamp(2rem, 5.5vw, 3.5rem); margin-bottom: .75rem; }
.hero-slide--fotw .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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 60%, #fff);
  padding: 0 .1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Track row tinting when inside the FotW slide */
.hero-slide--fotw .ls-track-row {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 6%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 22%, rgba(255,255,255,.08));
  backdrop-filter: blur(10px);
}
.hero-slide--fotw .ls-track-row:hover {
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 45%, transparent);
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 12%, rgba(0,0,0,.4));
}
.hero-slide--fotw .ls-track-row:has(.ls-track-play.is-active) {
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 25%, transparent);
}
.hero-slide--fotw .ls-track-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hero-slide--fotw .ls-track-title:hover { color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, #fff); }
.hero-slide--fotw .ls-track-artists { color: rgba(255,255,255,.78); }
.hero-slide--fotw .ls-track-artists a { color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 55%, #fff); }
.hero-slide--fotw .ls-track-date { color: rgba(255,255,255,.55); }
.hero-slide--fotw .ls-track-side { border-left-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 8%, rgba(0,0,0,.28));
  border: 1px dashed color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 20%, rgba(0,0,0,.3));
  border: 1px solid color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 45%, transparent);
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 38%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 8%, rgba(0,0,0,.28));
  border: 1px solid color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 16%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 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 */
.hero-slide--fotw .ls-track-play-overlay { opacity: .3; }
.hero-slide--fotw .ls-track-play:hover .ls-track-play-overlay,
.hero-slide--fotw .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 */
.hero-slide--fotw { --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; }
  .hero-slide--fotw .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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 50%, transparent);
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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 ───────────────────────────────── */
.hero-slide--fotw .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);
}
.hero-slide--fotw .ls-track-row--yours .ls-track-title { color: #c4b5fd; }
.hero-slide--fotw .ls-track-row--yours:hover { border-color: color-mix(in srgb, var(--accent-base) 65%, transparent); }

/* ── 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, var(--fotw-color-default)) 45%, transparent);
  display: block;
}
.fotw-empty-cta--first p {
  font-size: .83rem;
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 32%, rgba(0,0,0,.3));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, transparent);
  color: #fff;
}
.fotw-empty-btn--accent:hover {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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, var(--fotw-color-default)) 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-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; }
}

/* ── 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; }
/* Monochrome wordmarks: invert on the "wrong" theme so they stay readable.
 * The .is-white / .is-black classes are set server-side from the
 * analyze_logo_tone() sidecar markers (same convention as .roster-logo img
 * in components.css and .profile-logo-rect in profile.css). */
[data-theme="light"] .artist-spotlight-wordmark.is-white {
  filter: invert(1) drop-shadow(0 2px 14px rgba(255,255,255,.55)) brightness(1.08);
}
[data-theme="dark"] .artist-spotlight-wordmark.is-black {
  filter: invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.6)) brightness(1.08);
}
.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 ── */
  .hero-slide--fotw .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, var(--fotw-color-default)) 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, var(--fotw-color-default)) 70%, #000);
}
[data-theme="light"] .fotw-slug-note:hover {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 88%, #000);
}
[data-theme="light"] .fotw-eyebrow {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 65%, #000);
}
[data-theme="light"] .fotw-browse-link a {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 65%, #000);
}
[data-theme="light"] .fotw-browse-link a:hover {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 85%, #000);
  text-decoration: underline;
}
[data-theme="light"] .fotw-no-new-note a {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 65%, #000);
}
[data-theme="light"] .fotw-badge--new {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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"] .hero-slide--fotw .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, var(--fotw-color-default)) 18%, transparent);
}
[data-theme="light"] .hero-slide--fotw .fotw-slug-note {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, rgba(255,255,255,.55));
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
[data-theme="light"] .hero-slide--fotw .fotw-eyebrow {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 55%, rgba(255,255,255,.5));
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
[data-theme="light"] .hero-slide--fotw .fotw-browse-link a {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 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"] .hero-slide--fotw .ls-track-row {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 8%, rgba(0,0,0,.58));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 22%, rgba(255,255,255,.12));
}
[data-theme="light"] .hero-slide--fotw .ls-track-row:hover {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 14%, rgba(0,0,0,.66));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 42%, rgba(255,255,255,.18));
}
[data-theme="light"] .hero-slide--fotw .ls-track-title {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
[data-theme="light"] .hero-slide--fotw .ls-track-title:hover {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 65%, #fff);
}
[data-theme="light"] .hero-slide--fotw .ls-track-artists,
[data-theme="light"] .hero-slide--fotw .ls-track-artists a { color: rgba(255,255,255,.78); }
[data-theme="light"] .hero-slide--fotw .ls-track-date { color: rgba(255,255,255,.55); }
[data-theme="light"] .hero-slide--fotw .ls-track-side {
  border-left-color: rgba(255,255,255,.08);
}
[data-theme="light"] .hero-slide--fotw .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, var(--fotw-color-default)) 5%, rgba(0,0,0,.03));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 28%, rgba(0,0,0,.1));
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, #000);
}
[data-theme="light"] .fotw-empty-cta--first p {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 50%, #000);
}
[data-theme="light"] .fotw-empty-icon {
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 50%, #000);
}
[data-theme="light"] .fotw-empty-btn {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 10%, rgba(0,0,0,.04));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 40%, transparent);
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 72%, #000);
}
[data-theme="light"] .fotw-empty-btn:hover {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 18%, rgba(0,0,0,.05));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, transparent);
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 88%, #000);
}
[data-theme="light"] .fotw-empty-btn--accent {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 18%, rgba(0,0,0,.04));
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 82%, #000);
}
[data-theme="light"] .fotw-empty-btn--accent:hover {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 30%, rgba(0,0,0,.04));
  color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 92%, #000);
}
[data-theme="light"] .fotw-roster-item {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 6%, rgba(0,0,0,.03));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 22%, rgba(0,0,0,.08));
  color: var(--white);
}
[data-theme="light"] .fotw-roster-item:hover {
  background: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 12%, rgba(0,0,0,.04));
  border-color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 42%, rgba(0,0,0,.08));
  color: var(--white);
}
/* ── New artist logo: lighten drop-shadow ────────────────────────────────── */
[data-theme="light"] .new-artist-logo-img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
}
/* Monochrome logos: invert on the "wrong" theme so they stay readable
 * (same convention as .roster-logo img in components.css). */
[data-theme="light"] .new-artist-logo-img.is-white {
  filter: invert(1) drop-shadow(0 1px 3px rgba(255,255,255,.55));
}
[data-theme="dark"] .new-artist-logo-img.is-black {
  filter: invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4));
}

/* ── 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)); }
  :root:not([data-theme="dark"]) .new-artist-logo-img.is-white {
    filter: invert(1) drop-shadow(0 1px 3px rgba(255,255,255,.55));
  }
  :root:not([data-theme="dark"]) .artist-spotlight-wordmark.is-white {
    filter: invert(1) drop-shadow(0 2px 14px rgba(255,255,255,.55)) brightness(1.08);
  }
  /* FotW slide: dark photo always present - restore white text */
  :root:not([data-theme="dark"]) .hero-slide--fotw .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, var(--fotw-color-default)) 18%, transparent);
  }
  :root:not([data-theme="dark"]) .hero-slide--fotw .fotw-slug-note {
    color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 60%, rgba(255,255,255,.55));
    text-shadow: 0 1px 8px rgba(0,0,0,.7);
  }
  :root:not([data-theme="dark"]) .hero-slide--fotw .fotw-eyebrow {
    color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 55%, rgba(255,255,255,.5));
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
  }
  :root:not([data-theme="dark"]) .hero-slide--fotw .fotw-browse-link a {
    color: color-mix(in srgb, var(--fotw-color, var(--fotw-color-default)) 50%, rgba(255,255,255,.6));
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .new-artist-logo-img.is-black {
    filter: invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4));
  }
  :root:not([data-theme="light"]) .artist-spotlight-wordmark.is-black {
    filter: invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.6)) brightness(1.08);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Announcement slide (admin-curated home "news" slide)
   Reusable sibling to FotW. Unlike every other slide, its body MUST render in
   full at every breakpoint - no display:none, no line-clamp - because it
   carries the actual announcement copy. Everything is sized to fit inside the
   carousel min-height (>=440px) even on small phones. Accent is driven by
   --announce-accent (optional, set inline on the slide).
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-slide--announce { position: relative; }
/* Deliberately NO .hero-content override here: inherit the base .hero-content
   (width:100%, padding 2rem 0 4rem, text-align:center) so the announcement
   centres exactly like the FotW / New-to-the-Scene slides. An earlier max-width
   here (without margin:auto) left-aligned the whole block and shoved it off to
   the left on wide screens. Inner blocks self-centre: the lockup via flex, the
   body via its own max-width + margin:auto, the buttons via .hero-actions. */

/* Fancy but lightweight backdrop: a layered colour "mesh" (four soft blooms in
   the brand palette) plus a faint dot-grid texture - richer than a flat 2-stop
   gradient, yet still pure CSS: painted once, no images, no JS, no continuous
   animation, so it's GPU-cheap. Theme-varying bits live in custom props so the
   whole stack is written once and light mode just flips base/dot/bloom colours.
   Blooms hug the corners, leaving the centre on the dark base for text contrast. */
.hero-bg-layer--announce {
  --ann-base: #0a0b12;
  --ann-dot:  rgba(255,255,255,.06);
  --ann-c1: color-mix(in srgb, var(--announce-accent, #8b84ff) 46%, transparent);
  --ann-c2: color-mix(in srgb, #22d3ee 34%, transparent);
  --ann-c3: color-mix(in srgb, var(--accent-2-base) 30%, transparent);
  --ann-c4: color-mix(in srgb, #c026d3 22%, transparent);
  background-color: var(--ann-base);
  background-image:
    radial-gradient(circle, var(--ann-dot) 1px, transparent 1.6px),
    radial-gradient(38% 50% at 12% 14%, var(--ann-c1), transparent 70%),
    radial-gradient(34% 44% at 88% 20%, var(--ann-c2), transparent 70%),
    radial-gradient(45% 55% at 80% 92%, var(--ann-c3), transparent 72%),
    radial-gradient(40% 48% at 16% 88%, var(--ann-c4), transparent 70%);
  background-size: 23px 23px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center, center, center;
}

/* Logo lockup: vrc.dj mark  ♥  partner mark */
.announce-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.85rem, 3.5vw, 1.6rem);
  margin-bottom: clamp(.85rem, 2.5vw, 1.4rem);
}
.announce-lockup-logo {
  width: auto;
  height: clamp(42px, 11vw, 64px);
  object-fit: contain;
  /* Render BOTH marks as one theme-adaptive monochrome silhouette: the vrc.dj
     mark ships white (#fff fill) and partner marks may ship currentColor (black
     as an <img>) or any color. brightness(0) flattens whatever the source colour
     is to black, invert(1) lifts it to white for the dark hero. The light-mode
     rule below drops the invert so it reads dark on the light hero instead. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.55));
}
.announce-lockup-heart {
  font-size: clamp(1.1rem, 3.5vw, 1.7rem);
  color: var(--white);
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.5));
  animation: announce-heart-beat 2.6s ease-in-out infinite;
}
@keyframes announce-heart-beat {
  0%, 100% { transform: scale(1); }
  9%       { transform: scale(1.16); }
  18%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-lockup-heart { animation: none; }
}

/* Title */
.hero-slide--announce .announce-title {
  font-size: clamp(1.7rem, 5vw, 3.1rem);
  margin-bottom: clamp(.75rem, 2vw, 1.1rem);
}

/* Body - the whole point of the slide: always fully visible */
.announce-body {
  max-width: 620px;
  margin: 0 auto clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(.88rem, 2.2vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.announce-body p { margin: 0; }
.announce-body p + p { margin-top: .7em; }

/* Accent-tinted primary button (mirrors spotlight / new-artists / random) */
.hero-slide--announce .btn-accent {
  background: color-mix(in srgb, var(--announce-accent, #8b84ff) 22%, transparent);
  border-color: color-mix(in srgb, var(--announce-accent, #8b84ff) 50%, transparent);
  color: color-mix(in srgb, var(--announce-accent, #8b84ff) 28%, #fff);
}
.hero-slide--announce .btn-accent:hover,
.hero-slide--announce .btn-accent:focus-visible {
  background: color-mix(in srgb, var(--announce-accent, #8b84ff) 35%, transparent);
  border-color: color-mix(in srgb, var(--announce-accent, #8b84ff) 65%, transparent);
}

/* Light mode */
[data-theme="light"] .announce-body { color: rgba(0,0,0,.72); text-shadow: none; }
[data-theme="light"] .hero-bg-layer--announce {
  --ann-base: #eceffb;
  --ann-dot:  rgba(0,0,0,.04);
  --ann-c1: color-mix(in srgb, var(--announce-accent, #8b84ff) 30%, transparent);
  --ann-c2: color-mix(in srgb, #22d3ee 22%, transparent);
  --ann-c3: color-mix(in srgb, var(--accent-2-base) 20%, transparent);
  --ann-c4: color-mix(in srgb, #c026d3 14%, transparent);
}
[data-theme="light"] .announce-lockup-logo { filter: brightness(0) drop-shadow(0 2px 12px rgba(0,0,0,.22)); }
[data-theme="light"] .hero-slide--announce .btn-accent {
  color: color-mix(in srgb, var(--announce-accent, #8b84ff) 80%, #000);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .announce-body { color: rgba(0,0,0,.72); text-shadow: none; }
  :root:not([data-theme="dark"]) .hero-bg-layer--announce {
    --ann-base: #eceffb;
    --ann-dot:  rgba(0,0,0,.04);
    --ann-c1: color-mix(in srgb, var(--announce-accent, #8b84ff) 30%, transparent);
    --ann-c2: color-mix(in srgb, #22d3ee 22%, transparent);
    --ann-c3: color-mix(in srgb, var(--accent-2-base) 20%, transparent);
    --ann-c4: color-mix(in srgb, #c026d3 14%, transparent);
  }
  :root:not([data-theme="dark"]) .announce-lockup-logo { filter: brightness(0) drop-shadow(0 2px 12px rgba(0,0,0,.22)); }
  :root:not([data-theme="dark"]) .hero-slide--announce .btn-accent {
    color: color-mix(in srgb, var(--announce-accent, #8b84ff) 80%, #000);
  }
}

/* Mobile compaction: shrink sizing so the FULL body still fits the carousel
   height. The body is never hidden - only the other slides do that. */
@media (max-width: 640px) {
  .hero-slide--announce .announce-title { font-size: 1.8rem; margin-bottom: .6rem; }
  .announce-body { font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; }
}
@media (max-width: 480px) {
  .announce-lockup { gap: 1rem; margin-bottom: .8rem; }
  .announce-lockup-logo { height: 44px; }
  .hero-slide--announce .announce-title { font-size: 1.55rem; margin-bottom: .5rem; }
  .announce-body { font-size: .86rem; line-height: 1.48; }
}

/* The other slides clip happily on short phones because they hide their sub
   text; the announcement must not. Measured body height is ~456px at ~360px
   wide, which can exceed the 440px carousel floor when 65vh is small (e.g.
   iPhone SE). While the announcement is live, raise the hero floor on mobile so
   the full copy always fits, and compact the very narrowest phones further. */
@media (max-width: 640px) {
  .hero--carousel.hero--has-announce { min-height: clamp(500px, 76vh, 760px); }
}
@media (max-width: 380px) {
  .announce-lockup-logo { height: 40px; }
  .hero-slide--announce .announce-title { font-size: 1.45rem; }
  .announce-body { font-size: .82rem; line-height: 1.45; }
}