/* ==========================================================================
   Components — glossy pill, glass card, knob, tags, dots
   Gradient and shadow stacks are copied verbatim from build-spec.md §3.
   ========================================================================== */

/* --- Glossy black pill -------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.014em;
  text-transform: lowercase;
  background:
    linear-gradient(177deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.12) 6%, rgba(255,255,255,0.02) 15%, rgba(255,255,255,0) 28%),
    radial-gradient(52% 132% at 23% 45%, rgba(203,216,212,0.22) 0%, rgba(203,216,212,0.09) 38%, rgba(203,216,212,0) 70%),
    radial-gradient(34% 96% at 61% 28%, rgba(228,234,238,0.11) 0%, rgba(228,234,238,0) 64%),
    radial-gradient(150% 180% at 15% -44%, rgba(255,255,255,0.19) 0%, rgba(255,255,255,0.04) 44%, rgba(255,255,255,0) 68%),
    linear-gradient(0deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 9%, rgba(255,255,255,0) 22%),
    linear-gradient(178deg, #262A2E 0%, #0F1114 46%, #040506 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(255,255,255,0.16),
    inset 0 0 22px rgba(0,0,0,0.5),
    0 1px 2px rgba(8,9,11,0.45),
    0 10px 26px -8px rgba(8,9,11,0.38);
  transition: transform 220ms var(--ease-zoom), box-shadow 220ms var(--ease-zoom);
}

.pill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.56),
    inset 0 -1px 1px rgba(255,255,255,0.18),
    inset 0 0 22px rgba(0,0,0,0.46),
    0 1px 2px rgba(8,9,11,0.45),
    0 16px 34px -10px rgba(8,9,11,0.44);
}

.pill:active { transform: translateY(0); }

/* Hero size */
.pill--hero {
  padding: 26px 46px;
  font-size: 23px;
}

/* Section size (FAQ) */
.pill--section {
  padding: 19px 34px;
  font-size: 17px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(255,255,255,0.16),
    inset 0 0 20px rgba(0,0,0,0.5),
    0 1px 2px rgba(8,9,11,0.45),
    0 10px 26px -8px rgba(8,9,11,0.38);
}

/* Card size (CTA glass card) */
.pill--card {
  padding: 16px 28px;
  font-size: 15.5px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(255,255,255,0.16),
    inset 0 0 18px rgba(0,0,0,0.5),
    0 1px 2px rgba(8,9,11,0.45),
    0 8px 20px -6px rgba(8,9,11,0.42);
}

/* Nav size — shallower inner glow and a tighter drop (§3) */
.pill--nav {
  padding: 10px 21px;
  font-size: 13.5px;
  letter-spacing: -0.012em;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(255,255,255,0.16),
    inset 0 0 18px rgba(0,0,0,0.5),
    0 1px 2px rgba(8,9,11,0.4),
    0 6px 16px -6px rgba(8,9,11,0.3);
}

.pill--icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(255,255,255,0.16),
    inset 0 0 18px rgba(0,0,0,0.5),
    0 1px 2px rgba(8,9,11,0.4),
    0 6px 16px -6px rgba(8,9,11,0.3);
}

/* --- Glass card --------------------------------------------------------- */

.glass {
  background: linear-gradient(142deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.50) 46%, rgba(255,255,255,0.36) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.40),
    inset 0 0 26px rgba(255,255,255,0.22),
    0 2px 6px -2px rgba(14,22,64,0.10),
    0 16px 40px -16px rgba(14,22,64,0.30);
}

/* Over dark content the white fill rises and the blur deepens, or dark text
   loses contrast where it crosses a letterform (§3). */
.glass--over-dark {
  background: linear-gradient(142deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.74) 48%, rgba(255,255,255,0.66) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  border-color: rgba(255,255,255,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(255,255,255,0.45),
    0 2px 8px -2px rgba(14,22,64,0.14),
    0 36px 80px -28px rgba(14,22,64,0.42);
}

/* Deliberate fallback: a flat 50% white fill (§3) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,0.50); }
  .glass--over-dark { background: rgba(255,255,255,0.86); }
}

/* --- Knob (hero) -------------------------------------------------------- */

.knob-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  width: 96px;
  flex-shrink: 0;
}

.knob {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.20) 0deg 1.1deg, rgba(255,255,255,0) 1.1deg 6deg),
    linear-gradient(177deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 8%, rgba(255,255,255,0) 28%),
    radial-gradient(120% 120% at 50% 118%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(178deg, #2C3035 0%, #121418 46%, #040506 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.42),
    inset 0 -1px 1px rgba(255,255,255,0.12),
    inset 0 0 14px rgba(0,0,0,0.5),
    0 1px 2px rgba(8,9,11,0.4),
    0 5px 14px -5px rgba(8,9,11,0.3);
}

.knob:active { cursor: grabbing; }

.knob__cap {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    linear-gradient(177deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.05) 18%, rgba(255,255,255,0) 46%),
    radial-gradient(70% 70% at 32% 26%, rgba(203,216,212,0.16) 0%, rgba(203,216,212,0) 72%),
    linear-gradient(178deg, #23272B 0%, #0E1013 50%, #050607 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.26), 0 1px 3px rgba(0,0,0,0.55);
  pointer-events: none;
}

.knob__hand {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.knob__hand::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--paper);
}

.knob-unit__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  font-family: var(--narrow);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.knob-unit__value { color: var(--slate); }

.knob-unit__meter {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--hairline);
}

.knob-unit__meter span {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  background: var(--onyx);
}

/* --- Circle icon buttons (hero bottom row) ------------------------------ */

.circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  color: var(--onyx);
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms var(--ease-zoom);
}

.circle-btn:hover {
  border-color: var(--crowdflower);
  color: var(--crowdflower);
  transform: translateY(-1px);
}

.circle-btn--mini {
  width: 28px;
  height: 28px;
}

.circle-btn--dark {
  width: 104px;
  height: 104px;
  border-color: #4A5158;
  color: var(--paper);
}

.circle-btn--dark:hover {
  border-color: var(--signal);
  color: var(--signal);
}

/* Glass on a dark ground: frosted, not white. The glass card recipe is
   built for pale grounds; over the reel's onyx it would read as a bright
   disc, so the fill is a low-alpha white and the icon stays white. */
.circle-btn--glass {
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--paper);
  background: linear-gradient(142deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.09) 48%, rgba(255,255,255,0.05) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 2px 6px -2px rgba(0,0,0,0.6),
    0 18px 40px -16px rgba(0,0,0,0.75);
}

.circle-btn--glass:hover {
  border-color: rgba(255,255,255,0.42);
  color: var(--paper);
  background: linear-gradient(142deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.13) 48%, rgba(255,255,255,0.07) 100%);
  transform: translateY(-1px) scale(1.04);
}

.circle-btn--glass:active { transform: translateY(0) scale(0.98); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .circle-btn--glass { background: rgba(255,255,255,0.14); }
}

/* --- Tag pills ---------------------------------------------------------- */

.tag {
  font-family: var(--narrow);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ultramarine);
  background: var(--tag-bg);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* --- Wordmark ----------------------------------------------------------- */

.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.wordmark__reg {
  font-size: 0.74em;
  vertical-align: 0.46em;
  letter-spacing: 0;
  margin-left: 0.03em;
  color: var(--ultramarine);
}


/* ==========================================================================
   Liquid shapes
   Replaces the radial-gradient glows. A radial gradient is perfectly
   symmetrical and falls off on a mathematical curve, which is exactly the
   look that reads as generated. These are irregular forms filled edge to
   edge and then blurred, so the falloff follows the shape instead of a
   circle — and every surface they sit on carries real grain over the top,
   which is the single thing that stops a soft gradient looking synthetic.
   ========================================================================== */

.blob {
  position: absolute;
  pointer-events: none;
  filter: blur(var(--blob-blur, 72px));
  opacity: var(--blob-alpha, 1);
  will-change: transform;
}

/* Four irregular silhouettes, used in rotation. The asymmetry is the
   point: no two quadrants share a radius. */
.blob--a { border-radius: 58% 42% 37% 63% / 46% 58% 42% 54%; }
.blob--b { border-radius: 34% 66% 62% 38% / 61% 36% 64% 39%; }
.blob--c { border-radius: 67% 33% 48% 52% / 39% 63% 37% 61%; }
.blob--d { border-radius: 45% 55% 70% 30% / 56% 44% 56% 44%; }

/* Grain. feTurbulence, so it is real noise rather than a tiled image, and
   it sits above the shapes but below the content. */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-alpha, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}


/* --- The wave button, which is also the player ------------------------- */

.wave-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 300ms var(--ease-zoom), opacity 220ms ease;
}

/* Playing and hovered: the five bars collapse into a pause mark, so the
   thing the pointer is on says what hovering it again will do. */
.circle-btn--wave.is-playing:hover .wave-bar:nth-child(1),
.circle-btn--wave.is-playing:hover .wave-bar:nth-child(3),
.circle-btn--wave.is-playing:hover .wave-bar:nth-child(5) {
  opacity: 0;
  transform: scaleY(0.15);
}

.circle-btn--wave.is-playing:hover .wave-bar:nth-child(2) {
  transform: translateX(1px) scaleY(1.28);
}

.circle-btn--wave.is-playing:hover .wave-bar:nth-child(4) {
  transform: translateX(-1px);
}

/* Playing but not hovered: the bars keep time */
.circle-btn--wave.is-playing:not(:hover) .wave-bar:nth-child(1) { animation: eq 1.1s ease-in-out infinite; }
.circle-btn--wave.is-playing:not(:hover) .wave-bar:nth-child(2) { animation: eq 0.8s ease-in-out infinite 0.1s; }
.circle-btn--wave.is-playing:not(:hover) .wave-bar:nth-child(3) { animation: eq 1.3s ease-in-out infinite 0.2s; }
.circle-btn--wave.is-playing:not(:hover) .wave-bar:nth-child(4) { animation: eq 0.9s ease-in-out infinite 0.05s; }
.circle-btn--wave.is-playing:not(:hover) .wave-bar:nth-child(5) { animation: eq 1.2s ease-in-out infinite 0.15s; }

@keyframes eq {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}

.circle-btn--wave.is-playing { border-color: var(--crowdflower); color: var(--crowdflower); }

@media (prefers-reduced-motion: reduce) {
  .wave-bar { transition: none; animation: none !important; }
  .topbar__now i { animation: none; }
}

/* --- the music control, pinned ------------------------------------------
   It leaves the footrow's flow and is fixed at the coordinates it already
   had, so the person finds it where they pressed it. `.sound-slot` holds
   its box in the row; `.has-chip` is the glass that fades in once it is
   travelling over the sections rather than sitting on the hero's paper. */

.sound-slot {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.circle-btn--wave.is-floating {
  position: fixed;
  z-index: 60;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background-color 320ms ease,
    box-shadow 320ms ease,
    transform 200ms var(--ease-zoom);
}

.circle-btn--wave.is-floating.has-chip {
  color: #F2F3F5;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(14, 16, 19, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 6px -2px rgba(0, 0, 0, 0.4),
    0 14px 34px -14px rgba(0, 0, 0, 0.55);
}

.circle-btn--wave.is-floating.has-chip:hover,
.circle-btn--wave.is-floating.has-chip.is-playing {
  color: var(--crowdflower);
  border-color: var(--crowdflower);
}

@media (prefers-reduced-motion: reduce) {
  .circle-btn--wave.is-floating { transition: none; }
}

/* Skip link. Off-screen until focused, so it changes nothing visually and
   exists only for someone arriving on the keyboard. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  background: var(--onyx);
  color: var(--paper);
  font-family: var(--narrow);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip-link:focus-visible {
  left: 0;
}