/* ═══════════════════════════════════════════════════════════════
   music.css — Mel's Music Player
   Palette: Deep Obsidian / Midnight Slate / Zerest Amber Gold
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────── */

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

/* ── Tokens ──────────────────────────────────────────────────── */

#music-page {
  --bg:          #0e0e10;
  --surface:     #16161a;
  --surface-2:   #1e1e24;
  --border:      rgba(255, 255, 255, 0.07);
  --accent:      #c8a96e;
  --accent-dim:  rgba(200, 169, 110, 0.14);
  --accent-ring: rgba(200, 169, 110, 0.3);
  --text-1:      #e8e6e0;
  --text-2:      rgba(232, 230, 224, 0.45);
  --text-3:      rgba(232, 230, 224, 0.22);
  --font:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:        'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
  --radius:      12px;
  --radius-sm:   6px;
}

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

body {
  background:              var(--bg);
  -webkit-font-smoothing:  antialiased;
}

#music-page {
  max-width: 1200px;
  margin:    0 auto;
  padding:   3rem 1.5rem 6rem;
}

/* ── Page header ─────────────────────────────────────────────── */

/* .music-header {
  margin-bottom: 1rem;
}
 */

.col{
  display:flex;
  flex-direction:column;
  
}

.row{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.mascot{
	height:100px;
	width:120px;
}
.music-eyebrow {
  font-size:      10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--accent);
  font-family:    var(--mono);
  margin-bottom:  0.5rem;
}

.music-title {
  font-size:      clamp(2.2rem, 6vw, 3.6rem);
  font-weight:    300;
  letter-spacing: 0.04em;
  line-height:    1;
}

/* ── Two-column layout ───────────────────────────────────────── */

.music-layout {
  display:               grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:                   1.5rem;
  align-items:           start;
}

.music-main {
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

/* ── Player card ─────────────────────────────────────────────── */

.player-section {
  display:       flex;
  gap:           2rem;
  align-items:   flex-start;
  background:    var(--surface);
  border:        0.5px solid var(--border);
  border-radius: var(--radius);
  padding:       1.75rem;
}

/* Cover art */

.player-art {
  width:         172px;
  height:        172px;
  flex-shrink:   0;
  border-radius: var(--radius-sm);
  background:    var(--surface-2);
  border:        0.5px solid var(--border);
  overflow:      hidden;
  position:      relative;
  transition:    opacity 0.25s ease;
}

.player-art.fading { opacity: 0; }

.art-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-3);
}

#player-art-img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      none;
  position:     absolute;
  inset:        0;
}

/* Player meta */

.player-meta {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  padding-top:    2px;
}

.now-label {
  font-size:      10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--accent);
  font-family:    var(--mono);
}

.player-track-title {
  font-size:     1.15rem;
  font-weight:   400;
  line-height:   1.35;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Progress bar */

.progress-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.time-el {
  font-size:   11px;
  font-family: var(--mono);
  color:       var(--text-2);
  flex-shrink: 0;
  min-width:   30px;
  user-select: none;
}

.progress-bar {
  flex:          1;
  height:        3px;
  background:    var(--surface-2);
  border-radius: 2px;
  border:        0.5px solid var(--border);
  cursor:        pointer;
  position:      relative;
}

.progress-fill {
  height:        100%;
  width:         0%;
  background:    var(--accent);
  border-radius: 2px;
  transition:    width 0.1s linear;
}

.progress-thumb {
  position:      absolute;
  top:           50%;
  left:          0%;
  transform:     translate(-50%, -50%);
  width:         11px;
  height:        11px;
  border-radius: 50%;
  background:    var(--accent);
  opacity:       0;
  transition:    opacity 0.15s, left 0.1s linear;
  pointer-events: none;
}

.progress-bar:hover .progress-thumb { opacity: 1; }

/* Controls */

.controls {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.ctrl-btn {
  background:     none;
  border:         none;
  cursor:         pointer;
  color:          var(--text-2);
  padding:        7px;
  border-radius:  var(--radius-sm);
  display:        flex;
  align-items:    center;
  justify-content: center;
  line-height:    0;
  transition:     color 0.15s, background 0.15s;
}

.ctrl-btn:hover  { color: var(--text-1); background: var(--surface-2); }
.ctrl-btn:active { opacity: 0.65; }
.ctrl-btn.active { color: var(--accent); }

.ctrl-play {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    var(--accent-dim);
  border:        0.5px solid var(--accent-ring);
  color:         var(--accent);
}

.ctrl-play:hover {
  background:   var(--accent);
  color:        var(--bg);
  border-color: var(--accent);
}

/* Volume */

.volume-wrap {
  display:     flex;
  align-items: center;
  gap:         6px;
}

#volume-slider {
  -webkit-appearance: none;
  appearance:         none;
  width:              80px;
  height:             3px;
  border-radius:      2px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) calc(var(--vol, 100) * 1%),
    var(--surface-2) calc(var(--vol, 100) * 1%),
    var(--surface-2) 100%
  );
  border:   0.5px solid var(--border);
  outline:  none;
  cursor:   pointer;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:              11px;
  height:             11px;
  border-radius:      50%;
  background:         var(--accent);
  cursor:             pointer;
  transition:         transform 0.15s;
}

#volume-slider::-moz-range-thumb {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  background:    var(--accent);
  border:        none;
  cursor:        pointer;
}

#volume-slider:hover::-webkit-slider-thumb { transform: scale(1.3); }

#btn-loop.active{
	border: 1px solid var(--accent);
    opacity: 0.8;
    background: var(--accent-dim);
}

/* ── Featured card ───────────────────────────────────────────── */

.featured-section { display: none; }

/* .featured-card {
  display:       flex;
  align-items:   center;
  gap:           1.25rem;
  background:    linear-gradient(135deg, rgba(200,169,110,0.12) 0%, rgba(200,169,110,0.04) 100%);
  border:        0.5px solid rgba(200,169,110,0.35);
  border-radius: var(--radius);
  padding:       1.25rem 1.5rem;
  position:      relative;
} */

.featured-card {
  display:       flex;
  align-items:   center;
  gap:           1.25rem;
  background:    linear-gradient(135deg, rgba(200,169,110,0.12) 0%, rgba(200,169,110,0.04) 100%);
  border:        0.5px solid rgba(200,169,110,0.35);
  border-radius: var(--radius);
  padding:       1.25rem 1.5rem;
  position:      relative;
  overflow:      hidden;  /* ← needed to clip the video */
}

.featured-bg-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}

.featured-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    135deg,
    rgba(14, 14, 16, 0.65) 0%,
    rgba(14, 14, 16, 0.85) 100%
  );
}

.featured-card > *:not(.featured-bg-video) {
  position: relative;
  z-index:  2;
}

.featured-art {
  width:         100px;
  height:        100px;
  flex-shrink:   0;
  border-radius: var(--radius-sm);
  background:    var(--surface-2);
  border:        0.5px solid var(--border);
  overflow:      hidden;
  position:      relative;
}

/* .featured-date {
  font-size:   11px;
  font-family: var(--mono);
  color:       var(--text-2);
  margin-top:  2px;
} */

.featured-art-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-3);
}

#featured-art-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    none;
  position:   absolute;
  inset:      0;
}

.featured-meta {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.featured-eyebrow {
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent);
  font-family:    var(--mono);
}

.featured-title {
  font-size:     1rem;
  font-weight:   400;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.featured-play-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      var(--accent-dim);
  border:          0.5px solid var(--accent-ring);
  color:           var(--accent);
  font-size:       11px;
  letter-spacing:  0.1em;
  font-family:     var(--mono);
  padding:         5px 12px;
  border-radius:   20px;
  cursor:          pointer;
  width:           fit-content;
  transition:      background 0.15s, color 0.15s;
}

.featured-play-btn:hover { background: var(--accent); color: var(--bg); }

.featured-clear-btn {
  position:        absolute;
  top:             10px;
  right:           10px;
  background:      none;
  border:          none;
  color:           var(--text-3);
  cursor:          pointer;
  padding:         4px;
  border-radius:   4px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      color 0.15s;
}

.featured-clear-btn:hover { color: var(--text-1); }

/* ── Tracklist ───────────────────────────────────────────────── */

.tracklist-section {
  background:    var(--surface);
  border:        0.5px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}

.tracklist-header,
.track-item {
  display:               grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px 64px;
  padding:               8px 1.25rem;
  align-items:           center;
}

.tracklist-header {
  border-bottom:  0.5px solid var(--border);
  font-size:      10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-3);
  font-family:    var(--mono);
  user-select:    none;
}

.tl-col-dur  { text-align: right; }
.tl-col-feat { text-align: center; }

.tracklist { list-style: none; }

.track-item {
  padding:    10px 1.25rem;
  border-bottom: 0.5px solid var(--border);
  cursor:     pointer;
  transition: background 0.1s;
}

.track-item:last-child  { border-bottom: none; }
.track-item:hover       { background: var(--surface-2); }
.track-item.active      { background: var(--accent-dim); }

.tl-track-num {
  font-size:   12px;
  font-family: var(--mono);
  color:       var(--text-3);
  user-select: none;
}

.track-item.active .tl-track-num { display: none; }

.tl-playing-icon {
  display:     none;
  align-items: center;
  gap:         2px;
  height:      14px;
}

.track-item.active .tl-playing-icon { display: flex; }

.eq-bar {
  width:         3px;
  background:    var(--accent);
  border-radius: 1px;
  animation:     eq 0.8s ease-in-out infinite alternate;
}

.eq-bar:nth-child(1) { height: 12px; animation-delay: 0s; }
.eq-bar:nth-child(2) { height: 7px;  animation-delay: 0.2s; }
.eq-bar:nth-child(3) { height: 10px; animation-delay: 0.4s; }

@keyframes eq {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.35); }
}

.track-item.active.paused .eq-bar { animation-play-state: paused; }

.tl-track-title {
  font-size:     14px;
  color:         var(--text-1);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
  transition:    color 0.12s;
}

.track-item.active .tl-track-title { color: var(--accent); }

.tl-track-dur {
  font-size:   12px;
  font-family: var(--mono);
  color:       var(--text-2);
  text-align:  right;
  user-select: none;
}

.tl-feat-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--text-3);
  padding:     0 4px;
  font-size:   13px;
  line-height: 1;
  transition:  color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.tl-feat-btn:hover   { color: var(--accent); transform: scale(1.2); }
.tl-feat-btn.featured { color: var(--accent); }

/* Loading */

.tl-loading {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     2rem 1.5rem;
  list-style:  none;
}

.loading-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--accent);
  animation:     dot-pulse 1.2s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

.tl-error {
  padding:     2rem 1.5rem;
  font-size:   13px;
  color:       var(--text-2);
  font-family: var(--mono);
  list-style:  none;
}

/* ── Lyrics panel ────────────────────────────────────────────── */

.lyrics-panel {
  position:       sticky;
  top:            72px;
  background:     var(--surface);
  border:         0.5px solid var(--border);
  border-radius:  var(--radius);
  overflow:       hidden;
  max-height:     calc(100vh - 90px);
}

.lyrics-inner {
  padding:        1.5rem;
  overflow-y:     auto;
  max-height:     calc(100vh - 90px);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}

.lyrics-inner::-webkit-scrollbar       { width: 4px; }
.lyrics-inner::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 2px; }

.lyrics-eyebrow {
  font-size:      10px;
  letter-spacing: 0.2em;
  color:          var(--accent);
  font-family:    var(--mono);
  margin-bottom:  6px;
}

.lyrics-track-title {
  font-size:     0.9rem;
  font-weight:   400;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom:  0.5px solid var(--border);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.lyrics-body {
  font-size:   13px;
  line-height: 2;
  color:       var(--text-2);
  font-family: var(--font);
}

.lyrics-section {
  font-size:      10px;
  letter-spacing: 0.15em;
  color:          var(--accent);
  font-family:    var(--mono);
  text-transform: uppercase;
  margin-top:     1.25rem;
  margin-bottom:  0.4rem;
}

.lyrics-section:first-child { margin-top: 0; }

.lyrics-line {
  font-size:   13px;
  line-height: 1.8;
  color:       var(--text-2);
  margin:      0;
}

.lyrics-empty {
  font-size:   12px;
  color:       var(--text-3);
  font-family: var(--mono);
  text-align:  center;
  padding:     2rem 0;
}

/* ── Track video section ─────────────────────────────────────── */
/* Sits above the lyrics panel in the right column, completely
   outside any overflow/sticky ancestor — fullscreen just works */

#track-video-section {
  display:       none;
  background:    var(--surface);
  border:        0.5px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}

#track-video-frame {
  position:     relative;
  width:        100%;
  aspect-ratio: 16 / 9;
}

#track-video-frame iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   0;
}

/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .music-layout {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
  }

  .music-main {
    order: 1;
    width: 100%;
  }

  .player-section { order: 1; }

  .lyrics-panel {
    order:      2;
    position:   static;
    max-height: 300px;
    width:      100%;
  }

  .lyrics-inner {
    max-height: 300px;
  }

  .featured-section { order: 3; }
  .tracklist-section { order: 4; }
}

@media (max-width: 520px) {
  .player-section {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        1.5rem;
    gap:            1.25rem;
  }

  .player-art    { width: 150px; height: 150px; }
  .controls      { justify-content: center; }
  .progress-wrap { width: 100%; }
  .player-track-title { font-size: 1rem; }
  .volume-wrap   { width: 100%; justify-content: center; }
  #volume-slider { width: 100px; }
}