/* ============================================================
   STAGELIGHT — night-gig poster brought to life
   All selectors scoped under .pg-stagelight
   Signature palette: midnight-rose  (#171226 / #f0eaf7 / #ff6f91)
   ============================================================ */

/* ── Keyframes (at root — always defined, applied only under
      prefers-reduced-motion: no-preference below) ────────── */

@keyframes sl-wash-drift {
  from { background-position: 0%   0%,   100% 100%, 0 0; }
  to   { background-position: 80%  55%,  15%  40%,  0 0; }
}

@keyframes sl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes sl-name-pulse {
  0%, 100% { text-shadow:
    0 0  8px var(--accent),
    0 0 24px var(--accent),
    0 0 60px color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 120px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 200px color-mix(in srgb, var(--accent) 18%, transparent); }
  50% { text-shadow:
    0 0 14px var(--accent),
    0 0 36px var(--accent),
    0 0 80px color-mix(in srgb, var(--accent) 72%, transparent),
    0 0 160px color-mix(in srgb, var(--accent) 42%, transparent),
    0 0 260px color-mix(in srgb, var(--accent) 22%, transparent); }
}

/* ── Base ─────────────────────────────────────────────────── */

.pg-stagelight {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
}

/* ── Header ─────────────────────────────────────────────────*/

.pg-stagelight .sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3.4cqw, 2rem);
  border-bottom: 1px solid var(--line);
}

.pg-stagelight .sl-logo {
  max-height: 38px;
  display: block;
}

.pg-stagelight .sl-headname {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Hero — always a dark ground regardless of palette ────── */

.pg-stagelight .sl-hero {
  position: relative;
  min-height: clamp(500px, 92cqh, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Explicit near-black base so neon reads on any palette */
  background: color-mix(in srgb, var(--bg) 18%, #06040d);
  color: #f0ecf8;
}

/* Animated gradient wash — accent orbs drifting on dark */
.pg-stagelight .sl-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 60% at 22% 32%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%),
    radial-gradient(ellipse 55% 72% at 76% 66%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg) 18%, #06040d);
  background-size: 200% 200%, 180% 180%, 100% 100%;
}

/* Hero photo */
.pg-stagelight .sl-hero-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pg-stagelight .sl-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(.5) contrast(1.12);
}

/* Accent gel over the photo */
.pg-stagelight .sl-hero-gel {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Text block sits above everything */
.pg-stagelight .sl-hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5cqw, 3.6rem) clamp(1rem, 4cqw, 2.8rem) clamp(2.8rem, 7cqw, 5rem);
  /* bottom scrim for legibility */
  background:
    linear-gradient(to top,
      color-mix(in srgb, #06040d 72%, transparent) 0%,
      transparent 100%);
}

/* Tagline kicker */
.pg-stagelight .sl-tag {
  margin-bottom: 1rem;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Huge neon name */
.pg-stagelight .sl-name {
  font: 400 clamp(4rem, 17cqw, 10.5rem)/.82 'Bebas Neue', var(--font-black);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0  8px var(--accent),
    0 0 24px var(--accent),
    0 0 60px color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 120px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 200px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Motion — slow tasteful loops */
@media (prefers-reduced-motion: no-preference) {
  .pg-stagelight .sl-wash {
    animation: sl-wash-drift 20s ease-in-out infinite alternate;
  }
  /* 10 s breathing — just inside the 8-12 s sweet spot */
  .pg-stagelight .sl-name {
    animation: sl-name-pulse 10s ease-in-out infinite;
  }
}

/* ── Marquee strip ───────────────────────────────────────── */

.pg-stagelight .sl-marq-wrap {
  background: var(--accent);
  color: color-mix(in srgb, var(--bg) 88%, transparent);
  overflow: hidden;
  padding: .9rem 0;
}

.pg-stagelight .sl-marq {
  overflow: hidden;
  white-space: nowrap;
}

.pg-stagelight .sl-marq-track {
  display: inline-flex;
  width: max-content;
}

.pg-stagelight .sl-mi {
  display: inline-block;
  padding: 0 2.2rem;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Separator dot between items */
.pg-stagelight .sl-mi::after {
  content: '·';
  margin-left: 2.2rem;
  opacity: .45;
}

@media (prefers-reduced-motion: no-preference) {
  .pg-stagelight .sl-marq-track {
    animation: sl-marquee 34s linear infinite;
  }
  /* Pause on hover — gives the reader a chance to read a title */
  .pg-stagelight .sl-marq-wrap:hover .sl-marq-track {
    animation-play-state: paused;
  }
}

/* Overflow count, shown below the band if productions exceed cap */
.pg-stagelight .sl-marq-tail {
  text-align: center;
  padding: .35rem 1rem .1rem;
  font: 500 8px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 65%, transparent);
  background: var(--accent);
}

/* ── Stats — illuminated signage ────────────────────────── */

.pg-stagelight .sl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-bottom: 1px solid var(--line);
}

.pg-stagelight .sl-stat {
  padding: 2.2rem clamp(1rem, 3cqw, 1.8rem);
  border-right: 1px solid var(--line);
  display: grid;
  gap: .55rem;
  align-content: center;
}

.pg-stagelight .sl-stat:last-child { border-right: 0; }

.pg-stagelight .sl-stat b {
  display: block;
  font: 400 clamp(2.6rem, 9cqw, 5.4rem)/1 'Bebas Neue', var(--font-black);
  color: var(--accent);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--accent) 80%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 44%, transparent);
}

.pg-stagelight .sl-stat span {
  font: 500 8px/1.4 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Bio ─────────────────────────────────────────────────── */

.pg-stagelight .sl-bio {
  padding: clamp(3rem, 8cqw, 5.6rem) clamp(1rem, 3.4cqw, 2.4rem);
  max-width: 760px;
}

.pg-stagelight .sl-bio-text {
  font: 400 clamp(1rem, 2.2cqw, 1.18rem)/1.68 var(--font-serif);
  color: var(--ink);
}

/* ── Gallery — gel-treated image grid ───────────────────── */

.pg-stagelight .sl-gallery {
  padding: clamp(2.4rem, 6cqw, 4rem) clamp(1rem, 3.4cqw, 2.4rem);
}

.pg-stagelight .sl-gel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.pg-stagelight .sl-gel-fig {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.pg-stagelight .sl-gel-fig img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  filter: grayscale(.55) contrast(1.08) brightness(.88);
  transition: transform .7s ease, filter .45s ease;
}

.pg-stagelight .sl-gel-fig:hover img {
  transform: scale(1.05);
  /* de-gray + boost saturation for a spotlight intensify effect */
  filter: grayscale(0) contrast(1.12) brightness(.86) saturate(1.4);
}

/* Accent gel overlay — tints grayscale into the palette colour */
.pg-stagelight .sl-gel-wash {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 44%, transparent);
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity .45s ease;
}

.pg-stagelight .sl-gel-fig:hover .sl-gel-wash {
  /* keep gel strong on hover — the colour tint intensifies with the image */
  opacity: .85;
}

.pg-stagelight .sl-gel-fig figcaption {
  position: absolute;
  bottom: 6px;
  left: 7px;
  font: 400 7px/1 var(--font-mono);
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  pointer-events: none;
}

.pg-stagelight .sl-gal-more {
  margin-top: 1rem;
}

/* ── Shared mono kicker label ────────────────────────────── */

.pg-stagelight .sl-kicker {
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Setlist — tracks as a gig programme ────────────────── */

.pg-stagelight .sl-setlist {
  padding: clamp(3rem, 8cqw, 5rem) clamp(1rem, 3.4cqw, 2.4rem);
  background: var(--surface);
}

.pg-stagelight .sl-setlist-label {
  margin-bottom: 1.8rem;
}

/* Extend the shared .tracks/.track-row tokens */
.pg-stagelight .sl-setlist .tracks {
  border-top-color: color-mix(in srgb, var(--ink) 28%, var(--surface));
}

.pg-stagelight .sl-setlist .track-row {
  border-bottom-color: color-mix(in srgb, var(--ink) 16%, var(--surface));
  transition: background .22s ease, padding-left .22s ease;
}

.pg-stagelight .sl-setlist .track-row:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  padding-left: .75rem;
}

.pg-stagelight .sl-setlist .tr-num {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .08em;
}

.pg-stagelight .sl-setlist .tr-links a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ── YouTube reel ────────────────────────────────────────── */

.pg-stagelight .sl-reel {
  margin: 0 clamp(1rem, 3.4cqw, 2.4rem) clamp(3rem, 8cqw, 5rem);
  border: 1px solid var(--line);
}

/* ── Columns: works / publishers / territories ───────────── */

.pg-stagelight .sl-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pg-stagelight .sl-col {
  padding: clamp(2.4rem, 6cqw, 4rem) clamp(1rem, 3.4cqw, 2.4rem);
  border-right: 1px solid var(--line);
}

.pg-stagelight .sl-col:last-child { border-right: 0; }

.pg-stagelight .sl-col .sl-kicker {
  margin-bottom: 1.2rem;
  color: var(--accent);
}

.pg-stagelight .sl-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-stagelight .sl-col li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  font: 500 12px/1.4 var(--font-sans);
}

/* Shared "+N more" text */
.pg-stagelight .sl-more {
  margin-top: .9rem;
  font: 500 8px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Footer — inverted panel ─────────────────────────────── */

.pg-stagelight .sl-foot {
  padding: clamp(3rem, 9cqw, 6rem) clamp(1rem, 3.4cqw, 2.4rem) 2.4rem;
  background: var(--ink);
  color: var(--bg);
}

.pg-stagelight .sl-contact {
  margin-bottom: clamp(2rem, 6cqw, 3.6rem);
}

.pg-stagelight .sl-contact .sl-kicker {
  color: color-mix(in srgb, var(--bg) 65%, var(--accent));
  margin-bottom: 1rem;
}

.pg-stagelight .sl-contact-link {
  display: block;
  margin-top: .45rem;
  font: 400 clamp(1.4rem, 4.4cqw, 2.6rem)/.88 var(--font-serif);
  color: var(--bg);
  transition: color .2s ease;
}

.pg-stagelight .sl-contact-link:hover {
  color: var(--accent);
}

.pg-stagelight .sl-social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(2rem, 6cqw, 3.4rem);
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--bg) 52%, transparent);
}

.pg-stagelight .sl-social .soc {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
  transition: color .2s ease;
}

.pg-stagelight .sl-social .soc:hover {
  color: var(--accent);
}

/* ── Scroll-reveal (only when stage carries .animate) ─────── */

.stage.animate .pg-stagelight > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}

/* Hero fades but doesn't shift — it's full bleed */
.stage.animate .pg-stagelight > .sl-hero {
  transform: none;
  transition: opacity 1.1s ease;
}

.stage.animate .pg-stagelight > *.in {
  opacity: 1;
  transform: none;
}

/* ── Container queries — mobile-first from 390px ─────────── */

@container page (max-width: 620px) {
  .pg-stagelight .sl-gel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pg-stagelight .sl-cols {
    grid-template-columns: 1fr;
  }
  .pg-stagelight .sl-col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pg-stagelight .sl-col:last-child {
    border-bottom: 0;
  }
}

@container page (max-width: 390px) {
  .pg-stagelight .sl-name {
    /* reduce glow layers to keep rendering lean on small screens */
    text-shadow:
      0 0 6px var(--accent),
      0 0 18px var(--accent),
      0 0 45px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .pg-stagelight .sl-gel-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pg-stagelight .sl-stats {
    grid-template-columns: 1fr 1fr;
  }
  .pg-stagelight .sl-stat:nth-child(even) {
    border-right: 0;
  }
  .pg-stagelight .sl-stat:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
  .pg-stagelight .sl-hero {
    min-height: clamp(420px, 88cqh, 600px);
  }
}

/* ── Selection colour ────────────────────────────────────────── */

.pg-stagelight ::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ── VU-meter accent bars inside stats ───────────────────────── */

/* Keyframe: bar level breathes like a signal meter (9 s ≥ 8 s min) */
@keyframes sl-vu-beat {
  0%   { width: 28%; opacity: .3; }
  100% { width: 82%; opacity: .65; }
}

.pg-stagelight .sl-vu {
  display: block;
  height: 2px;
  width: 60%;
  background: var(--accent);
  opacity: .5;
  margin-top: .55rem;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Offset each bar in the cycle so they don't all peak together */
@media (prefers-reduced-motion: no-preference) {
  .pg-stagelight .sl-vu {
    animation: sl-vu-beat 9s ease-in-out infinite alternate;
  }
  .pg-stagelight .sl-stat:nth-child(2) .sl-vu { animation-delay:  -3s; }
  .pg-stagelight .sl-stat:nth-child(3) .sl-vu { animation-delay:  -6s; }
  .pg-stagelight .sl-stat:nth-child(4) .sl-vu { animation-delay: -1.5s; }
}

/* ── xsec flex zone — stagelight voice ──────────────────────────────────── */
.pg-stagelight .xsec-zone {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.pg-stagelight .xsec-h {
  font-family: var(--font-black);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  border: none;
  padding: 0;
}
.pg-stagelight .xsec-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.pg-stagelight .xsec-list li { font-family: var(--font-body); }
.pg-stagelight .xsec-grid img { filter: saturate(.55) contrast(1.1); }