/* ==========================================================================
   Flawed Curve — styles.css
   Table of contents:
     1. Reset & tokens
     2. Base / typography
     3. Utility classes (glass, buttons, pills)
     4. Hero / fullscreen cover
     5. Top navigation
     6. Player overlay + tracklist
     7. Scrubber
     8. About / Connect sections
     9. Responsive: mobile bottom-sheet player
     10. Reduced motion
   ========================================================================== */

/* ---------- 1. Reset & tokens ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-bg: #07050f;
  --color-fg: #f3efe6;
  --color-fg-muted: rgba(243, 239, 230, 0.68);
  /* Accent trio pulled from the Deluge cover art: backlit rain (amber),
     storm cloud (blue-grey), and the field it's falling on (olive). */
  --color-accent: #e8c07f;
  --color-accent-2: #7c98ab;
  --color-accent-3: #b7ab6a;
  --color-glass-bg: rgba(22, 21, 30, 0.15);
  --color-glass-border: rgba(255, 255, 255, 0.14);
  --color-track-hover: rgba(255, 255, 255, 0.08);
  --color-track-active: rgba(232, 192, 127, 0.14);

  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2) 55%, var(--color-accent-3));

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --player-width: 380px;
  --header-h: 76px;

  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ---------- Accessibility utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 1000;
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Utility classes ---------- */
.glass {
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--gradient-accent);
  color: #0a0714;
  box-shadow: 0 8px 30px -8px rgba(124, 152, 171, 0.6);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: 0 12px 34px -6px rgba(124, 152, 171, 0.75);
}

.btn__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-glass-border);
  color: var(--color-fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- 4. Hero / fullscreen cover ---------- */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}

/* Holds the art + scrim + nav + title copy as one box, separate from
   .player below it — see the mobile rules for why this split exists. */
.hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__bg {
  position: absolute;
  inset: 0;
  /* Still-frame fallback: shown while the video loads, and for browsers/
     users where it never plays (see the reduced-motion + <video poster>
     handling below). Same art the video was generated from. */
  background-image: url("images/deluge-album-cover-graphic_upscaled-lightning.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: -2;
  overflow: hidden;
}

/* Looping hero background video, layered over the fallback art above. */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Respect reduced-motion preferences: hide the video and pause playback
   (paused via app.js) so the static cover art shows instead. */
@media (prefers-reduced-motion: reduce) {
  .hero__bg-video {
    display: none;
  }
}

/* Semi-transparent gradient scrim for legibility over high-contrast artwork */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 5, 15, 0.55) 0%, rgba(7, 5, 15, 0.15) 30%, rgba(7, 5, 15, 0.35) 60%, rgba(7, 5, 15, 0.92) 100%),
    linear-gradient(90deg, rgba(7, 5, 15, 0.45) 0%, rgba(7, 5, 15, 0) 45%);
}

.hero__content {
  position: absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-58%);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hero__eyebrow {
  margin-bottom: 4px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

.hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--color-fg-muted);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  z-index: 2;
}

.scroll-cue span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: scrollcue 1.8s ease-in-out infinite;
}

@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ---------- 5. Top navigation ---------- */
.topnav {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: 999px;
}

.topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.brand-mark {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.topnav__links {
  display: flex;
  gap: 28px;
}

.topnav__links a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--color-fg-muted);
  position: relative;
  transition: color 0.2s ease;
}

.topnav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.topnav__links a:hover,
.topnav__links a:focus-visible {
  color: var(--color-fg);
}

.topnav__links a:hover::after,
.topnav__links a:focus-visible::after {
  width: 100%;
}

/* ---------- 6. Player overlay + tracklist ---------- */
.player {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 6;
  width: var(--player-width);
  max-width: calc(100vw - 32px);
}

.player__handle {
  display: none; /* only shown as the mobile drawer handle */
}

.player__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

.player__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.player__header h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.player__album {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  white-space: nowrap;
}

.tracklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.track__btn {
  display: grid;
  grid-template-columns: 32px 24px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  text-align: left;
  transition: background 0.18s ease, transform 0.18s ease;
}

.track__btn:hover {
  background: var(--color-track-hover);
}

.track__btn:active {
  transform: scale(0.99);
}

.track__num {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.track__icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg);
}

.icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.icon--pause {
  display: none;
}

.icon--eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.icon--eq i {
  display: block;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  animation: eq-bounce 0.9s ease-in-out infinite;
}

.icon--eq i:nth-child(1) { animation-delay: -0.6s; }
.icon--eq i:nth-child(2) { animation-delay: -0.3s; }
.icon--eq i:nth-child(3) { animation-delay: 0s; }

@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: 15px; }
}

.track__title {
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track__duration {
  font-size: 0.8rem;
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Active / playing state */
.track__btn[aria-pressed="true"] {
  background: var(--color-track-active);
  box-shadow: inset 0 0 0 1px rgba(232, 192, 127, 0.35);
}

.track__btn[aria-pressed="true"] .track__title {
  color: var(--color-accent);
}

.track__btn[aria-pressed="true"] .track__num {
  /* visibility (not display:none) so the fixed-width grid column stays
     reserved — removing the item from the grid would reflow the title
     column and truncate longer track names. */
  visibility: hidden;
}

/* When playing (vs. paused-but-selected): show icon--play hidden, eq shown */
.track__btn.is-playing .icon--play {
  display: none;
}

.track__btn.is-playing .icon--eq {
  display: flex;
}

/* When paused but is the loaded/current track: show pause-style affordance?
   We keep it simple: show a play icon (to indicate pressing resumes) but keep the glow. */
.track__btn[aria-pressed="true"]:not(.is-playing) .icon--play {
  display: block;
}

.track__btn[aria-pressed="true"]:not(.is-playing) .icon--eq {
  display: none;
}

/* Underline progress glow beneath the active track for a subtle "now playing" cue */
.track__btn.is-playing {
  position: relative;
}

.track__btn.is-playing::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
  animation: pulse-underline 1.6s ease-in-out infinite;
}

@keyframes pulse-underline {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ---------- 7. Scrubber ---------- */
.scrubber {
  padding-top: 12px;
  border-top: 1px solid var(--color-glass-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scrubber__now {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.scrubber__time {
  font-size: 0.72rem;
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
}

.scrubber__range {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.scrubber__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232, 192, 127, 0.25);
  transition: transform 0.15s ease;
}

.scrubber__range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.scrubber__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232, 192, 127, 0.25);
}

.scrubber__range:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- 8. About / Connect sections ---------- */
.about,
.connect {
  padding: 96px 6vw;
}

.about {
  position: relative;
  overflow: hidden;
  background: #0b0818;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Large decorative brand mark bleeding off the edge, behind the copy */
.about__mark {
  position: absolute;
  top: 50%;
  right: -8%;
  width: min(46vw, 560px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.about__inner,
.connect__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.about h2,
.connect h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 20px;
}

.about__mark-inline {
  width: 0.85em;
  height: 0.85em;
  object-fit: contain;
  flex-shrink: 0;
}

/* Photographic proof of the "basement" the copy below references — the
   actual room, duotoned into the same amber/blue-grey the album art was
   sampled from so it reads as part of the site rather than a snapshot
   dropped in. Sits between the heading and the paragraph so "basement"
   in the copy lands right after the image confirms it's real. */
.about__photo {
  position: relative;
  margin: 0 0 32px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-glass-border);
  aspect-ratio: 1664 / 576;
  isolation: isolate;
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.1) brightness(0.95);
}

/* Duotone tint + edge vignette, layered the same way .hero__scrim treats
   the cover art, so the photo feels lit by the same amber the hero's
   "backlit rain" accent comes from, instead of sitting on top of it
   as an untreated snapshot. */
.about__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 140% at 20% 15%, var(--color-accent) 0%, var(--color-accent-3) 55%, var(--color-accent-2) 100%);
  mix-blend-mode: color;
  opacity: 0.65;
}

.about__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 60px 10px rgba(11, 8, 24, 0.5);
}

.about p {
  color: var(--color-fg-muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.connect {
  background: #07050f;
  text-align: center;
}

.connect__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.connect__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.connect__links a {
  text-decoration: none;
  font-size: 1rem;
  color: var(--color-fg-muted);
  transition: color 0.2s ease;
}

.connect__links a:hover,
.connect__links a:focus-visible {
  color: var(--color-accent);
}

.connect__copyright {
  font-size: 0.8rem;
  color: rgba(245, 243, 250, 0.4);
}

/* ---------- 9. Responsive: mobile bottom-sheet player ---------- */
@media (max-width: 760px) {
  .topnav__links {
    gap: 16px;
  }

  .topnav__links a {
    font-size: 0.85rem;
  }

  /* Let the hero shrink to fit the art instead of filling the viewport,
     so the image is never hidden under the player below it. */
  .hero {
    height: auto;
    min-height: 0;
  }

  /* Show the full width of the (square) cover art, uncropped, instead of
     letting `cover` crop its sides to fill a tall viewport. */
  .hero__stage {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .hero__bg {
    background-size: 100% auto;
  }

  /* The fallback art above is square and shows uncropped in this box, but
     the loop video is 16:9 — object-fit: cover (set globally, not
     overridden here) crops its sides to fill the square stage instead. */

  .hero__content {
    left: 5vw;
    right: 5vw;
    top: auto;
    bottom: 16px;
    transform: none;
  }

  /* The compact square stage doesn't leave room for a scroll hint too. */
  .scroll-cue {
    display: none;
  }

  /* No longer an overlay docked over the art — it's a full-width panel
     flowing directly below the image, so the picture is never covered. */
  .player {
    position: static;
    width: 100%;
    max-width: none;
  }

  .player__handle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 18px 14px;
    background: var(--color-glass-bg);
    border: 1px solid var(--color-glass-border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .player__handle-bar {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
  }

  .player__handle-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-top: 6px;
  }

  .player__handle-label strong {
    font-size: 0.85rem;
    font-family: var(--font-display);
  }

  .player__handle-label small {
    font-size: 0.72rem;
    color: var(--color-fg-muted);
  }

  .player__handle-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    margin-left: auto;
    margin-top: 6px;
    transition: transform 0.25s ease;
  }

  .player__body {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  /* Collapsed state: hide the body, keep only the handle visible so the
     full album cover stays in view. Toggled via JS with .is-collapsed */
  .player.is-collapsed .player__body {
    display: none;
  }

  .player.is-collapsed .player__handle-chevron {
    transform: rotate(180deg);
  }
}

@media (min-width: 761px) {
  /* Desktop never collapses; the handle is not rendered */
  .player__body {
    display: flex !important;
  }
}

/* ---------- 10. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .icon--eq i,
  .track__btn.is-playing::after,
  .scroll-cue span {
    animation: none !important;
  }

  .btn:hover,
  .btn:focus-visible {
    transform: none;
  }
}