/* streamingbeats.com — static site styles */
/* Hybrid Nord palette — surfaces: nord0 (#2e3440), nord1 (#3b4252),
   nord2 (#434c5e), nord3 (#4c566a) | text: nord6 (#eceff4),
   nord9 (#81a1c1) | accents: teal #0d9488, petrol #1a4b5c */
/* Fonts: DM Sans (headings), Inter (body) */

:root {
  --bg: #2e3440;              /* nord0 — page background */
  --surface: #3b4252;          /* nord1 — card / panel surface */
  --surface2: #434c5e;         /* nord2 — hover / secondary surface */
  --surface3: #4c566a;         /* nord3 — border / tertiary */
  --border: #4c566a;           /* nord3 — borders & dividers */
  --text: #eceff4;             /* nord6 — primary text */
  --text-dim: #81a1c1;         /* nord9 — dim / secondary text */
  --text-muted: #616e88;       /* muted variant */
  --accent: #0d9488;           /* teal — primary actions */
  --accent-hover: #14b8a6;     /* brighter teal — hover states */
  --accent2: #1a4b5c;          /* petrol — gradient partner */
  --accent2-hover: #256e83;    /* brighter petrol */
  --green: #a3be8c;            /* nord14 — success / calm */
  --amber: #ebcb8b;            /* nord13 — warning / warm */
  --red: #bf616a;              /* nord11 — error / now playing */
  --radius: 12px;              /* card corners */
  --radius-sm: 8px;            /* small element corners */
  --transition: 0.25s ease;    /* all interactive transitions */
  --font-heading: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  min-height: 100vh;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

/* ========== HEADER / HERO ========== */
.site-header {
  position: relative;
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero background — layered nord0 gradient + hero image */
/* Top: dark nord0 for nav button readability (92%→55% opacity).
   Mid: teal tint (12%) and petrol tint (25%) over the image.
   Bottom: nord0 (85%) to blend into the content area. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Dark gradient at top (92% opacity) so nav buttons are crisp against it */
    linear-gradient(
      180deg,
      rgba(46, 52, 64, 0.92) 0%,   /* nord0 */
      rgba(46, 52, 64, 0.55) 30%,
      rgba(13, 148, 136, 0.12) 55%, /* teal tint */
      rgba(26, 75, 92, 0.25) 75%,   /* petrol tint */
      rgba(46, 52, 64, 0.85) 100%   /* nord0 */
    ),
    url('/img/new-hero.jpg') center 35% / cover no-repeat;
  pointer-events: none;
}

/* Parallax layer (fixed attachment) */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/new-hero.jpg') center 35% / cover no-repeat fixed;
  opacity: 0;
  pointer-events: none;
}

.site-header .header-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.site-header h1 {
  font-family: var(--font-heading);
  font-size: 3.8rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  padding: 0.1em 0;
  background: linear-gradient(135deg, #f0fdfa 0%, var(--accent) 50%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.12);
  text-stroke: 0.5px rgba(255, 255, 255, 0.12);
}

/* Waveform icon prepended to site title */
.site-header .title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.site-header .title-wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 2.4rem;
  flex-shrink: 0;
}
.site-header .title-wave .bar {
  width: 5px;
  border-radius: 3px 3px 0 0;
}
.site-header .title-wave .bar:nth-child(1){height:35%;background:linear-gradient(to top,#0d9488,#20b09e)}
.site-header .title-wave .bar:nth-child(2){height:80%;background:linear-gradient(to top,#0d9488,#20b09e)}
.site-header .title-wave .bar:nth-child(3){height:55%;background:linear-gradient(to top,#0d9488,#1a4b5c)}
.site-header .title-wave .bar:nth-child(4){height:95%;background:linear-gradient(to top,#0d9488,#1a4b5c)}
.site-header .title-wave .bar:nth-child(5){height:65%;background:linear-gradient(to top,#1a4b5c,#256e83)}

.site-header .tagline {
  font-family: var(--font-body);
  color: rgba(236, 239, 244, 0.80);  /* nord6 at 80% */
  margin-top: 0.8rem;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.site-header .nav-links {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-body);
}

.site-header .nav-links a {
  color: #fff;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(46, 52, 64, 0.55);  /* nord0 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition);
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: #fff;
  background: rgba(13, 148, 136, 0.40);  /* teal */
  border-color: rgba(13, 148, 136, 0.50);
}

/* ========== HERO GRADIENT SEPARATOR ========== */
/* 4px accent strip between hero and content — teal→petrol, full opacity */
.header-separator {
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 1;
}

/* ========== CONTENT AREA WITH SCROLL-REVEALED HERO BACKDROP ========== */
main {
  position: relative;
}

/* Hero backdrop — scroll-revealed via JS (opacity set by .hero-bg-fade) */
.hero-bg-fade {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(13,148,136,0.06) 50%,    /* teal tint */
      rgba(46,52,64,0.80) 100%      /* nord0 */
    ),
    url('/img/new-hero.jpg') center 35% / cover no-repeat fixed;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.05s linear;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

/* ========== SECTION INTRO (homepage) ========== */
.section-intro {
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.section-stats {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.stat-pill {
  display: inline-block;
  background: rgba(13, 148, 136, 0.15);
  border: 1px solid rgba(13, 148, 136, 0.20);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.5;
}

/* ========== MIX GRID ========== */
.mix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  transition: opacity 0.3s ease;
}

/* G1 — When a mix is playing, dim other cards */
.mix-grid.playing .mix-card:not(.active) {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.mix-grid.playing .mix-card:not(.active):hover {
  opacity: 0.7;
}

.mix-card.active {
  box-shadow: 0 0 0 1px var(--accent-color, rgba(13, 148, 136, 0.4)), 0 8px 40px var(--accent-color, rgba(13, 148, 136, 0.12));
}

.mix-grid-title {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

/* ========== R1+P1 CARD STYLE ========== */
.mix-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--surface);  /* nord1 */
}

.mix-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(13, 148, 136, 0.12);
}

/* Card cover — bigger area for the inflated number play button
   Uses the mix's CV9 cover image as background (desaturated hero crop + aurora tint) */
.mix-card .card-cover {
  position: relative;
  width: 100%;
  padding: 2.5rem 1rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Lighter overlay on top of the cover image so the image + number show through */
.mix-card .card-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(46, 52, 64, 0.40);  /* nord0 at 40% — light enough that the cover number stays visible */
  pointer-events: none;
  z-index: 0;
}

/* Big number watermark — DM Sans, accent-color outline, near-transparent fill */
.mix-card .card-bignum {
  position: absolute;
  font-family: var(--font-heading);
  font-size: min(28vw, 7rem);
  font-weight: 300;
  color: rgba(236, 239, 244, 0.02);       /* nord6 at 2% — near invisible fill */
  -webkit-text-stroke: 1px var(--accent-color, rgba(236, 239, 244, 0.08));
  text-stroke: 1px var(--accent-color, rgba(236, 239, 244, 0.08));
  opacity: 0.65;  /* blends the accent outline with the cover art behind it */
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

/* GX2 — Play button with teal→petrol gradient */
.mix-card .card-play-btn {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: all var(--transition);
  box-shadow: 0 2px 16px rgba(13, 148, 136, 0.30);
  flex-shrink: 0;
}
.mix-card .card-play-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  fill: #fff;
}
.mix-card .card-play-btn:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent2-hover));
  transform: scale(1.06);
  box-shadow: 0 4px 24px rgba(13, 148, 136, 0.40);
}
.mix-card .card-play-btn.playing {
  background: var(--red);  /* nord11 — red when active */
}

/* Title and date below the cover area */
.mix-card .card-info {
  padding: 0.75rem 1rem 0.5rem;
  border-top: 1px solid var(--border);
}

.mix-card .card-info .card-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);  /* nord6 */
  margin-bottom: 0.1rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.mix-card .card-info .card-meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-dim);  /* nord9 */
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Track badge — small teal pill */
.mix-card .card-info .track-badge {
  display: inline-block;
  background: rgba(13, 148, 136, 0.15);
  border: 1px solid rgba(13, 148, 136, 0.20);
  border-radius: 999px;
  padding: 0.04rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.3;
  cursor: pointer;
  transition: all var(--transition);
  pointer-events: auto;
}
.mix-card .card-info .track-badge:hover {
  background: rgba(13, 148, 136, 0.30);
  border-color: var(--accent);
}

/* Tracklist preview — always visible, truncated */
.mix-card .card-tracklist {
  padding: 0.25rem 1rem 0.75rem;
  border-top: 1px solid rgba(67, 76, 94, 0.5); /* nord2 at 50% */
  background: rgba(59, 66, 82, 0.5);            /* nord1 at 50% */
}

.mix-card .card-tracklist .track-row {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-dim);  /* nord9 */
  padding: 0.2rem 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hidden tracks — only shown when user clicks "+N more" or track badge */
.mix-card .card-tracklist .track-row-hidden {
  display: none;
}

.mix-card .card-tracklist .track-more {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--accent);
  padding: 0.2rem 0;
  cursor: pointer;
  transition: color var(--transition);
}
.mix-card .card-tracklist .track-more:hover {
  color: var(--accent-hover);
}

.mix-card .card-tracklist .no-tracks {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.2rem 0;
}

/* ========== GLOBAL PLAY BUTTON (now-playing bar) ========== */
.btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.btn-play:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent2-hover));
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.25);
}

.btn-play svg {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  fill: #fff;
}

.btn-play.playing {
  background: var(--red);  /* nord11 */
}

/* ========== NOW PLAYING BAR (sticky footer) ========== */
.now-playing {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(46, 52, 64, 0.92);  /* nord0 */
  border-top: 1px solid var(--border);
  padding: 0.7rem 1.5rem;
  display: none;
  align-items: center;
  gap: 1rem;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.now-playing.active {
  display: flex;
}

.now-playing .np-cover {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.now-playing .np-info {
  flex: 1;
  min-width: 0;
}

.now-playing .np-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.now-playing .np-meta {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-dim);  /* nord9 */
}

.now-playing .np-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.now-playing .np-progress {
  width: 120px;
  height: 4px;
  background: var(--surface2);  /* nord2 */
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

/* GX2 — Progress bar uses teal→petrol gradient */
.now-playing .np-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 2px;
}

.now-playing .np-time {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-dim);  /* nord9 */
  min-width: 75px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ========== ABOUT / CONTACT PAGES ========== */
.page-content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-content h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-content p {
  font-family: var(--font-body);
  margin-bottom: 1rem;
  line-height: 1.8;
  color: var(--text);  /* nord6 */
  font-size: 1rem;
}

.page-content .contact-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(46, 52, 64, 0.85);  /* nord0 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.2rem;
  margin-top: 0.5rem;
  transition: border-color var(--transition);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.page-content .contact-email:hover {
  border-color: var(--accent);
}

/* ========== FOOTER ========== */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2.5rem 1.5rem 4rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  font-family: var(--font-body);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  letter-spacing: 0.02em;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .site-header { padding: 3rem 1.5rem 2.5rem; min-height: 300px; }
  .site-header h1 { font-size: 2.4rem; }
  .site-header .tagline { font-size: 1rem; }
  .site-header .nav-links a { padding: 0.4rem 1rem; font-size: 0.82rem; }
  .mix-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
  .now-playing { padding: 0.5rem 1rem; }
  .now-playing .np-progress { width: 80px; }
}

@media (max-width: 480px) {
  .site-header h1 { font-size: 1.9rem; }
  .mix-grid { grid-template-columns: 1fr; }
  .site-header .nav-links { gap: 0.75rem; flex-wrap: wrap; }
  .page-content h1 { font-size: 1.7rem; }
}