/* ============================================================
   Vinyl Hero — full-viewport hero section
   Phase A: static visuals only (no Spotify, no audio yet)
   Wired by src/hero/vinyl-hero.js
   ============================================================ */

.vinyl-hero {
  --accent: var(--tiers--color, grey); /* Essentials tier — defined in br-market-group.br.css */
  --hero-bg: #0a0a0a;
  --hero-fg: #f5f5f5;
  --hero-fg-dim: rgba(245, 245, 245, 0.6);
  --hero-fg-muted: rgba(245, 245, 245, 0.35);
  --hero-line: rgba(255, 255, 255, 0.08);
  --vinyl-size: clamp(280px, 36vw, 520px);
  --knob-size: clamp(90px, 8vw, 130px);
  --knob-angle: 39deg; /* derived from JS, 72% volume default */

  position: relative;
  min-height: 100svh;
  overflow: hidden;
  font-family: 'Satoshi', sans-serif;
  color: var(--hero-fg);
  background: var(--hero-bg);
  padding-top: var(--site-header-h, 72px);
  isolation: isolate;
}

/* Ambient gradient backdrop — Essentials tier: neutral grey on dark.
   Zero chroma keeps the look monochrome/editorial; luminance variation alone
   creates the depth, which lets the vinyl record's form do the visual work. */
.vinyl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 60% at 28% 32%, oklch(0.58 0 0 / 0.45) 0%, transparent 60%),
    radial-gradient(60% 50% at 82% 78%, oklch(0.36 0 0 / 0.55) 0%, transparent 60%),
    radial-gradient(40% 30% at 18% 82%, oklch(0.48 0 0 / 0.2) 0%, transparent 70%),
    var(--hero-bg);
  filter: blur(48px) saturate(100%);
}

.vinyl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

/* ───────── Layout ───────── */
.vinyl-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding: clamp(16px, 2.5vh, 32px) 0 clamp(32px, 6vh, 80px);
  min-height: calc(100svh - var(--site-header-h, 72px));
}

@media (max-width: 900px) {
  .vinyl-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 16px 48px;
  }
}

/* ───────── Left column: copy ───────── */
.vinyl-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 520px;
}

.vinyl-hero__h1 {
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 3vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.000001em;
  color: var(--hero-fg);
  text-transform: uppercase;
}

.vinyl-hero__sub {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--hero-fg-dim);
  max-width: 48ch;
}

/* Search ------------------------------------------------------------------ */
.vinyl-hero__search {
  position: relative;
  margin-top: 8px;
  max-width: 380px; /* user requested narrower search input */
}

.vinyl-hero__search input[type='search'] {
  width: 100%;
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hero-line);
  border-radius: 999px;
  padding: 14px 20px 14px 48px;
  color: var(--hero-fg);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(245,245,245,0.45)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;
}

.vinyl-hero__search input[type='search']::placeholder {
  color: var(--hero-fg-muted);
}

.vinyl-hero__search input[type='search']:focus {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

.vinyl-hero__search input[type='search']::-webkit-search-cancel-button {
  appearance: none;
}

/* Results panel — Spotify artist matches drop down below the search input. */
.vinyl-hero__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5;
  background: rgba(20, 20, 22, 0.95);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hero-line);
  border-radius: 16px;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.vinyl-hero__results[hidden] {
  display: none;
}

.vinyl-hero__result {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--hero-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.vinyl-hero__result:hover,
.vinyl-hero__result:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}
.result__art {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.result__art--empty {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hero-line);
}
.result__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result__followers {
  font-size: 12px;
  color: var(--hero-fg-dim); /* was --hero-fg-muted (35%) — too dim to read */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vinyl-hero__results-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--hero-fg-muted);
  text-align: center;
}

/* Preset chips */
.vinyl-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.vinyl-hero__chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hero-line);
  border-radius: 999px;
  /* These presets are the hero's primary touch affordance — the pill carries a
     full 44px so a thumb can drop the needle without aiming. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  color: var(--hero-fg-dim);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.vinyl-hero__chip::before {
  content: '↳ ';
  color: var(--hero-fg-muted);
}
.vinyl-hero__chip:hover,
.vinyl-hero__chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--hero-fg);
  transform: translateY(-1px);
}

/* Now Playing metadata */
.vinyl-hero__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 6px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--hero-line);
}
.vinyl-hero__meta[hidden] {
  display: none;
}
.vinyl-hero__meta > div {
  display: contents;
}
.vinyl-hero__meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-fg-muted);
}
.vinyl-hero__meta dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--hero-fg);
  line-height: 1.3;
}

/* ───────── Right column: player ───────── */
.vinyl-hero__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
}

.vinyl-wrap {
  position: relative;
  width: var(--vinyl-size);
  height: var(--vinyl-size);
}

/* Record itself */
.vinyl-record {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a 0%, #0a0a0a 55%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.8),
    inset -10px -10px 30px rgba(0, 0, 0, 0.9),
    inset 10px 10px 30px rgba(120, 120, 120, 0.1);
  animation: vinyl-spin var(--spin-duration, 40s) linear infinite;
  will-change: transform;
}
.vinyl-hero[data-state='playing'] .vinyl-record {
  --spin-duration: 20s;
}
.vinyl-hero[data-state='loading'] .vinyl-record,
.vinyl-hero[data-state='error'] .vinyl-record {
  --spin-duration: 80s;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.022) 2px,
    rgba(255, 255, 255, 0.022) 4px
  );
  pointer-events: none;
}

.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 42%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, oklch(0.65 0 0), oklch(0.22 0 0));
  display: grid;
  place-items: center;
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.vinyl-label::after {
  /* Spindle hole */
  content: '';
  position: absolute;
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Picture wraps the img for AVIF/PNG sources; collapse it so the img is
   the direct grid child of .vinyl-label and width: 60% resolves against
   the label, not the picture's intrinsic (circular) width. */
.vinyl-label picture {
  display: contents;
}
.vinyl-label__logo {
  display: block;
  width: 60%;
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: opacity 320ms ease;
}
.vinyl-label__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 320ms ease;
}
.vinyl-hero[data-state='playing'] .vinyl-label__logo {
  opacity: 0;
}
.vinyl-hero[data-state='playing'] .vinyl-label__art {
  opacity: 1;
}

.vinyl-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, transparent 40%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

/* Tonearm — anchored to the record, not to the hero.
   It used to hang off the hero's top-right corner at its own `clamp()`, which
   only lined up with the platter while both clamps were mid-range: past 1445px
   the record capped first and the arm drifted off it, and once the layout
   stacked the arm floated over the H1 (so it was hidden below 900px).
   Sizing it in percentages of .vinyl-wrap locks the needle to the groove at
   every width and in both layouts — 127.8% / -4.05% / -9.65% reproduce the
   shipped desktop geometry exactly.
   Pivot lives at SVG coords (340, 60); rotation origin uses transform-box: view-box
   so changes to --arm-angle swing the arm around the pivot circle, not the SVG center. */
.tonearm {
  position: absolute;
  top: -9.65%;
  left: -4.05%;
  width: 127.8%;
  height: 127.8%;
  z-index: 2;
  pointer-events: none;
  --arm-angle: 0deg;
}
.tonearm__rot {
  transform-box: view-box;
  transform-origin: 340px 60px;
  transform: rotate(var(--arm-angle));
  transition: transform 600ms cubic-bezier(0.45, 0, 0.2, 1);
}
.vinyl-hero[data-state='playing'] .tonearm {
  --arm-angle: 4deg;  /* needle cues just inside the outer groove — nudged right off the artwork */
}
.vinyl-hero[data-state='loading'] .tonearm {
  --arm-angle: -6deg; /* lifted slightly higher while audio loads */
}
@media (prefers-reduced-motion: reduce) {
  .tonearm__rot { transition: none; }
}
/* The arm now travels with the platter, so the stacked layout keeps it. */

/* Knob row */
.vinyl-hero__knob-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.knob-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-fg-muted);
}

.volume-knob {
  position: relative;
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3a3a3a, #1a1a1a);
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset -8px -8px 20px rgba(0, 0, 0, 0.9),
    inset 8px 8px 15px rgba(120, 120, 120, 0.15);
  transition: box-shadow 240ms ease;
}
.volume-knob:hover,
.volume-knob:focus-visible {
  outline: none;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.92),
    inset -8px -8px 20px rgba(0, 0, 0, 0.9),
    inset 8px 8px 15px rgba(160, 160, 160, 0.2),
    0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}
.volume-knob.is-dragging { cursor: grabbing; }

/* Needle wrap rotates as one unit so the indicator pivots around the knob center.
   --knob-angle is set on .volume-knob from JS (range: -135deg to 135deg). */
.knob-needle-wrap {
  position: absolute;
  inset: 0;
  transform: rotate(var(--knob-angle));
  transition: transform 80ms linear;
  pointer-events: none;
}
.volume-knob.is-dragging .knob-needle-wrap {
  transition: none;
}

.knob-indicator {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 18%;
  background: linear-gradient(to bottom, var(--accent), color-mix(in oklab, var(--accent) 70%, #000));
  border-radius: 2px;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 60%, transparent);
}

.knob-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.knob-tick-group {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  pointer-events: none;
}

.knob-tick {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  /* Each tick rotates around the knob's center. The tick group has inset: 14%,
     so the tick group radius is (knob-size * 0.36). The tick sits at top of the
     group, so its rotation origin = (1px, 36% of knob-size) measured from itself. */
  transform-origin: 50% calc(var(--knob-size) * 0.36);
  transform: rotate(var(--tick-angle, 0deg));
}
.knob-tick.is-active {
  background: color-mix(in oklab, var(--accent) 60%, transparent);
}

.knob-center {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #262626, #0a0a0a);
  display: grid;
  place-items: center;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ───────── Scroll cue ───────── */
/* The anchor is a 44px square so a thumb can hit it; the 22×36 capsule people
   actually see is drawn by ::before inside that square, unchanged. */
.vinyl-hero__scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform var(--motion-base, 420ms) var(--motion-settle, ease);
}
.vinyl-hero__scroll-cue::before {
  content: '';
  grid-area: 1 / 1;
  width: 22px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  transition: border-color 200ms ease;
}
.vinyl-hero__scroll-cue span {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  /* Sits 6px inside the capsule, which itself is centred in the 44px square. */
  margin-top: calc((44px - 36px) / 2 + 6px);
  display: block;
  width: 2px;
  height: 6px;
  background: var(--hero-fg-dim);
  border-radius: 1px;
  animation: scroll-cue 2.4s var(--motion-settle, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}
.vinyl-hero__scroll-cue:hover::before,
.vinyl-hero__scroll-cue:focus-visible::before {
  border-color: var(--hero-fg);
}
.vinyl-hero__scroll-cue:hover,
.vinyl-hero__scroll-cue:focus-visible {
  transform: translateX(-50%) translateY(3px);
}
.vinyl-hero__scroll-cue:focus-visible {
  outline: none;
}
/* The dot does not bob. It drops, the way the needle is cued: a quick fall, a
   pause at the bottom while it seats, then it is gone and the next one starts
   from the top. The long tail on the keyframe is the pause — a cue that beats
   evenly reads as a loading spinner, not an invitation. */
@keyframes scroll-cue {
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: 0.75; }
  55%  { transform: translateY(11px); opacity: 0.75; }
  72%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .vinyl-record { animation: none; }
  .vinyl-hero__scroll-cue span { animation: none; }
  .vinyl-label__logo,
  .vinyl-label__art { transition: none; }
}

/* ───────── Mobile fine-tuning ───────── */
@media (max-width: 640px) {
  .vinyl-hero__player {
    gap: 24px;
  }
  .vinyl-hero__inner {
    padding-block: 32px 64px;
  }
  .vinyl-hero__scroll-cue { display: none; }
}