/* YARDWAVE free page
   Operator rules: true black, one bright green (#1DB954) used sparingly,
   gold (#C9A84C) only for the lock icon. No outline boxes, no dark green,
   no grey text. Atkinson Hyperlegible, 20px+ body, no letter-spacing,
   no ALL-CAPS body. Separation comes from space, type scale, 1px
   hairlines, light and glow. */

:root {
  --black: #000;
  --ink: #050505;                         /* deepest surface, still black */
  --green: #1DB954;
  --green-hi: #34d46b;                    /* hover state of green buttons */
  --gold: #C9A84C;
  --text: #f6f3ec;                        /* warm off-white */
  --text-2: rgba(246, 243, 236, .82);     /* second text: still high contrast */
  --text-3: rgba(246, 243, 236, .7);      /* quiet text: about 11:1 on black */
  --hair: rgba(255, 255, 255, .08);       /* hairline dividers */
  --lift: rgba(255, 255, 255, .045);      /* soft light behind hovered rows */
  --gutter: 16px;
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { font-size: 20px; -webkit-text-size-adjust: 100%; background: var(--black); }
@media (min-width: 1100px) { html { font-size: 21px; } }

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

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: 'Atkinson Hyperlegible', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: normal;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Best-effort: stop dragging icons and the canvas out of the page. */
img, svg, canvas { -webkit-user-drag: none; user-select: none; }

a { color: var(--text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 10px; }

.skip {
  position: absolute; left: var(--gutter); top: -120px; z-index: 20;
  background: var(--green); color: var(--black); padding: .6rem 1.1rem;
  font-weight: 700; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: var(--gutter); }

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}

#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }

/* Soft light at the horizon. Faint behind the 3D field (it reads as
   bloom), the whole picture when WebGL is missing. */
.atmos {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(55% 16% at 50% 24%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%);
}
.no-webgl .atmos {
  opacity: 1;
  background:
    radial-gradient(60% 14% at 50% 30%, rgba(29,185,84,.55), rgba(29,185,84,0) 72%),
    radial-gradient(30% 5% at 50% 30%, rgba(240,255,244,.35), rgba(0,0,0,0) 70%);
  animation: breathe 7s ease-in-out infinite;
  transform-origin: 50% 30%;
}
.no-webgl #field { display: none; }
@keyframes breathe { 50% { transform: scale(1.07); opacity: .8; } }

/* Fade to black at the bottom so the words always sit on black. */
.veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.9) 64%, #000 92%);
}

.top {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: calc(1.1rem + env(safe-area-inset-top)) var(--gutter) 0;
}
.wordmark { font-weight: 700; font-size: 1.05rem; line-height: 1; color: var(--text); }
/* Real logo (592x160 source, shown at 2x-4x density so it stays crisp). */
.logo { display: block; height: 34px; width: auto; max-width: 60vw; user-select: none; -webkit-user-drag: none; }
@media (min-width: 760px) { .logo { height: 40px; } }

.hero-inner {
  flex: 1;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter) 2.2rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2rem;
}

.tagline {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 5vw, 4.8rem);   /* 48px on phones, about 96px wide */
  line-height: 1.02;
  max-width: 13ch;
  text-wrap: balance;
  color: var(--text);
}
/* One gold word in the tagline: the logo's headphone gold (sampled #FCE070). */
.tagline .gold-word {
  color: #FCE070;
  text-shadow: 0 0 .5em rgba(252, 224, 112, .18);
}
/* Rotating headline: every line sits in the same grid cell, so the
   heading keeps the height of the longest line. Only opacity changes. */
.tagline-stack { display: grid; }
.tagline-line {
  grid-area: 1 / 1;
  align-self: end;           /* short lines sit on the subline, gap goes above */
  text-wrap: balance;
  opacity: 0;
  transition: opacity 4s ease-in-out;
}
.tagline-line.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tagline-line { transition: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.subline {
  margin: 1.1rem 0 0;
  font-size: 1.1rem; line-height: 1.5;
  color: var(--text-2);
  max-width: 32ch;
  text-wrap: pretty;
}

/* ---------- the deck: play button, now playing, progress ---------- */
.deck {
  -webkit-user-select: none; user-select: none;   /* best effort */
  width: 100%; max-width: 30rem;
}
.deck-row { display: flex; align-items: center; gap: 1.1rem; }

.big-play {
  --bass: 0;
  position: relative; flex: none;
  width: 4.4rem; height: 4.4rem;                  /* 88px */
  border-radius: 50%; border: 0; padding: 0;
  background: var(--green); color: var(--black);
  cursor: pointer; display: grid; place-items: center;
  box-shadow:
    0 0 calc(28px + var(--bass) * 40px) rgba(29,185,84, calc(.35 + var(--bass) * .35)),
    0 12px 40px rgba(0,0,0,.6);
  transition: transform .3s var(--ease), background-color .2s;
}
.big-play:hover { background: var(--green-hi); transform: scale(1.04); }
.big-play:active { transform: scale(.97); }
.big-play svg { width: 2rem; height: 2rem; fill: currentColor; }
.big-play .ico-play { margin-left: .15rem; }
.big-play .ico-pause { display: none; }
.playing .big-play .ico-play { display: none; }
.playing .big-play .ico-pause { display: block; }

.deck-info { min-width: 0; }
.now {
  margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.3;
  overflow-wrap: anywhere; min-height: 1.3em;
}
.now-mood { margin: .15rem 0 0; color: var(--text-3); min-height: 1.5em; }

.progress { margin-top: .6rem; }
.seek {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 48px;     /* tall touch area, thin visible line */
  background: transparent; margin: 0; cursor: pointer;
  --pct: 0%;
}
.seek:disabled { cursor: default; }
.seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--green) var(--pct), rgba(255,255,255,.16) var(--pct));
}
.seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); }
.seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--green); }
.seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; border: 0; background: var(--text);
  box-shadow: 0 0 0 6px rgba(255,255,255,0); transition: box-shadow .2s;
}
.seek:hover::-webkit-slider-thumb, .seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255,255,255,.14); }
.seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--text); }
.seek:disabled::-webkit-slider-thumb { background: rgba(255,255,255,.5); }
.seek:focus-visible { outline-offset: 0; }

.times {
  display: flex; justify-content: space-between; margin-top: -.35rem;
  color: var(--text-3); font-size: .9rem; font-variant-numeric: tabular-nums;
}
.status { margin: .5rem 0 0; min-height: 1.5em; color: var(--text); }

/* ---------- pill button (subscribe) ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .7rem 1.6rem;
  border-radius: 999px; border: 0;
  background: var(--green); color: var(--black);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  box-shadow: 0 0 32px rgba(29,185,84,.22);
  transition: background-color .2s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pill:hover { background: var(--green-hi); box-shadow: 0 0 44px rgba(29,185,84,.38); transform: translateY(-1px); }
.pill:active { transform: translateY(0) scale(.98); }
.deck .pill { margin-top: .6rem; width: 100%; }
/* Quiet price line under the subscribe buttons. White with a little
   opacity (not grey), no box. Hidden when PRICE_LINE is "". */
.price { margin: .7rem 0 0; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.4; text-align: center; }
.price[hidden] { display: none; }
.price-closing { margin-top: 1rem; }

/* ================= TRACK LIST ================= */
.tracks {
  max-width: var(--wrap); margin: 0 auto;
  padding: 3rem var(--gutter) 1rem;
}
.headline {
  margin: 0; font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.08; max-width: 16ch; text-wrap: balance;
}
.count { margin: .8rem 0 0; color: var(--text-3); }

.songs { list-style: none; margin: 2rem 0 0; padding: 0; }
.songs li { position: relative; }
.songs li + li::before {          /* hairline between rows, inset from the edges */
  content: ""; position: absolute; top: 0; left: .75rem; right: .75rem;
  height: 1px; background: var(--hair);
}

.row {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center; column-gap: .9rem;
  width: 100%; min-height: 4.2rem;
  margin: 0; padding: .85rem .75rem;
  border: 0; border-radius: 14px;
  background: transparent; color: var(--text);
  font: inherit; text-align: left; text-decoration: none;
  cursor: pointer; position: relative; z-index: 0;
  transition: background-color .25s var(--ease);
}
.row:hover, .row:focus-visible { background: var(--lift); }
.songs li:hover::before, .songs li:hover + li::before,
.songs li:focus-within::before, .songs li:focus-within + li::before { opacity: 0; }

/* Number column: number, or a play icon on hover, or live bars. */
.row-num {
  position: relative; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.row-num > * { grid-area: 1 / 1; }
.row-num .glyph, .row-num .eq { display: none; }
.row-num svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

.row.free:hover .num, .row.free:focus-visible .num { display: none; }
.row.free:hover .glyph, .row.free:focus-visible .glyph { display: grid; color: var(--text); }

.row.current .num { display: none; }
.row.current .row-title { color: var(--green); }
.row.current .glyph { display: grid; color: var(--green); }
.row.current.is-playing .glyph { display: none; }
.row.current.is-playing .eq { display: flex; }
.row.current.is-playing:hover .eq { display: none; }
.row.current.is-playing:hover .glyph { display: grid; color: var(--green); }

.eq { align-items: flex-end; gap: 3px; height: 1rem; }
.eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--green); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.row-text { min-width: 0; }
.row-title { display: block; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; transition: color .2s; }
.row-sub { display: block; color: var(--text-3); font-size: .95rem; line-height: 1.4; }

.row-end { display: flex; align-items: center; gap: .9rem; white-space: nowrap; }
.free-mark { color: var(--green); font-weight: 700; font-size: .9rem; }
.dur { color: var(--text-3); font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: right; }

/* Locked rows: a little quieter, gold lock, hint on hover. */
.row.locked .row-title { color: var(--text-2); }
.row.locked .lock { display: grid; place-items: center; color: var(--gold); }
.row.locked .lock svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.row.locked .hint {
  color: var(--text); font-size: .9rem;
  opacity: 0; transform: translateX(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.row.locked:hover .hint, .row.locked:focus-visible .hint { opacity: 1; transform: none; }
.row.locked:hover .row-title { color: var(--text); }

/* Touch screens have no hover: the hint shows after a tap (the row keeps
   focus when the visitor comes back from the subscribe tab). It takes no
   room until then, so titles keep their full width. */
@media (hover: none) {
  .row.locked .hint { display: none; }
  .row.locked:focus .hint, .row.locked:active .hint { display: inline; opacity: 1; transform: none; }
}
@media (max-width: 559px) {
  .row { column-gap: .7rem; padding-left: .5rem; padding-right: .5rem; }
  .row-end { gap: .6rem; }
  .songs li + li::before { left: .5rem; right: .5rem; }
  /* Narrow phones: the gold lock says it; the words would crush the title. */
  .row.locked .hint, .row.locked:hover .hint, .row.locked:focus .hint, .row.locked:active .hint { display: none; }
}

.row.missing { cursor: default; }
.row.missing .row-title { color: var(--text-2); }
.row.missing:hover .num { display: block; }
.row.missing:hover .glyph { display: none; }

/* ================= CLOSING ================= */
.closing {
  position: relative; isolation: isolate;
  max-width: var(--wrap); margin: 0 auto;
  padding: 5rem var(--gutter) 5.5rem;
  text-align: center;
  overflow: hidden;
}
.closing-light {
  position: absolute; z-index: -1; left: 50%; top: 52%;
  width: min(900px, 100%); height: 420px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events: none;
}
.closing-line {
  margin: 0 auto; font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.4rem);
  line-height: 1.04; max-width: 14ch; text-wrap: balance;
}
.closing-sub { margin: 1.1rem auto 0; color: var(--text-2); max-width: 32ch; font-size: 1.05rem; }
.closing-sub:empty { display: none; }
.pill-lg { margin-top: 2.2rem; min-height: 3.4rem; padding: .85rem 2.1rem; font-size: 1.05rem; }

/* ================= FOOTER ================= */
.foot {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.4rem var(--gutter) calc(1.8rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem;
  font-size: .9rem; color: var(--text-3);
  position: relative;
}
.foot::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--hair); }
.foot a { color: var(--text-2); text-decoration: none; padding: .7rem 0; }
.foot a:hover { color: var(--text); text-decoration: underline; }

.noscript { text-align: center; padding: 1rem var(--gutter); }

/* ================= MOTION ================= */
/* One load sequence for the hero, one soft reveal per section. */
.hero-copy, .deck { animation: rise 1.1s var(--ease) both; }
.deck { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Phones: the words take most of the screen, so let the light show
   through them a little more. */
@media (max-width: 759px) {
  .veil {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 12%),
      linear-gradient(to bottom, rgba(0,0,0,0) 26%, rgba(0,0,0,.5) 44%, rgba(0,0,0,.88) 66%, #000 90%);
  }
}

/* ================= WIDER SCREENS ================= */
@media (min-width: 760px) {
  :root { --gutter: 40px; }
  .hero-inner { padding-bottom: 3.2rem; }
  .tracks { padding-top: 5rem; }
}

@media (min-width: 1000px) {
  :root { --gutter: 56px; }
  .hero-inner {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 4rem; padding-bottom: 3.6rem;
  }
  .hero-copy { flex: 1 1 auto; }
  .deck { flex: 0 0 24rem; }
  .tagline { max-width: 12ch; }

  .tracks {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    column-gap: 4rem; align-items: start; padding-top: 6rem;
  }
  .tracks-head { position: sticky; top: 3rem; padding-top: .9rem; }
  .songs { margin-top: 0; }
  .closing { padding: 8rem var(--gutter) 8rem; }
}

/* Reduced motion: nothing moves on its own. The 3D field is drawn still
   in app.js. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .deck { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .no-webgl .atmos { animation: none; }
  .eq i { animation: none; transform: scaleY(.7); }
  .big-play, .pill, .row, .row.locked .hint { transition: none; }
}

/* ================= SHARE (from _modules/frontend/share-buttons) ================= */
/* share-buttons: soft grey pills, no outlines, icon + word.
   Uses page tokens when present: --text, --text-2, --text-3. */
.share { margin: 2.6rem auto 0; max-width: 34rem; }
.share-label { margin: 0 0 .8rem; color: var(--text-2, rgba(246,243,236,.82)); font-size: 1rem; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: .6rem 1.15rem;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--text, #f6f3ec);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.share-btn:hover { background: rgba(255,255,255,.14); }
.share-btn:active { transform: scale(.97); }
.share-ico { display: grid; place-items: center; }
.share-ico svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.share-status { margin: .8rem 0 0; min-height: 1.5em; color: var(--text, #f6f3ec); font-size: 1rem; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }