/* =========================================================
   ZuZu — waitlist landing
   Warm, textured, human. Grounded in the brand assets:
   pastel grain-gradient + near-black ink + the pinwheel mark.
   ========================================================= */

:root {
  --ink:        #14110f;   /* near-black, warm — text/foreground */
  --ink-soft:   #4a423c;
  --ink-faint:  #6f655c;   /* darkened from #8c8077 to clear WCAG AA (4.5:1) on cream */
  --cream:      #f7f3ee;   /* warm off-white canvas — background */
  --cream-deep: #efe8df;   /* raised surface (seg track, tags) */
  --line:       #e3d9cd;
  --lilac:      #c9c2ef;
  --blush:      #f3cdda;
  --mint:       #cfe7d8;
  --periwinkle: #6a5cff;   /* accent (light). Overridden to sage green in dark per brand guideline */
  --pink:       #d65f97;   /* muted hot pink — button hover (tuned to the lavender/blush gradient) */

  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Themeable surfaces (overridden in dark) */
  --dash:           #cabca7;                  /* blueprint dashed borders */
  --surface:        rgba(255, 255, 255, .72); /* cards/steps/perks */
  --field-bg:       #ffffff;                  /* solid input background */
  --panel-border:   #ffffff;                  /* waitlist panel edge */
  --topbar-bg:      rgba(247, 243, 238, .5);
  --topbar-bg-stuck:rgba(247, 243, 238, .68);
  --topbar-border:  rgba(20, 17, 15, .08);
  --footer-bg:      #14110f;
  --footer-fg:      #f7f3ee;
  --grain-blend:    multiply;
  --grain-opacity:  .09;
  --wash-opacity:   1;

  --radius:     16px;
  --radius-lg:  26px;
  --maxw:       1080px;
  --ease:       cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  --ink:        #f3eee6;   /* warm off-white — now the foreground */
  --ink-soft:   #b6aca1;
  --ink-faint:  #897f74;
  --cream:      #0b0b08;   /* near-black #090905-ish from the guideline */
  --cream-deep: #1b1b15;
  --line:       #2f2e26;
  --periwinkle: #7f9d6e;   /* sage green — the dark-mode primary from the guideline */

  --dash:           #463f34;
  --surface:        rgba(255, 255, 255, .055);
  --field-bg:       #211c17;
  --panel-border:   rgba(255, 255, 255, .10);
  --topbar-bg:      rgba(11, 11, 8, .42);
  --topbar-bg-stuck:rgba(11, 11, 8, .62);
  --topbar-border:  rgba(255, 255, 255, .1);
  --footer-bg:      #100d0a;
  --footer-fg:      #f3eee6;
  --grain-blend:    overlay;
  --grain-opacity:  .07;
  --wash-opacity:   .55;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;     /* stop the rubber-band bounce that revealed the bg above the navbar */
  /* Brand gradient on the ROOT canvas — always painted behind everything, no
     stacking-context surprises. LIGHT (fan): lavender top-left -> cream. */
  background:
    radial-gradient(72% 66% at 6% 2%, rgba(170,177,226,.5) 0%, rgba(170,177,226,0) 60%),
    linear-gradient(133deg, #B6BAE2 0%, #D0C2E0 24%, #ECCFDF 48%, #F2E7EC 72%, #F6F2F0 100%);
  background-attachment: fixed;
}
/* DARK (artist): warm olive/brown glow -> near-black. */
html[data-theme="dark"] {
  background:
    radial-gradient(74% 64% at 16% 0%, rgba(86,100,78,.5) 0%, rgba(86,100,78,0) 60%),
    radial-gradient(60% 55% at 97% 4%, rgba(92,70,48,.46) 0%, rgba(92,70,48,0) 58%),
    linear-gradient(155deg, #313630 0%, #302722 28%, #2b1920 54%, #16120d 82%, #0b0b08 100%);
  background-attachment: fixed;
}

body {
  margin: 0;
  background: transparent;   /* let the root-canvas gradient show through */
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  font-size: clamp(16px, 1.05vw + 13px, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

em { font-style: italic; }

/* Skip link — visually hidden until focused, so keyboard users can bypass the header. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -52px;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: .8rem;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--cream); outline-offset: 2px; }

/* ---------- Atmosphere: brand gradient + pixel mosaic + grain ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Pixel-mosaic overlay (exact brand stops, downsampled, nearest-neighbor) for
   the retro dither texture. Cheap — no blur, blend, or large raster. */
.mosaic {
  position: absolute;
  inset: 0;
  background: url("assets/grad-light.png") center / cover no-repeat;
  image-rendering: pixelated;
  opacity: .3;
}
:root[data-theme="dark"] .mosaic {
  background-image: url("assets/grad-dark.png");
  opacity: .35;
}

/* Static tiled noise — replaces the costly live feTurbulence filter. */
.grain {
  position: absolute;
  inset: 0;
  background: url("assets/noise.png") repeat;
  background-size: 180px 180px;
  opacity: var(--grain-opacity);
}

/* ---------- Layout primitives ---------- */
section {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* ---------- Sticky top bar (holds the persistent role switch) ---------- */
/* Transparent sticky wrapper — the visible bar is the floating island inside. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px clamp(12px, 3vw, 24px) 0;
  background: transparent;
}
/* The floating, frosted, rounded island. */
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 9px 12px 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--topbar-bg);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--topbar-border);
  border-radius: 22px;
  box-shadow: 0 14px 34px -20px rgba(20, 17, 15, .5);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.topbar.is-stuck .topbar__inner {
  background: var(--topbar-bg-stuck);
  box-shadow: 0 18px 42px -20px rgba(20, 17, 15, .6);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand__mark { width: 28px; height: 28px; }
:root[data-theme="dark"] .brand__mark { filter: invert(1); }
.brand__word { font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em; }

.topbar__right { display: flex; align-items: center; gap: 14px; }
.rolebar__label { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); }
.topbar__cta {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.topbar__cta:hover { background: var(--ink); color: var(--cream); }

/* Anchored sections clear the sticky header */
.how, .waitlist { scroll-margin-top: 88px; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 5.5vw, 64px); padding-bottom: clamp(34px, 6vw, 72px); }
.eyebrow {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 22px;
}
.hero__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 26px;
}
.hero__title em { font-weight: 500; }
/* Overlap the two title variants in one grid cell so the block is always the
   height of the taller one — keeps everything below from shifting on toggle. */
.hero__title { display: grid; }
.hero__title > .r-artist, .hero__title > .r-fan { grid-area: 1 / 1; }
/* Both ledes share one grid cell → the wrapper is the height of the taller
   variant, so the email form below stays in a fixed position across views. */
.hero__ledes { display: grid; margin: 0 0 34px; }
.hero__lede {
  grid-area: 1 / 1;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--ink-soft);
  margin: 0;
}
.hero__lede strong { color: var(--ink); font-weight: 600; }

/* ---------- Waitlist form ---------- */
.waitlist-form { max-width: 540px; }
.waitlist-form--main { max-width: none; }

.field {
  display: flex;
  gap: 8px;
  background: var(--field-bg);
  border: 1.5px dashed var(--dash);
  border-radius: 999px;
  padding: 7px 7px 7px 8px;
  box-shadow: 0 10px 34px -22px rgba(20,17,15,.55);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field:focus-within { border-style: solid; border-color: var(--ink); box-shadow: 0 14px 40px -22px rgba(20,17,15,.65); outline: 2px solid var(--ink); outline-offset: 2px; }
.field__input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 10px 14px;
  min-width: 0;
}
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--ink-faint); }

.btn {
  border: 0;
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-weight: 600;
  font-size: .96rem;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), background .25s var(--ease);
}
.btn:hover { background: var(--pink); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: progress; }

.btn--ghost {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 13px 28px;
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.waitlist-form__note { font-family: var(--mono); font-size: .74rem; line-height: 1.5; color: var(--ink-faint); margin: 14px 4px 0; }
.waitlist-form__status { font-size: .92rem; margin: 12px 4px 0; min-height: 1.2em; font-weight: 500; }
.waitlist-form__status.is-error { color: #b23b3b; }
.waitlist-form__status.is-ok { color: #2f7d52; }

/* ---------- Role switch (segmented toggle) ---------- */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream-deep);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.seg__btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.seg__btn[aria-pressed="true"] { color: var(--cream); }
.seg__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--ink);
  border-radius: 999px;
  transition: transform .3s var(--ease);
}
body[data-role="artist"] .seg__pill { transform: translateX(100%); }

/* Role-aware content visibility */
body[data-role="artist"] .r-fan,
body[data-role="fan"] .r-artist { display: none; }

/* In the hero, keep the inactive variant in the layout (hidden, not removed)
   so the headline + lede blocks stay the height of the taller variant and the
   email form never shifts between views. */
body[data-role="artist"] .hero__title .r-fan,
body[data-role="fan"]    .hero__title .r-artist,
body[data-role="artist"] .hero__ledes .r-fan,
body[data-role="fan"]    .hero__ledes .r-artist {
  display: block;
  visibility: hidden;
}

/* Smooth artist/fan crossfade via the View Transitions API.
   The whole page is captured as the default 'root' group: unchanged areas are
   identical across both snapshots (so they read as static) while the copy that
   changes visibly crossfades. The toggle pills get their own names so they keep
   sliding rather than dissolving. */
@supports (view-transition-name: zuzu) {
  .topbar .seg__pill { view-transition-name: vt-pill; }

  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
  ::view-transition-group(vt-pill) {
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
}

/* ---------- Problem ---------- */
.problem { padding-block: clamp(30px, 5vw, 66px); }
.section-kicker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--periwinkle);
  margin: 0 0 18px;
}
/* Little blueprint tick before technical labels */
.section-kicker::before { content: "▚ "; opacity: .8; }
.problem__lead {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  max-width: 30ch;
  margin: 0 0 8px;
}
.pullquote {
  margin: 0;
  max-width: 44ch;
  padding-left: 26px;
  border-left: 2px dashed var(--ink);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink-soft);
}
.pullquote strong { color: var(--ink); font-weight: 600; }

/* ---------- Shared section heads ---------- */
.section-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  max-width: 18ch;
}
.section-sub { color: var(--ink-soft); max-width: 46ch; margin: 0 0 46px; font-size: 1.08rem; }

/* ---------- Problem stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 44px 0;
}
.stat {
  border-top: 2px dashed var(--ink);
  padding-top: 16px;
}
.stat__num {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.stat__cap { font-family: var(--mono); color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.stat__cap strong { color: var(--ink); font-weight: 600; }

/* ---------- Fan perks ---------- */
.perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0 36px;
}
.perk {
  background: var(--surface);
  border: 1.5px dashed var(--dash);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 30px);
}
.perk__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -.01em;
  margin: 0 0 9px;
}
.perk p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------- How it works ---------- */
.how { padding-block: clamp(32px, 5vw, 70px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 38px);
  align-items: start;
  background: var(--surface);
  border: 1.5px dashed var(--dash);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}
.step__n {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--periwinkle);
  line-height: 1;
}
.step__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.step__body p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.step__body strong { color: var(--ink); font-weight: 600; }

/* ---------- Differentiation ---------- */
.versus { padding-block: clamp(30px, 4.5vw, 62px); }
.versus__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 760px; }
.versus__list li {
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.versus__name { color: var(--ink); font-weight: 600; }
.versus__list strong { color: var(--periwinkle); font-weight: 600; }
.versus__win {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 0;
}
.versus__win .versus__name { color: var(--periwinkle); }

/* ---------- Waitlist section ---------- */
.waitlist { padding-block: clamp(14px, 2vw, 28px) clamp(52px, 7vw, 92px); }
.waitlist__inner {
  /* Self-contained (more opaque) so it keeps its vibrancy even though the page
     background behind it is now softer. */
  background:
    linear-gradient(135deg, rgba(201,194,239,.85), rgba(243,205,218,.78) 48%, rgba(207,231,216,.82)),
    #efe9f2;
  border: 1.5px dashed var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 40px 90px -60px rgba(20,17,15,.6);
}
:root[data-theme="dark"] .waitlist__inner {
  background: linear-gradient(135deg, rgba(155,143,255,.16), rgba(243,205,218,.08) 48%, rgba(207,231,216,.10));
}
.waitlist__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
.waitlist__sub { color: var(--ink-soft); max-width: 42ch; margin: 0 0 32px; }
.waitlist .field { box-shadow: 0 14px 40px -26px rgba(20,17,15,.7); }
.waitlist .field { max-width: 520px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  text-align: center;
  padding: clamp(44px, 6vw, 70px) 20px;
}
.footer__brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.25rem; margin-bottom: 18px; }
.footer__mark { width: 26px; height: 26px; filter: invert(1); }
.footer__tagline {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  margin: 0 0 26px;
  color: var(--footer-fg);
}
.footer__legal { font-family: var(--mono); font-size: .72rem; letter-spacing: .02em; color: rgba(247,243,238,.55); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; gap: 26px; }
  .perks { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .pullquote { margin-left: 0; }
  .rolebar__label, .topbar__cta { display: none; }
  .seg__btn { padding: 8px 17px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .field { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .field__input { flex-basis: 100%; }
  .btn { flex: 1; }
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ====================================================================
   Centered layout — all content centered (both fan/artist views + themes).
   ==================================================================== */
.hero,
.problem,
.how,
.versus,
.waitlist__inner { text-align: center; }

/* constrained text blocks keep their max-width but now center horizontally */
.hero__lede,
.problem__lead,
.section-title,
.section-sub,
.waitlist__sub,
.versus__list,
.step__body p,
.pullquote { margin-inline: auto; }

/* hero: center the overlapped lede variants + the form + the input pill */
.hero__ledes { justify-items: center; }
.waitlist-form { margin-inline: auto; }
.field { margin-inline: auto; }

/* pullquote: drop the left blueprint border when centered */
.pullquote { border-left: 0; padding-left: 0; }

/* how-it-works: stack the step number above its body, centered */
.step { grid-template-columns: 1fr; justify-items: center; gap: 6px; }

/* stats + perks: center each cell's content */
.stat, .perk { text-align: center; }