/* Quietening waitlist site — no dependencies.
   Palette: cold fog (restless) warming to sunlit cream (calm), founder pick 2026-07-21.
   Watercolour style: loose washes + fine ink line, founder direction 2026-07-21.
   --calmf runs 0→1 one step per pop; data-calm bands 0-3 drive the expressions. */

:root {
  --fog-1: #cdd0db;      /* hero bg edge, restless */
  --fog-2: #dfe1e9;      /* hero bg centre, restless */
  --cream-1: #efe4cc;    /* hero bg edge, calm */
  --cream-2: #faf4e5;    /* hero bg centre, calm */
  --ink: #3b3a4e;        /* ink line + main text, cold state */
  --ink-warm: #4a4438;   /* ink once calm */
  --dim: #767b90;        /* secondary text */
  --accent: #b97f36;     /* amber: lockup flanks, ring, eye, button */
  --glow: #e8b96d;       /* relief pulse / head glow */
  --page: #f7f4ec;       /* footer ground */
  --skin-cold: #dcdae4;  /* wash: skin, restless */
  --skin-warm: #f0dfc8;  /* wash: skin, calm */
  --hair-cold: #a9a7bd;  /* wash: hair, restless */
  --hair-warm: #b99c78;  /* wash: hair, calm */
  --blush-warm: #dfa08c;
  --chip-0: #aebede;     /* thought bubbles: blue / mauve / sage */
  --chip-1: #cbb3d4;
  --chip-2: #bfcaa4;
}

/* self-hosted display face (no third-party font requests) */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;          /* variable file */
  font-display: swap;
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-italic.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--page);
  color: var(--ink);
  line-height: 1.6;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- hero: lockup / scene / hint / signup, all on one screen ---- */

#hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.6rem 1.2rem 1.8rem;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 35%, var(--fog-2), var(--fog-1) 78%);
}

#hero .dawn {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 35%, var(--cream-2), var(--cream-1) 78%);
  opacity: var(--calmf, 0);
  transition: opacity 1.2s ease;
}

.lockup {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.05rem;
  font-weight: 300;
  text-align: center;
}
.lockup .pre, .lockup .post {
  color: var(--accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  letter-spacing: 0.3em;
  text-transform: lowercase;
}
.lockup .pre, .lockup .post { margin-left: 0.3em; } /* optically recentre letterspaced lines */
.lockup .name {
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 7.8vw, 3.9rem);
  letter-spacing: 0.06em;
  margin-left: 0.06em;
  line-height: 1.05;
  transition: color 1.6s ease;
}
#hero[data-calm="9"] .lockup .name { color: var(--ink-warm); }

/* ---- scene: the painted heads ---- */

#stage {
  position: relative;
  /* fill whatever height is free between lockup and signup:
     100svh minus the ~420px the fixed pieces occupy, bounded sanely */
  width: clamp(240px, min(92vw, calc(100svh - 420px)), 800px);
  flex: 0 1 auto;
  margin-top: auto;                  /* centre between lockup and signup */
}
/* phones: the scene takes the full page width and the page scrolls;
   the watercolour's own fog margin is the breathing room */
@media (max-width: 560px) {
  #stage { width: 100vw; }
}

/* warm light rising behind the painting (the svg multiplies over it) */
#halo {
  position: absolute; inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
              rgba(244, 200, 122, 0.85), rgba(232, 185, 109, 0.3) 55%, transparent 75%);
  opacity: var(--calmf, 0);
  transition: opacity 1.2s ease;
  pointer-events: none;
}

#scene {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;          /* the paintings' white paper melts into the fog */
  -webkit-mask-image: radial-gradient(ellipse 60% 59% at 50% 47%, #000 55%, transparent 96%);
  mask-image: radial-gradient(ellipse 60% 59% at 50% 47%, #000 55%, transparent 96%);
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}

/* expressions crossfade one tone band per pop (founder ladder 2026-07-21):
   0 apathy start · 1 grief · 2 fear · 3 covert hostility · 4 anger ·
   5 antagonism · 6 boredom · 7 conservatism · 8 interest · 9 enthusiasm.
   visibility delays hiding until the 1s crossfade ends, so at most two of
   the ten portrait layers are ever composited. */

.expression {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
#hero[data-calm="0"] .expression[data-tone="0"],
#hero[data-calm="1"] .expression[data-tone="1"],
#hero[data-calm="2"] .expression[data-tone="2"],
#hero[data-calm="3"] .expression[data-tone="3"],
#hero[data-calm="4"] .expression[data-tone="4"],
#hero[data-calm="5"] .expression[data-tone="5"],
#hero[data-calm="6"] .expression[data-tone="6"],
#hero[data-calm="7"] .expression[data-tone="7"],
#hero[data-calm="8"] .expression[data-tone="8"],
#hero[data-calm="9"] .expression[data-tone="9"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease;
}

/* thoughts */

.thought { cursor: pointer; outline: none; }
.thought .hit { touch-action: none; }
.thought:focus-visible .hit { stroke: var(--dim); stroke-dasharray: 4 7; stroke-width: 2; }
.thought.cleared {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease 0.3s;   /* chip pops via JS; rest follows */
}

.chip { fill-opacity: 0.55; }
.thought[data-i="0"] .chip { fill: var(--chip-0); }
.thought[data-i="1"] .chip { fill: var(--chip-1); }
.thought[data-i="2"] .chip { fill: var(--chip-2); }
.thought.active .chip { fill-opacity: 0.75; }

.thought, .thought g, .thought circle, .thought rect, .thought path {
  transform-box: fill-box;
  transform-origin: center;
}

/* invite the hand: thoughts swell under the cursor (hover devices) and
   while selected/held (every device — this is what tapping triggers).
   Plain transform, not the standalone scale property: WebKit doesn't
   reliably apply the individual properties to SVG elements. */
.thought .chip, .thought .pic { transition: transform 0.35s ease; }
.thought .hold-ring { transform: rotate(-90deg); transition: transform 0.35s ease; }
.thought.active .chip, .thought.active .pic { transform: scale(1.5); }
.thought.active .hold-ring { transform: rotate(-90deg) scale(1.5); }
@media (hover: hover) {
  .thought:hover .chip, .thought:hover .pic,
  .thought:focus-visible .chip, .thought:focus-visible .pic { transform: scale(1.5); }
  .thought:hover .hold-ring,
  .thought:focus-visible .hold-ring { transform: rotate(-90deg) scale(1.5); }
}

.drift-x { animation: drift-x var(--dx, 9s) ease-in-out infinite alternate; }
.drift-y { animation: drift-y var(--dy, 7s) ease-in-out infinite alternate; }
.art     { animation: breathe 3.2s ease-in-out infinite alternate; }
.pic image { opacity: 0.92; }        /* let a breath of the bubble tint through */

@keyframes drift-x { from { transform: translateX(-14px); } to { transform: translateX(16px); } }
@keyframes drift-y { from { transform: translateY(-11px); } to { transform: translateY(13px); } }
@keyframes breathe { from { transform: rotate(-2.2deg); } to { transform: rotate(2.4deg); } }

/* the stable-datum moment: one class, every animation freezes mid-frame */
#scene.paused * { animation-play-state: paused !important; }

#scene.reduced .drift-x, #scene.reduced .drift-y, #scene.reduced .art { animation: none; }

.thought.active .art { filter: drop-shadow(0 0 6px rgba(185, 127, 54, 0.55)); }

.is-hidden { display: none; }

/* the eye cursor while holding (desktop); touch gets the .eye-badge instead */
#hero.holding, #hero.holding .thought {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M2 16 C9 5 23 5 30 16 C23 27 9 27 2 16 Z" fill="white" stroke="%233b3a4e" stroke-width="2.2"/><circle cx="16" cy="16" r="4.6" fill="%23b97f36"/></svg>') 16 16, pointer;
}

/* hint */

#hint {
  position: relative; z-index: 2;
  margin: 0.7rem 0 0;
  min-height: 1.5em;
  text-align: center;
  color: var(--dim);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  transition: opacity 0.5s ease;
}

/* finale: an arrow under the hint, pointing at the form */
#down-arrow {
  margin: 0.1rem 0 auto;
  color: var(--accent);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(185, 127, 54, 0.35);
  opacity: 0;
  transition: opacity 0.9s ease 0.6s;
}
#hero.calm #down-arrow { opacity: 1; animation: bob 1.7s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/* ---- signup: always on screen at the foot of the hero ---- */

#signup {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 30rem;
  text-align: center;
  padding-top: 0.8rem;
}
.pitch { color: var(--dim); font-size: 0.92rem; }

#waitlist-form {
  margin-top: 0.9rem;
  display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
}
#waitlist-form input[type="email"] {
  flex: 1 1 14rem;
  padding: 0.75rem 1.1rem;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(59, 58, 78, 0.3);
  border-radius: 999px;
}
#waitlist-form input[type="email"]::placeholder { color: var(--dim); }
#waitlist-form input[type="email"]:focus-visible { outline: none; border-color: var(--accent); }
#waitlist-form button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--accent);
  border: none; border-radius: 999px; cursor: pointer;
}
#waitlist-form button:hover, #waitlist-form button:focus-visible { filter: brightness(1.06); }
#waitlist-form button:disabled { opacity: 0.6; cursor: default; }

/* once everything is seen through, the button breathes */
#hero.calm #waitlist-form button { animation: beckon 2.6s ease-in-out infinite; }
@keyframes beckon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 127, 54, 0.35); }
  50% { box-shadow: 0 0 24px 4px rgba(185, 127, 54, 0.45); }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

#form-note { margin-top: 0.5rem; min-height: 1.5em; font-size: 0.95rem; color: var(--accent); }
#form-note.error { color: #a04545; }

.privacy { margin-top: 0.5rem; font-size: 0.78rem; color: var(--dim); }

/* ---- footer ---- */

footer {
  max-width: 40rem; margin: 0 auto;
  padding: 2rem 1.5rem 2.5rem;
  text-align: center;
  font-size: 0.8rem; color: var(--dim);
}
footer p + p { margin-top: 0.8rem; }

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drift-x, .drift-y, .art { animation: none !important; }
  #hero.calm #waitlist-form button { animation: none; }
  #hero.calm #down-arrow { animation: none; }
  #hero .dawn, #head-glow, #scene, .lockup .name, #blush { transition-duration: 0.4s; }
}