/* ==========================================================================
   Status Audio — Audiophile Quiz
   Palette + radii lifted from status.co's own CSS custom properties.
   Mobile-first: everything below is phone layout, desktop is layered on at
   the bottom in two breakpoints.
   ========================================================================== */

/* ── Usual (status.co's typeface) ─────────────────────────────────────────
   Drop the .woff2 files into /public/assets/fonts/ with these exact names.
   Until then the fallback stack keeps the layout identical in metrics. */
@font-face {
  font-family: "Usual";
  src: url("../fonts/usual-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Usual";
  src: url("../fonts/usual-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Usual";
  src: url("../fonts/usual-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Usual";
  src: url("../fonts/usual-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --bg:        #000000;
  --bg-elev:   #111112;
  --bg-hover:  #17171a;
  --line:      rgba(241, 241, 241, .14);
  --line-soft: rgba(241, 241, 241, .08);
  --text:      #F1F1F1;
  --muted:     #888888;
  --muted-dim: #666666;
  --accent:    #0A84FF;
  --accent-dim: rgba(10, 132, 255, .30);
  --gold:      #D5C095;
  --danger:    #9E2A2B;

  --pill:      100px;
  --soft:      10px;

  --pad:       20px;   /* status.co --mobile-pad */
  --pad-lg:    40px;   /* status.co --desktop-pad */

  --font: "Usual", "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, Arial, sans-serif;

  --ease:      cubic-bezier(.22, 1, .36, 1);   /* out-expo-ish, for entrances */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* Ambient wash so pure black never reads as "unstyled". */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(90rem 60rem at 50% -20%, rgba(10, 132, 255, .10), transparent 60%),
    radial-gradient(60rem 60rem at 50% 120%, rgba(241, 241, 241, .05), transparent 65%);
}

/* ── App frame ──────────────────────────────────────────────────────────── */
.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: max(var(--pad), env(safe-area-inset-top)) var(--pad)
           max(var(--pad), env(safe-area-inset-bottom));
}

/* ── HUD (logo / progress / counter) ────────────────────────────────────── */
.hud {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 28px;
}

.hud__logo { display: block; flex: none; line-height: 0; color: #F1F1F1; }
.hud__logo-img,
.hud__logo img {
  width: 100px;
  height: auto;
  display: block;
  color: #F1F1F1;
}
.hud__logo img[src$=".png"] {
  filter: brightness(0) invert(1);
}

.hud__progress {
  flex: 1 1 auto;
  height: 2px;
  border-radius: var(--pill);
  background: var(--line);
  overflow: hidden;
}
.hud__progress[hidden] { display: none; }

.hud__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--text);
  transition: width .55s var(--ease);
}

.hud__counter {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hud__counter[hidden] { display: none; }

/* ── Earbud turntable ───────────────────────────────────────────────────── */
.bud {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(96vw, 460px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none; /* enabled in JS once the model loads */
  opacity: 0;
  transition: opacity .8s var(--ease-soft), scale .9s var(--ease),
              translate .9s var(--ease), top .9s var(--ease);
}
.bud__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.bud__glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 132, 255, .22), transparent 68%);
  filter: blur(36px);
}

/* Per-screen staging of the product shot.
   Intro and result read as a hero: product up top, copy anchored below it.
   During the quiz it drops back to an ambient backdrop behind the options. */
.app[data-screen="intro"]  .bud { opacity: .95; scale: 1;   top: 3%;  translate: -50% 0; }
.app[data-screen="result"] .bud { opacity: .85; scale: .74; top: 1%;  translate: -50% 0; }
.app[data-screen="question"] .bud { opacity: .20; scale: 1.15; top: 50%; translate: -50% -50%; }
.app[data-screen="email"]  .bud { opacity: .16; scale: 1;    top: 50%; translate: -50% -50%; }

/* Keep the hero copy clear of the product instead of layering over it. */
.app[data-screen="intro"]  .stage,
.app[data-screen="result"] .stage { align-content: end; }

/* ── Stage / screens ────────────────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 28px 0;
  /* Let empty space pass pointer events through to the 3D canvas behind. */
  pointer-events: none;
}
.stage button,
.stage a,
.stage input,
.stage .opt,
.stage .form,
.stage .linkback,
.stage .field {
  pointer-events: auto;
}

.screen {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.screen[hidden] { display: none; }

/* Entrance: content lifts and fades in as a group.
   The hidden state lives inside the keyframes rather than on the element, so
   if the animation never runs (throttled tab, animations disabled) the copy
   is simply visible instead of stuck at opacity 0. */
.screen.is-entering > * { animation: rise .62s var(--ease) both; }
.screen.is-entering > *:nth-child(1) { animation-delay: .02s; }
.screen.is-entering > *:nth-child(2) { animation-delay: .07s; }
.screen.is-entering > *:nth-child(3) { animation-delay: .12s; }
.screen.is-entering > *:nth-child(4) { animation-delay: .17s; }
.screen.is-entering > *:nth-child(5) { animation-delay: .22s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Exit: a quick, subtle sink. */
.screen.is-leaving { animation: sink .2s var(--ease-soft) forwards; }
@keyframes sink { to { opacity: 0; transform: translateY(-8px); } }

/* ── Type ───────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.display {
  margin: 0 0 14px;
  font-size: clamp(2rem, 9.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.display--sm { font-size: clamp(1.75rem, 8vw, 2.25rem); }

.sub {
  margin: 0 0 30px;
  max-width: 30rem;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.fineprint {
  margin: 20px 0 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .05em;
  color: var(--muted-dim);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 40px;
  border: 0;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), background-color .25s var(--ease-soft),
              box-shadow .3s var(--ease-soft), opacity .2s linear;
}

.btn--primary {
  width: 100%;
  max-width: 21rem;
  background: var(--text);
  color: #000;
  box-shadow: 0 0 0 0 rgba(241, 241, 241, 0);
}
.btn--primary:hover { background: #fff; box-shadow: 0 10px 40px -12px rgba(241, 241, 241, .45); }
.btn--primary:active { transform: scale(.975); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__label { opacity: 0; }

.btn__spinner {
  position: absolute;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .22);
  border-top-color: #000;
  opacity: 0;
}
.btn.is-busy .btn__spinner { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.linkback {
  margin-top: 28px;
  padding: 10px 14px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--muted-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .25s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.linkback:hover { color: var(--text); }
.linkback[hidden] { display: none; }

/* ── Question ───────────────────────────────────────────────────────────── */
.q__index {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-dim);
  font-variant-numeric: tabular-nums;
}

.q__title {
  margin: 0 0 26px;
  font-size: clamp(1.3rem, 6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.014em;
  text-wrap: balance;
}

.q__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--soft);
  background: rgba(17, 17, 18, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .25s var(--ease-soft), background-color .25s var(--ease-soft),
              transform .35s var(--ease);
}

/* Sweep that fills the option on selection. */
.opt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 132, 255, .18), rgba(10, 132, 255, .05));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease);
}

.opt:hover { border-color: rgba(241, 241, 241, .3); background: var(--bg-hover); }
.opt:active { transform: scale(.985); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.opt.is-selected { border-color: var(--accent); }
.opt.is-selected::before { transform: scaleX(1); }
.opt.is-selected .opt__key { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Everything that isn't picked recedes. */
.q__options.is-locked .opt:not(.is-selected) { opacity: .35; }

.opt__key {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft),
              border-color .3s var(--ease-soft);
}
.opt__text { position: relative; }

/* ── Email form ─────────────────────────────────────────────────────────── */
.form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.field { width: 100%; max-width: 21rem; }

.input {
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: rgba(17, 17, 18, .6);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;          /* 16px keeps iOS from zooming on focus */
  font-weight: 300;
  text-align: center;
  transition: border-color .25s var(--ease-soft), background-color .25s var(--ease-soft);
}
.input::placeholder { color: var(--muted-dim); }
.input:focus { outline: none; border-color: var(--text); background: var(--bg-elev); }
.input.is-invalid { border-color: var(--danger); }

.field__error {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 300;
  color: #E06C6D;
}
.field__error[hidden] { display: none; }

.consent {
  margin: 20px 0 0;
  max-width: 24rem;
  font-size: 10.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted-dim);
}
.consent a { color: var(--muted); text-underline-offset: 3px; }

/* ── Result ─────────────────────────────────────────────────────────────── */
.score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.score__num {
  font-size: clamp(4.5rem, 24vw, 7rem);
  font-weight: 600;
  letter-spacing: -.045em;
}
.score__den {
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 300;
  color: var(--muted-dim);
  letter-spacing: -.02em;
}

.tier {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.screen--result[data-tier="golden-ear"] .tier { color: var(--gold); }
.screen--result[data-tier="golden-ear"] .score__num { color: var(--gold); }

.inbox {
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  text-wrap: pretty;
}
/* The address gets its own line so it never breaks mid-word. */
.inbox strong {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .app { padding: var(--pad-lg); }
  .hud { gap: 24px; min-height: 34px; }
  .hud__logo-img,
  .hud__logo img { width: 125px; }
  .bud { width: min(48vh, 440px); }
  .q__options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .opt { min-height: 74px; }
  .sub { font-size: 16px; }
  .btn--primary { width: auto; min-width: 16rem; }
}

@media (min-width: 1100px) {
  .display { font-size: 3.4rem; }
  .q__title { font-size: 2rem; }
}

/* Short viewports (landscape phones) — reclaim vertical space. */
@media (max-height: 620px) {
  .display { font-size: clamp(1.6rem, 6vw, 2rem); }
  .sub { margin-bottom: 20px; }
  .opt { min-height: 50px; padding: 10px 16px; }
  .score__num { font-size: 3.6rem; }
  .bud { opacity: 0 !important; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .screen.is-entering > * { opacity: 1; transform: none; }
}