/*
 * base.css -- Music with Max foundation layer (Session 1)
 * Reset + root sizing + type scale + color application + grain + container +
 * core utilities + landmark/hero skeleton. Components (buttons, sleeves, nav,
 * etc.) are seeded minimally here and formalized in Session 2's styleguide.
 * Loads after tokens.css. References design_prd.md sections in comments.
 */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

:target { scroll-margin-top: var(--space-9); }

/* ============================================================= *
 * 2. Root sizing -- base 18px mobile / 17px desktop (PRD 7.1).
 *    Set in % so it respects the user's browser font preference
 *    and 200% zoom (PRD 14). The whole rem-based scale flows here.
 * ============================================================= */
:root { font-size: 112.5%; } /* 18px at default 16px root */

@media (min-width: 1025px) {
  :root { font-size: 106.25%; } /* 17px desktop */
}

/* ============================================================= *
 * 3. Color application -- ink canvas, bone text (PRD 6.4)
 * ============================================================= */
body {
  background-color: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
}

::selection {
  background-color: var(--teal);
  color: var(--ink);
}

/* ============================================================= *
 * 4. Typography (PRD 7) -- display posters, Sora labels, body read
 * ============================================================= */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.15;
  font-size: var(--fs-h3);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

p { max-width: 66ch; } /* body measure cap (PRD 7.2) */

a {
  color: var(--teal);
  text-decoration: none;
}
a:hover { color: var(--teal-deep); }

strong, b { font-weight: 700; }

/* ============================================================= *
 * 5. Focus -- visible ring on keyboard focus (PRD 12.1 / 14)
 * ============================================================= */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================= *
 * 6. Film-grain overlay (PRD 9.1) -- tiled SVG noise, ~5%,
 *    mix-blend-mode overlay, page-wide, never blocks pointer.
 *    CSS-first: zero HTTP request (inline data URI).
 * ============================================================= */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ============================================================= *
 * 7. Layout -- 12-col content cap 1200px, fluid gutters (PRD 8.1)
 * ============================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ============================================================= *
 * 8. Utilities
 * ============================================================= */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal);
  max-width: none;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--bone-dim);
  max-width: 52ch;
}

/* Screen-reader-only (kept in the a11y tree, out of the visual flow) */
.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;
}

/* Skip-link -- jumps to main now; retargets to #intake in Session 6 */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--ember);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  border-radius: var(--radius-pill);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--ink);
}

/* ============================================================= *
 * 9. Buttons (PRD 12.1) -- seeded; full variant set in Session 2
 * ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px; /* tap target (PRD 14) */
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--ember);
  color: var(--ink);
}
.btn--primary:hover {
  background: var(--ember-deep);
  color: var(--ink);
  transform: translateY(-1px);
}
.btn--primary:active { transform: none; }

/* ============================================================= *
 * 10. Landmarks -- header + footer (minimal; built out Session 6)
 * ============================================================= */
.site-header {
  position: relative;
  z-index: 10;
  padding-block: var(--space-4);
  border-bottom: var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.wordmark:hover { color: var(--bone); }
.wordmark__max { color: var(--ember); } /* "MAX" lockup nod (PRD 7.2) */

.site-footer {
  margin-top: var(--section-y);
  padding-block: var(--space-8);
  border-top: var(--hairline);
  color: var(--bone-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
}
.site-footer__made { text-transform: uppercase; letter-spacing: 0.12em; }

/* ============================================================= *
 * 11. Hero -- the signature moment (PRD 2 / 11 / 13.1).
 *     Ink room, CSS vinyl-groove backdrop, a breathing waveform
 *     behind the knocked-out logo (LCP), poster copy + intake CTA,
 *     and an opt-in audio-reactive control.
 * ============================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 88vh, 920px);
  padding-block: var(--section-y);
  overflow: hidden;
  isolation: isolate; /* scope blends/grain to the room */
}

/* 11.1 Vinyl-groove backdrop (PRD 9.4) -- concentric grooves + a soft teal
   spotlight + a low ember wash, centered behind the logo. CSS-only, zero image
   weight. Beat 2 of the load sequence: the groove draws in. */
.hero__room {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 72% 42%,
      color-mix(in srgb, var(--teal) 14%, transparent) 0%,
      transparent 60%),
    repeating-radial-gradient(circle at 72% 42%,
      color-mix(in srgb, var(--bone) 5%, transparent) 0px,
      color-mix(in srgb, var(--bone) 5%, transparent) 1px,
      transparent 1px, transparent 14px),
    radial-gradient(120% 80% at 50% 122%,
      color-mix(in srgb, var(--ember) 7%, transparent), transparent 62%);
  animation: grooveIn var(--dur-slow) var(--ease-out) 120ms both;
}

/* 11.2 Breathing waveform (PRD 11.2) -- full-bleed band across the room, drawn
   by js/main.js. Idle = slow breathe; opt-in play attaches a Web-Audio
   AnalyserNode that drives amplitude. Beat 4: it "ignites" left -> right. */
.hero__waveform {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(8px, 8vh, 96px);
  width: 100%;
  height: clamp(120px, 22vh, 220px);
  z-index: 0;
  pointer-events: none;
  animation: igniteWave 700ms var(--ease-out) 380ms both;
}

/* 11.3 Layout. DOM order brand -> copy: mobile shows the logo, then copy with
   the CTA in thumb reach; desktop (>=768) swaps to copy-left / logo-right,
   off-center like a printed poster (PRD 8.1). */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
  width: 100%;
}

.hero__brand { display: flex; justify-content: center; }
.hero__logo {
  display: block;
  filter: drop-shadow(0 12px 28px rgba(14, 13, 11, 0.72));
}
.hero__logo img {
  width: clamp(200px, 62vw, 320px);
  height: auto;
  margin-inline: auto;
  /* edgeless on ink -- the knockout drops the field; a soft warm drop-shadow
     lifts the print without a box (PRD 9.6 / 10). */
  animation: logoSettle var(--dur-slow) var(--ease-out) 220ms both;
}

.hero__copy { text-align: center; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  margin-block: var(--space-4) var(--space-5);
  max-width: 16ch;
  margin-inline: auto;
}

.hero__subline {
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: none;
}

/* Opt-in audio control (tonearm). Collapsed until js wires a sample. */
.hero__audio { margin-top: var(--space-5); }
.hero__audio:empty { display: none; }

.hero__tonearm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  background: var(--ink-2);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone-dim);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.hero__tonearm:hover {
  border-color: color-mix(in srgb, var(--teal) 40%, var(--ink-3));
  color: var(--bone);
}
.hero__tonearm__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink);
  font-size: 0.72em;
  line-height: 1;
}
.hero__tonearm[aria-pressed='true'] .hero__tonearm__icon { background: var(--ember); }

@media (min-width: 768px) {
  .hero__inner { grid-template-columns: 1.04fr 0.96fr; }
  .hero__copy  { grid-column: 1; grid-row: 1; text-align: left; }
  .hero__brand { grid-column: 2; grid-row: 1; }
  .hero__logo img { width: clamp(300px, 36vw, 460px); }
  .hero__title,
  .hero__subline { margin-inline: 0; }
  .hero__cta-row { justify-content: flex-start; }
}

/* ============================================================= *
 * 12. Hero load sequence (PRD 11.1) -- the documented 5 beats,
 *     <=900ms, --ease-out: room/grain (0) -> groove (120) -> logo
 *     (220) -> waveform ignite (380) -> eyebrow/headline/subline/CTA
 *     rise (480-720). Reduced motion jumps to final states.
 * ============================================================= */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes grooveIn {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes logoSettle {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes igniteWave {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.hero__eyebrow { animation: riseIn var(--dur-slow) var(--ease-out) 480ms both; }
.hero__title   { animation: riseIn var(--dur-slow) var(--ease-out) 560ms both; }
.hero__subline { animation: riseIn var(--dur-slow) var(--ease-out) 640ms both; }
.hero__cta-row { animation: riseIn var(--dur-slow) var(--ease-out) 720ms both; }

@media (prefers-reduced-motion: reduce) {
  .hero__room,
  .hero__waveform,
  .hero__logo img,
  .hero__eyebrow,
  .hero__title,
  .hero__subline,
  .hero__cta-row {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}