:root {
  --bg: #0f0f23;
  --surface: #1b1b30;
  --surface-2: #27273b;
  --border: #312e81;
  --fg: #f8fafc;
  --muted: #a5b0c4;
  --play: #22c55e;
  --on-play: #0f172a;
  --accent: #22c55e;
  --font-head: "Righteous", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 80px;
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--play); color: var(--on-play); padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 12px max(16px, calc((100% - 1200px) / 2));
  background: rgba(15, 15, 35, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.25rem var(--font-head); white-space: nowrap; }
.brand-icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--play); color: var(--on-play); }
.nav-list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; text-decoration: none; font-size: 0.875rem; font-weight: 500; color: var(--muted);
  transition: background-color 0.2s, color 0.2s;
}
.nav-list a:hover { background: var(--surface-2); color: var(--fg); }

/* Hero */
.hero { position: relative; min-height: min(88dvh, 760px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-img {
  position: absolute; top: -16%; left: -2%; width: 132%; height: 132%; object-fit: cover;
  object-position: 50% 18%;
  z-index: -2;
}
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,15,35,0.65) 0%, rgba(15,15,35,0.65) 78%, var(--bg) 100%);
}
.hero-inner { width: min(1200px, 100% - 32px); margin: 0 auto; padding: var(--s7) 0 var(--s6); }
.eyebrow { margin: 0 0 var(--s2); color: var(--play); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8125rem; }
h1 { margin: 0; font: 400 clamp(2.75rem, 9vw, 6.5rem)/1 var(--font-head); text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,0.6); }
h1 span { display: block; background: linear-gradient(90deg, #22c55e, #f5b942 55%, #ff6b57); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 56ch; margin: var(--s4) 0; font-size: clamp(1rem, 2.2vw, 1.25rem); color: #e2e8f0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s5); }
.hero-stats div { display: grid; }
.hero-stats strong { font: 400 2.25rem/1 var(--font-head); color: #fff; }
.hero-stats span { color: var(--muted); font-size: 0.875rem; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px;
  background: var(--play); color: var(--on-play); font-weight: 600; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 30px rgba(34,197,94,0.35); transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(34,197,94,0.5); }
.hero-credit { margin: var(--s4) 0 0; color: var(--muted); font-size: 0.8125rem; }

/* Filters */
.filters-wrap { padding: var(--s6) 0 var(--s4); }
.section-title { margin: 0 0 var(--s3); font: 400 clamp(1.75rem, 4vw, 2.5rem)/1.15 var(--font-head); }
.filters { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--fg); border: 1.5px solid var(--border);
  font: 500 0.9375rem var(--font-body);
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}
.chip:hover { background: var(--surface-2); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--play); border-color: var(--play); color: var(--on-play); font-weight: 600; }
.filter-status { margin: var(--s3) 0 0; color: var(--muted); font-size: 0.875rem; }

/* Singer sections */
.singer { padding: var(--s6) 0; position: relative; }
.singer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.6;
}
.singer-grid { display: grid; gap: var(--s5); align-items: start; }
.singer-card { position: relative; }
.singer-card figure { margin: 0 0 var(--s3); }
.singer-card img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: var(--radius); border: 2px solid var(--accent);
  box-shadow: 0 20px 60px -20px var(--accent);
}
.singer-card figcaption { margin-top: var(--s2); font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.singer-card figcaption a { color: var(--muted); }
.lang { margin: 0; color: var(--accent); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.singer-card h2 { margin: 4px 0; font: 400 clamp(1.75rem, 4vw, 2.5rem)/1.1 var(--font-head); text-wrap: balance; }
.tagline { margin: 0; color: var(--muted); }

.count { margin: 0 0 var(--s3); color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.songs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.song {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3);
  padding: 12px 12px 12px 16px; background: var(--surface); border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}
.song[hidden], .empty[hidden] { display: none; }
.song:hover { background: var(--surface-2); border-color: var(--accent); transform: translateX(4px); }
.song-no { font: 400 1.25rem var(--font-head); color: var(--accent); min-width: 2ch; font-variant-numeric: tabular-nums; }
.song-title { margin: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.song-meta { margin: 2px 0 0; color: var(--muted); font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.tag { padding: 1px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 500; border: 1px solid currentColor; color: var(--fg); }
.tag-energetic { color: #ff9b73; }
.tag-slow { color: #7dd3fc; }
.tag-melodious { color: #f0abfc; }
.tag-drums { color: #fcd34d; }
.play {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center;
  padding: 0 16px; border-radius: 999px; background: var(--play); color: var(--on-play);
  font-weight: 600; font-size: 0.875rem; text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.play:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(34,197,94,0.45); }
.empty { padding: var(--s4); text-align: center; color: var(--muted); background: var(--surface); border-radius: 14px; }

/* Mood gallery */
.moods { padding: var(--s7) 0; }
.section-hint { margin: calc(var(--s3) * -1) 0 var(--s4); color: var(--muted); }
.mood-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.mood-card { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.mood-trigger {
  all: unset; box-sizing: border-box; display: block; position: relative;
  width: 100%; height: 100%; cursor: pointer;
}
.mood-trigger:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: var(--radius); }
.mood-trigger img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.3s; }
.mood-trigger:hover img, .mood-trigger:focus-visible img { transform: scale(1.05); }
.mood-trigger[aria-pressed="true"] img { filter: saturate(1.15); }
.mood-trigger[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); border: 3px solid var(--play); pointer-events: none;
}
.mood-caption {
  position: absolute; inset: auto 0 0; padding: 48px 20px 16px; display: grid; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.88)); font-size: 0.875rem; color: #e2e8f0; text-align: left;
}
.mood-caption strong { font: 400 1.375rem var(--font-head); color: #fff; }
.mood-hint {
  position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(15,15,35,0.75); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.75rem; font-weight: 600; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
.mood-trigger:hover .mood-hint, .mood-trigger:focus-visible .mood-hint { opacity: 1; transform: none; }
.mood-trigger[aria-pressed="true"] .mood-hint { opacity: 1; transform: none; background: var(--play); color: var(--on-play); }

/* Footer */
.site-footer { padding: var(--s6) 0; background: #0a0a18; border-top: 1px solid rgba(255,255,255,0.08); color: var(--muted); font-size: 0.875rem; }
.footer-brand { font: 400 1.5rem var(--font-head); color: var(--fg); margin: 0 0 var(--s2); }
.site-footer p { max-width: 70ch; margin: 0 0 var(--s3); }
.credits summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--fg); }
.credits ul { margin: 0; padding-left: 20px; }
.credits a { color: var(--muted); }

/* Responsive */
@media (min-width: 640px) { .mood-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .singer { padding: var(--s7) 0; }
  .singer-grid { grid-template-columns: 340px 1fr; gap: var(--s6); }
  .singer-card { position: sticky; top: 96px; }
}
@media (max-width: 860px) { .nav-list { display: none; } }
@media (max-width: 480px) {
  .song { grid-template-columns: auto 1fr; }
  .play { grid-column: 1 / -1; width: 100%; }
  .song-no { display: none; }
  .song { grid-template-columns: 1fr; }
}

/* Motion */
.js-motion .reveal, .js-motion .mood-card, .js-motion .song-panel { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-motion .in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}