/* ==========================================================================
   PRO BIOHAY — "All In Due Time"
   Design Tokens & Atmosphere — v2

   Everything visual funnels through the variables in :root. Change a value
   here and it propagates through the whole site. Sections below are
   organized: tokens → base → texture/signature system → motion → layout
   primitives → components.
   ========================================================================== */

:root {
  /* ---- Color palette -----------------------------------------------------
     Core identity (unchanged from v1): void black + blood red + ember glow.
     v2 adds supporting surface/border/text tones so contrast and depth are
     consistent everywhere instead of ad-hoc opacity values scattered around.
  */
  --color-void:        #0a0605;   /* deepest background black */
  --color-void-2:      #150b0a;   /* slightly lifted black, panel surfaces */
  --color-void-3:      #1c0f0d;   /* elevated surface, e.g. cards on cards */
  --color-blood:       #5c1414;   /* deep base red, large fields */
  --color-blood-mid:   #8f1f1a;   /* mid red, pegboard fields */
  --color-signal:      #c81e1e;   /* primary accent red */
  --color-ember:       #e2542b;   /* warm glow / flame accent */
  --color-ember-soft:  #f2795a;   /* lighter ember, for hover states on dark */
  --color-ash:         #8d7c78;   /* tertiary / decorative text (labels) */
  --color-ash-strong:  #bcaea8;   /* secondary body text — AA-safe on void */
  --color-bone:        #ece2d6;   /* primary text / bright highlight */

  /* ---- Surfaces & borders -------------------------------------------------- */
  --surface-glass:      rgba(10, 6, 5, 0.6);
  --surface-card:       rgba(236, 226, 214, 0.035);
  --surface-card-hover: rgba(236, 226, 214, 0.06);
  --border-hairline:    rgba(236, 226, 214, 0.1);
  --border-ember:       rgba(226, 84, 43, 0.45);

  /* ---- Typography ---------------------------------------------------------
     display : dramatic, high-contrast serif for headlines & wordmark
     body    : elegant serif for reading copy
     mono    : utility face for labels, eyebrows, numerals, timers, UI chrome
  */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* ---- Elevation / glow ----------------------------------------------------- */
  --glow-ember-sm: 0 0 18px rgba(226, 84, 43, 0.35);
  --glow-ember-lg: 0 0 48px rgba(226, 84, 43, 0.3);
  --shadow-card:   0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* ---- Rhythm ---------------------------------------------------------------
     A single radius scale and one easing curve, reused everywhere, so every
     panel/button/card reads as part of the same family.
  */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-void);
}

body {
  background: var(--color-void);
  color: var(--color-bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-signal);
  color: var(--color-bone);
}

:focus-visible {
  outline: 1px solid var(--color-ember);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-link — invisible until keyboard-focused */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--color-signal);
  color: var(--color-bone);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-cinematic);
}
.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Fluid type scale
   Every headline uses clamp() so proportions hold from 360px to 1920px
   instead of jumping at breakpoints.
   ========================================================================== */

.text-display-hero { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw + 0.5rem, 6.5rem); line-height: 1.02; letter-spacing: -0.01em; }
.text-display-1     { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw + 0.6rem, 3.4rem);  line-height: 1.08; }
.text-display-2     { font-family: var(--font-display); font-size: clamp(1.5rem, 2vw + 0.6rem, 2.1rem);  line-height: 1.15; }
.text-body-lg        { font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem); line-height: 1.65; }

/* ==========================================================================
   Signature texture — the pegboard wall (identity element, unchanged motif)
   ========================================================================== */

.pegboard {
  position: relative;
  background-color: var(--color-blood);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='0' y='0' width='40' height='40' fill='none'/%3E%3Crect x='12' y='12' width='16' height='16' rx='4' fill='%23000000' fill-opacity='0.55'/%3E%3Crect x='12' y='12' width='16' height='2' rx='1' fill='%23000000' fill-opacity='0.15'/%3E%3C/svg%3E");
  background-size: auto, 40px 40px;
}

.pegboard--dark { background-color: var(--color-void-2); }

/* Parallax wrapper: the pegboard layer drifts slower than foreground content
   for a subtle sense of depth. Transform is applied by script.js. */
.parallax-layer {
  position: absolute;
  inset: -10%;
  will-change: transform;
}

.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(6,3,3,0.9) 100%);
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Background video — used in the hero to host your own footage.
   The tint sits above the video and below the content so text stays
   readable regardless of what's in the clip. Swap files in initHeroVideo()
   or directly in the <video> markup; no other edits required.
   ========================================================================== */

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

.hero-video-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,6,5,0.45) 0%, rgba(10,6,5,0.55) 55%, rgba(10,6,5,0.88) 100%);
}

/* ==========================================================================
   Signature element — ember glow (the "flame") + cursor glow + particles
   ========================================================================== */

.ember-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,84,43,0.55) 0%, rgba(200,30,30,0.16) 40%, transparent 72%);
  filter: blur(6px);
  animation: flicker 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes flicker {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  18%      { opacity: 0.55; transform: scale(0.96); }
  32%      { opacity: 0.9;  transform: scale(1.04); }
  47%      { opacity: 0.6;  transform: scale(0.98); }
  63%      { opacity: 0.85; transform: scale(1.03); }
  81%      { opacity: 0.65; transform: scale(0.99); }
}

/* Cursor-follow glow — desktop/fine-pointer only, added by script.js */
#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 500px;
  height: 500px;
  margin-left: -250px;
  margin-top: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,84,43,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

.ember-particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-ember);
  box-shadow: 0 0 6px 1px rgba(226,84,43,0.8);
  animation-name: rise;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translateY(-70vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ==========================================================================
   Intro — a one-time dust/ash dispersal on first load.
   Plays exactly once per browser session (script.js), then the whole
   #curtain element is removed from the DOM — it never resets or repeats,
   and the "last frame" is simply the page underneath it.
   ========================================================================== */

#curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--color-void);
  overflow: hidden;
  transition: opacity 1.5s var(--ease-cinematic);
}
#curtain.is-open { opacity: 0; }

#curtain .mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--color-ember);
  opacity: 1;
  transition: opacity 0.6s ease;
}
#curtain.is-open .mark { opacity: 0; }

/* Individual ash motes — positioned randomly by script.js, then given a
   drift + fade transition when .is-open is added. */
.ash-mote {
  position: absolute;
  border-radius: 50%;
  background: var(--color-ash-strong);
  opacity: 0.65;
  will-change: transform, opacity;
  transition: transform 1.7s var(--ease-cinematic), opacity 1.5s var(--ease-cinematic);
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-signal), var(--color-ember-soft));
  z-index: 60;
  transition: width 0.1s linear;
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-cinematic), transform var(--dur-slow) var(--ease-cinematic);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-med) var(--ease-cinematic), transform var(--dur-med) var(--ease-cinematic);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--color-ember);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-ember);
  display: inline-block;
}

.headline-mark { color: var(--color-signal); }

/* Section rhythm: consistent vertical cadence across the page */
.section-pad { padding-block: clamp(5rem, 10vw, 9rem); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
  position: relative;
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 1rem 2.1rem;
  background: var(--color-signal);
  color: var(--color-bone);
  border: 1px solid var(--color-signal);
  border-radius: var(--radius-sm);
  transition: background var(--dur-med) var(--ease-cinematic), box-shadow var(--dur-med) var(--ease-cinematic), transform var(--dur-fast) var(--ease-cinematic);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  overflow: hidden;
}
.btn-primary svg { transition: transform var(--dur-fast) var(--ease-cinematic); }
.btn-primary:hover {
  background: var(--color-ember);
  box-shadow: var(--glow-ember-sm);
  transform: translateY(-2px);
}
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 1rem 2.1rem;
  background: transparent;
  color: var(--color-bone);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-med) var(--ease-cinematic), color var(--dur-med) var(--ease-cinematic), background var(--dur-med) var(--ease-cinematic), transform var(--dur-fast) var(--ease-cinematic);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--color-ember);
  color: var(--color-ember-soft);
  background: rgba(226,84,43,0.06);
  transform: translateY(-2px);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

#site-nav {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-cinematic), background var(--dur-med) var(--ease-cinematic);
}
#site-nav.is-scrolled {
  border-bottom-color: var(--border-ember);
  background: var(--surface-glass);
}

.glass-panel {
  background: var(--surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--color-ember);
  transition: width var(--dur-fast) var(--ease-cinematic);
}
.nav-link:hover::after { width: 100%; }

/* Full-screen mobile menu */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--color-void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-cinematic);
}
#mobile-menu.is-open { opacity: 1; visibility: visible; }
#mobile-menu li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-cinematic), transform var(--dur-med) var(--ease-cinematic);
}
#mobile-menu.is-open li { opacity: 1; transform: translateY(0); }
#mobile-menu.is-open li:nth-child(1) { transition-delay: 0.08s; }
#mobile-menu.is-open li:nth-child(2) { transition-delay: 0.14s; }
#mobile-menu.is-open li:nth-child(3) { transition-delay: 0.2s; }
#mobile-menu.is-open li:nth-child(4) { transition-delay: 0.26s; }
#mobile-menu.is-open li:nth-child(5) { transition-delay: 0.32s; }

/* ==========================================================================
   Cards
   ========================================================================== */

.panel-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  transition: background var(--dur-med) var(--ease-cinematic), border-color var(--dur-med) var(--ease-cinematic), transform var(--dur-med) var(--ease-cinematic);
}
.panel-card:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-ember);
}

/* Track row — tracklist item (numbering is meaningful: real running order) */
.track-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: padding-left var(--dur-med) var(--ease-cinematic), background var(--dur-med) var(--ease-cinematic);
  cursor: pointer;
}
.track-row:last-child { border-bottom: none; }
.track-row:hover,
.track-row:focus-visible {
  padding-left: 1.5rem;
  background: linear-gradient(90deg, rgba(200,30,30,0.09), transparent);
}
.track-row:hover .track-title,
.track-row:focus-visible .track-title { color: var(--color-ember-soft); }
.track-row:hover .track-play,
.track-row:focus-visible .track-play { opacity: 1; transform: scale(1); }

.track-number { font-family: var(--font-mono); color: var(--color-ash); font-size: 0.85rem; }
.track-title  { font-family: var(--font-display); font-size: clamp(1.05rem, 1.3vw, 1.3rem); letter-spacing: 0.02em; transition: color var(--dur-med) var(--ease-cinematic); }
.track-time   { font-family: var(--font-mono); color: var(--color-ash-strong); font-size: 0.85rem; display: flex; align-items: center; gap: 0.75rem; }
.track-play {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
  color: var(--color-ember);
}

/* Still card — gallery item, with 3D tilt applied via inline transform (JS) */
.still-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  transition: transform var(--dur-fast) var(--ease-cinematic), border-color var(--dur-med) var(--ease-cinematic);
}
.still-card:hover { border-color: var(--border-ember); }
.still-card { cursor: zoom-in; }
.still-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(6,3,3,0.92) 82%);
}
.still-card__index {
  position: absolute;
  top: 0.9rem; right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(236,226,214,0.55);
}

/* ==========================================================================
   Lightbox — full-screen preview opened by clicking a gallery card.
   ========================================================================== */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(6, 3, 3, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-cinematic);
}
#lightbox.is-open { opacity: 1; visibility: visible; }

#lightbox figure {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  transform: scale(0.96);
  transition: transform var(--dur-med) var(--ease-cinematic);
}
#lightbox.is-open figure { transform: scale(1); }

#lightbox img,
#lightbox video {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
#lightbox video { display: none; }

#lightbox figcaption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ash-strong);
}

#lightbox-close {
  position: absolute;
  top: -3px;
  right: -3px;
  transform: translate(50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-void);
  border: 1px solid var(--border-hairline);
  color: var(--color-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
#lightbox-close:hover { border-color: var(--color-ember); color: var(--color-ember); }

/* Countdown */
.time-block { font-family: var(--font-mono); text-align: center; min-width: 4.5rem; }
.time-block .value { font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--color-bone); display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.time-block .label { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--color-ash); text-transform: uppercase; margin-top: 0.5rem; display: block; }

.rule { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--border-hairline), transparent); }

/* Press marquee */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--color-void), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--color-void), transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  gap: 4rem;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-ash-strong);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.marquee-item .src { font-family: var(--font-mono); font-style: normal; font-size: 0.65rem; letter-spacing: 0.2em; color: var(--color-ember); text-transform: uppercase; }

/* Testimonial carousel */
.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-cinematic), transform var(--dur-slow) var(--ease-cinematic);
  pointer-events: none;
}
.testimonial.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.testimonial-dots button {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-hairline);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.testimonial-dots button.is-active { background: var(--color-ember); transform: scale(1.4); }

/* Sticky mini player */
#mini-player {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 140%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  transition: transform var(--dur-slow) var(--ease-cinematic);
  max-width: calc(100% - 2rem);
}
#mini-player.is-visible { transform: translate(-50%, 0); }
#mini-player .play-toggle {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--color-signal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) ease;
  cursor: pointer;
}
#mini-player .play-toggle:hover { background: var(--color-ember); }
#mini-player .progress {
  width: 8rem;
  height: 2px;
  background: var(--border-hairline);
  border-radius: 999px;
  overflow: hidden;
}
#mini-player .progress span {
  display: block; height: 100%; width: 0%;
  background: var(--color-ember);
  transition: width 0.2s linear;
}

@media (max-width: 480px) {
  #mini-player .progress { display: none; }
}