/* ============================================================
   Corie — Waitlist Landing
   Tokens + components per design_handoff_corie/README.md
   Warm palette only. EB Garamond + Space Mono only.
   ============================================================ */

:root {
  /* Color tokens (README §Design Tokens) */
  --maroon: #B83224;
  --maroon-deep: #8E2419;
  --maroon-wash: #F6E3DC;
  --clay: #D9876A;
  --ink: #2C2A28;
  --stone: #6F6A63;
  --cream: #FBF8F3;
  --paper: #FFFFFF;
  --line: #EBE4D9;

  /* Layout */
  --gutter: 32px;
  --maxw: 1040px;

  /* Radii */
  --radius-card: 20px;
  --radius-input: 14px;
  --radius-bubble: 16px;
  --radius-pill: 999px;

  /* Type families */
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

.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;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- Type utilities ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 68px);
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
}
.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(25px, 3vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 16px;
}
.lede {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.45;
  margin: 0 0 20px;
}
.meta, .helper {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--stone);
  font-weight: 400;
  margin: 0;
}
.q-label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  display: block;
  margin: 0 0 12px;
  padding: 0;
}

/* ---------- Brand bar ---------- */
.brand-bar {
  height: 8px;
  background: var(--maroon);
}

/* ---------- Masthead ----------
   Lives in the DOM after the hero. Sticky-pinned so it stays at top
   for the rest of the page once the hero scroll completes. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-block: 10px;
}
.masthead .meta {
  color: var(--ink);
}

/* ---------- Logo lockup ----------
   Single inline SVG (assets/logo/corie-logo.svg). The face pixels + "Corie"
   wordmark live in one viewBox, so the proportions are baked in and the
   lockup is a single piece. The SVG text inherits page font + currentColor. */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  color: var(--maroon);
  text-decoration: none;
}
.logo-svg {
  height: 26px;
  width: auto;
  display: block;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------- Sections + eyebrow ---------- */
.section {
  margin-top: clamp(40px, 6vw, 64px);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.eyebrow-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--maroon);
  flex-shrink: 0;
}
.eyebrow-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  flex-shrink: 0;
}
/* Variant: signup eyebrow text is Space Mono uppercase maroon */
.eyebrow--mono .eyebrow-h {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 400;
  color: var(--maroon);
}
.eyebrow-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- Hero (scroll-pinned stage) ----------
   The section is tall (400vh) and the inner .hero-pin sticks
   to the viewport for the full scroll. JS reads scroll progress
   and swaps face + line at each beat boundary.
*/
.hero {
  position: relative;
  height: 340vh;     /* 6 beats × 40vh of scroll each */
  padding: 0;
}
.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.hero-stage {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.hero-face-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-face {
  width: clamp(160px, 24vw, 300px);
  height: clamp(160px, 24vw, 300px);
  display: block;
}
.hero-text-col {
  min-width: 0;
}
/* Cross-fade between beats. JS toggles .swap during the swap. */
.typer {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 60px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  min-height: 1.1em;
  white-space: pre-line;   /* render \n in beat text as a line break */
  transition: opacity .22s ease, transform .22s ease;
}
.typer.swap {
  opacity: 0;
  transform: translateY(6px);
}
.typer-line { display: inline; }

/* dot-pulse keyframes are reused by the chat-form typing bubble. */
@keyframes dot-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Subtle scroll hint on beat 0 — gently bobs to invite scroll. */
.hero-pin.hint .hero-face { animation: face-bob 2.6s ease-in-out infinite; }
@keyframes face-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}


/* ---------- About (2-col: image | text) ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.about-image {
  aspect-ratio: 5 / 4;
  background: var(--maroon-wash);
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}
/* Network: stage fills the whole washed rectangle. */
.net-stage {
  position: absolute;
  inset: 0;
}
.net-center,
.net-node {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
}
.net-center {
  left: 50%;
  top: 50%;
  width: 22%;
}
/* Each node is placed via its own --x / --y (set inline) so expressions
   sit in different parts of the rectangle. Opacity is driven by
   setupAboutAnimation on a rAF loop (sequential fade in, hold, fade out). */
.net-node {
  left: var(--x);
  top: var(--y);
  width: 11%;
  opacity: 0;
}
.about-text > :first-child { margin-top: 0; }
.about-text > :last-child  { margin-bottom: 0; }
.about-text p { font-size: 18px; line-height: 1.55; margin: 0; }
.about-text p + p { margin-top: 14px; }
/* All paragraphs in the About section read at one consistent size,
   even the first one (.lede class is overridden here). */
.about-text .lede { font-size: 18px; line-height: 1.55; }

/* ---------- Card ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 56px);
}

/* ---------- Moments (scroll-revealed conversation scenes) ----------
   Each moment: centered caption → dotted connector → card with bubbles
   that slide in from the side as the user scrolls past. */
.moments {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 80px);
}
.moment {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.moment-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--ink);
  text-align: center;
  margin: 0;
}
.moment-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 0 18px;
}
.moment-connector span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--maroon);
  opacity: 0.55;
}
.moment-card {
  width: 100%;
  max-width: 760px;
  min-height: 140px; /* keep the card shape visible while bubbles are pending */
  overflow: hidden;  /* clip slide-in bubbles before they reach their spot */
}
.thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-bubble);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
}
.bubble.you {
  background: var(--maroon);
  color: var(--cream);
  margin-left: auto;
  border-bottom-right-radius: 6px;
}
.bubble.corie {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

/* ---------- Scroll-reveal animations ---------- */
.reveal-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-right, .slide-in-left {
  opacity: 0;
  transition: opacity .55s ease-out, transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.slide-in-right { transform: translateX(75%); }
.slide-in-left  { transform: translateX(-75%); }
.slide-in-right.visible,
.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}
/* Each bubble is triggered by its own scroll stage now (see setupMomentReveal
   in script.js), so no CSS stagger needed. */

/* ---------- Signup (chat-style form) ---------- */
.signup-intro {
  max-width: 640px;
  margin: 0 auto 20px;
  text-align: center;
}
.subtext {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0;
}

.chat-form {
  max-width: 640px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
}
.chat-form .bubble-row { margin: 0; }
.chat-form .you-row { justify-content: flex-end; }
.chat-form .bubble { max-width: 78%; }

/* Editable "you" bubble (input) — sits inside .input-form with a send button */
.input-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 80%;
}
.bubble-input {
  appearance: none;
  background: var(--maroon);
  color: var(--cream);
  border: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  padding: 12px 16px;
  border-radius: var(--radius-bubble);
  border-bottom-right-radius: 6px;
  outline: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  caret-color: var(--cream);
  transition: box-shadow .15s ease, transform .25s ease;
}
.send-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--cream);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease;
  font-family: var(--serif);
}
.send-btn:hover  { background: #a82d20; }
.send-btn:active { background: var(--maroon-deep); }
.send-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--maroon-wash);
}
.bubble-input::placeholder { color: rgba(251, 248, 243, 0.55); }
.bubble-input:focus { box-shadow: 0 0 0 3px var(--maroon-wash); }
.bubble-input.invalid { animation: shake .35s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Typing-dots bubble (Corie is thinking) */
.bubble.corie.typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  padding: 14px 18px;
}
.bubble.corie.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stone);
  opacity: 0.4;
  animation: dot-pulse 1.35s ease-in-out infinite;
}
.bubble.corie.typing span:nth-child(2) { animation-delay: 0.18s; }
.bubble.corie.typing span:nth-child(3) { animation-delay: 0.36s; }

/* Chip-tray (inline multi-select inside the chat) */
.chip-tray-row { display: flex; }
.chip-tray {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-left: 36px; /* aligns with corie bubbles past the avatar gutter */
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  line-height: 1.2;
}
.chip:hover { border-color: var(--maroon); }
.chip:focus-visible {
  outline: none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--maroon-wash);
}
.chip[aria-checked="true"] {
  background: var(--maroon);
  color: var(--cream);
  border-color: var(--maroon);
}

.btn-primary {
  display: inline-block;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-input);
  transition: background .12s ease;
}
.btn-primary:hover  { background: #a82d20; }
.btn-primary:active { background: var(--maroon-deep); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--maroon-wash);
}
.chip-done { align-self: flex-end; }

/* Inline correction text (placed under the bad input row) */
.inline-error {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--maroon);
  margin: -6px 4px 0;
  text-align: right;
}
.chip-tray-row + .inline-error { text-align: left; margin-left: 40px; }

/* Final closing line in the chat */
.chat-done {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.chat-done img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.chat-done p {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 24px);
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: clamp(48px, 6vw, 72px);
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.footer-inner { text-align: center; }
.footer-face {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
}
.footer-inner p {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin: 0;
  line-height: 1.65;
}
.footer-sig {
  color: var(--stone);
  font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  /* Hero stacks vertically and centers: big face on top, line below. */
  .hero-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    text-align: center;
  }
  .hero-face-col { justify-content: center; }
  .hero-face {
    width: clamp(180px, 48vw, 260px);
    height: clamp(180px, 48vw, 260px);
  }
  .typer { font-size: clamp(32px, 8vw, 44px); }
}

@media (max-width: 720px) {
  /* About: stack image above text on narrow screens */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-image { aspect-ratio: 5 / 4; }
  /* Hide the desktop-only extra expressions on mobile */
  .net-node[data-extra] { display: none; }

  /* Moments: a bit less slide so bubbles don't have to travel as far on narrow screens */
  .slide-in-right { transform: translateX(50%); }
  .slide-in-left  { transform: translateX(-50%); }
  .moments { gap: 80px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .masthead-row { min-height: 56px; }
  .logo-lockup { font-size: 22px; }
  .masthead .meta { font-size: 10.5px; letter-spacing: .12em; }
  .bubble { max-width: 92%; font-size: 17px; }
  .eyebrow { gap: 12px; }
  .chat-form .bubble { max-width: 86%; }
  .input-form { max-width: 92%; }
  .chip-tray { margin-left: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Collapse the scroll-pinned hero — show all 5 lines stacked, no scroll cycle. */
  .hero      { height: auto; padding-top: clamp(48px, 9vw, 104px); padding-bottom: clamp(40px, 6vw, 88px); }
  .hero-pin  { position: static; height: auto; }
  .hero-pin.hint .hero-face { animation: none; }
  .typer     { transition: none; }
  .btn-primary, .chip { transition: none; }
  /* Scroll-reveal animations: show everything immediately, no slide/fade. */
  .reveal-fade, .slide-in-right, .slide-in-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Network nodes settle at full opacity, no cycling. */
  .net-node { animation: none !important; opacity: 1; filter: none; }
}