/* Glass lab — shared page base and the waitlist that waits under the glass.
   Same tokens as the live soon page: canvas black, warm silver light. */

@font-face {
  font-family: "Clash Display";
  src: url("/fonts/clash-display.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #080808;
  --ink: #f5f5f5;
  --silver: #cfc8ba;
  --silver-hi: #efe9dd;
  --muted: #9a978f;
  --line: rgba(207, 200, 186, 0.22);
  --danger: #f2b8a8;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(24px, 5vw, 72px);
  color-scheme: dark;
}

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

html {
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 45% at 50% 42%, rgba(239, 233, 221, 0.045), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 118%, rgba(239, 233, 221, 0.03), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: "Switzer", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* While the glass is intact nothing scrolls; after it breaks the page is a
   normal document again (a phone keyboard may need the room). */
body.is-sealed { overflow: hidden; }

/* Taps on the glass, the shards, the list: no double-tap zoom. Pinch stays. */
body { touch-action: manipulation; }

::selection { background: rgba(239, 233, 221, 0.22); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- layers: stage (1) < glass (10) < lab bar (20) ---- */

.brand {
  position: absolute;
  z-index: 2;
  top: clamp(22px, 4vh, 40px);
  /* Inside the live page's centred 1440px frame, as on veylen.ai. */
  left: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  margin: 0;
}
.brand img { height: 32px; width: auto; display: block; }

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--gutter) + 48px) var(--gutter) calc(var(--gutter) + 40px);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---- the list ---- */

.signup {
  width: 100%;
  max-width: 560px;
  transition:
    transform 1100ms var(--ease),
    filter 1100ms var(--ease);
}
.signup:focus { outline: none; }

/* Under intact glass the form sits a touch deeper; it rises as the pane goes. */
body.is-sealed .signup {
  transform: translateY(10px) scale(0.985);
  filter: brightness(0.82);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid rgba(207, 200, 186, 0.3);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: clamp(20px, 3.5vh, 32px);
}
.chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--silver-hi);
  box-shadow: 0 0 8px 1px rgba(239, 233, 221, 0.5);
}

.signup-title {
  font-family: "Clash Display", "Switzer", sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.signup-lede {
  margin-top: 16px;
  max-width: 44ch;
  color: var(--silver);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
}

.signup-form { margin-top: clamp(28px, 4.5vh, 40px); }

.signup-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.signup-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(245, 245, 245, 0.025);
  transition: border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease);
}
.signup-row:focus-within {
  border-color: rgba(239, 233, 221, 0.55);
  background: rgba(245, 245, 245, 0.045);
  box-shadow: 0 0 0 4px rgba(239, 233, 221, 0.06);
}
.signup-row.is-invalid { border-color: rgba(242, 184, 168, 0.7); }

.signup-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming the page on focus */
}
.signup-input::placeholder { color: #6f6d68; }
.signup-input:focus { outline: none; }
.signup-row:has(.signup-input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

.signup-submit {
  flex: none;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--silver-hi);
  color: #0b0b0b;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease), opacity 200ms var(--ease);
}
.signup-submit:hover { background: #fffaf0; }
.signup-submit:active { transform: scale(0.98); }
.signup-submit[disabled] { opacity: 0.6; cursor: progress; }

.signup-note {
  margin-top: 14px;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--muted);
}
.signup-note a {
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: rgba(207, 200, 186, 0.45);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.signup-note a:hover { color: var(--ink); text-decoration-color: currentColor; }
.signup-lede { text-wrap: balance; }
.signup-note, .signup-status { text-wrap: pretty; }

.signup-status {
  margin-top: 10px;
  padding-left: 20px;
  min-height: 1.6em;
  font-size: 0.9rem;
  color: var(--danger);
}
.signup-status:empty { margin-top: 0; min-height: 0; } /* stays rendered: a live region */

/* Honeypot — off-screen for people, present for bots. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- joined: the done block ----
   waitlist.js plays the moment (the address sealed into an envelope of the
   page's material with a few pieces of the broken glass, sent off) on two
   canvases over the page, then this is what
   stays: the headline and a receipt — the envelope mark, "Confirmation sent
   to", the address. The receipt is aria-hidden; a visually hidden sentence
   carries the whole message for screen readers. */
.signup-done { outline: none; }
.signup-done[hidden] { display: none; }
.signup.is-done > :not(.signup-done) { display: none; }
/* While the moment plays, the form stays where it was (fading, inert) and the
   done block waits over it at the top of the section, so nothing moves when
   they swap. waitlist.js fades the done block's parts in. */
.signup.is-sending { position: relative; }
.signup.is-sending > .signup-done { position: absolute; top: 0; left: 0; right: 0; }
.signup.is-sending > .signup-done > * { opacity: 0; }
.signup-done-title {
  font-family: "Clash Display", "Switzer", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height: 1.05;
  text-wrap: balance;
}

.signup-sent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  margin-top: clamp(26px, 4.2vh, 38px);
}
.signup-sent-mark {
  grid-row: 1 / span 2;
  display: block;
  width: 56px;
  height: 40px;
  overflow: visible;
}
.signup-sent-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}
/* A long address breaks only where it is wider than the line. */
.signup-sent-to {
  margin-top: 3px;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The envelope mark: the slip that left, small and at rest. Smoked glass by
   default; each material tints it. The SVG carries the same defaults as
   attributes (for pages without this sheet); set colour and opacity apart
   here, or an attribute's opacity would multiply into a colour's alpha. */
.ssm-edge { fill: #cfc8ba; fill-opacity: 0.16; }
.ssm-face { stroke-width: 1; }
.ssm-flap { fill: none; stroke: #efe9dd; stroke-opacity: 0.8; stroke-width: 1; }
.ssm-frost, .ssm-craze, .ssm-crack, .ssm-fork { display: none; fill: none; stroke-width: 0.75; stroke-linecap: round; stroke-linejoin: round; }
.ssm-frost { stroke: #eef2f5; stroke-opacity: 0.4; stroke-width: 0.5; }
.ssm-craze { stroke: #efe9dd; stroke-opacity: 0.12; }
.ssm-crack { stroke: #efe9dd; stroke-opacity: 0.8; stroke-width: 1; }
.ssm-fork { stroke: #efe9dd; stroke-opacity: 0.42; stroke-width: 0.7; }
/* Annealed: the fold is a crack (slight kinks, two forks a side), as it ran
   in on the slip. */
body[data-variant="annealed"] .ssm-flap { display: none; }
body[data-variant="annealed"] .ssm-crack,
body[data-variant="annealed"] .ssm-fork { display: inline; }
body[data-variant="frosted"] .ssm-f0 { stop-opacity: 0.34; }
body[data-variant="frosted"] .ssm-f1 { stop-opacity: 0.2; }
body[data-variant="frosted"] .ssm-f2 { stop-opacity: 0.26; }
body[data-variant="frosted"] .ssm-r0 { stop-opacity: 0.6; }
body[data-variant="tempered"] .ssm-craze { display: inline; }
body[data-variant="frost"] .ssm-frost { display: inline; }
body[data-variant="frost"] .ssm-f0,
body[data-variant="frost"] .ssm-f2,
body[data-variant="frost"] .ssm-r0 { stop-color: #eef2f5; }
body[data-variant="frost"] .ssm-flap { stroke: #eef2f5; }

/* The moment's two canvases (waitlist.js sets the same inline, for pages
   without this sheet): the envelope's front over the glass left on screen
   (#glass-debris, 15), its back under it, so the pieces that go in pass
   between the two; both under the bar (20). */
.signup-flight { position: fixed; left: 0; top: 0; z-index: 16; pointer-events: none; }
.signup-flight-back { z-index: 5; }

/* No flight (reduced motion, forced colours, a hidden tab): the resting
   state fades in, nothing moves. */
.signup.is-arriving > .signup-done { animation: signup-arrive 320ms ease-out both; }
@keyframes signup-arrive { from { opacity: 0; } }

@media (max-width: 520px) {
  .signup-row { flex-direction: column; border-radius: 22px; }
  .signup-submit { padding: 14px 22px; }
  .signup-note, .signup-status { padding-left: 4px; }
}

/* ---- lab bar: which experiment, replay, siblings ---- */

.lab-embed .lab-bar { display: none; }

.lab-bar {
  position: fixed;
  z-index: 20;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(207, 200, 186, 0.18);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.lab-bar .lab-tag {
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.64rem;
}
.lab-bar a,
.lab-bar button {
  white-space: nowrap;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--silver);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.lab-bar a:hover,
.lab-bar button:hover { background: rgba(239, 233, 221, 0.08); color: var(--ink); }
.lab-bar a[aria-current="page"] { background: rgba(239, 233, 221, 0.12); color: var(--ink); }

.lab-bar .lab-short { display: none; }

/* Phones and short screens: the current variant only; "Lab" leads to the others. */
@media (max-width: 640px), (max-height: 480px) {
  .lab-bar .lab-long { display: none; }
  .lab-bar .lab-short { display: inline; }
  .lab-bar .lab-variant:not([aria-current]) { display: none; }
}

/* ---- site bar (production pages): Sound · Privacy — a quiet corner, not a toolbar ---- */

.site-bar {
  gap: 2px;
  padding: 3px;
  border-color: rgba(207, 200, 186, 0.1);
  /* Near-opaque: over the black pane it looks the same as a lighter veil, but
     the frost variant's snow and bright shards pass under this corner, and
     the small muted text must keep 4.5:1 against them (at 0.55 it fell to
     about 2.2:1 over the snow). */
  background: rgba(8, 8, 8, 0.86);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.site-bar a,
.site-bar button {
  padding: 4px 10px;
  color: var(--muted);
}
.site-bar a:hover,
.site-bar button:hover { background: rgba(239, 233, 221, 0.06); color: var(--silver-hi); }

/* Short landscape screens: leave room under the list for the lab bar. */
@media (max-height: 480px) {
  .stage { padding-bottom: 88px; }
  /* The site bar moves to the empty top-right corner: at the bottom it sat on
     "Join the list" after a tap revealed the form (the form is taller than
     the screen there). */
  .site-bar { top: max(14px, env(safe-area-inset-top)); bottom: auto; }
}

/* High contrast: the logo is white on transparent — give it its own ground. */
@media (forced-colors: active) {
  .brand img { forced-color-adjust: none; background: #080808; border-radius: 6px; padding: 3px; }
  /* The envelope mark as plain lines in the text colour (over any variant's tint). */
  body[data-variant] .signup-sent-mark .ssm-edge,
  body[data-variant] .signup-sent-mark .ssm-frost,
  body[data-variant] .signup-sent-mark .ssm-craze,
  body[data-variant] .signup-sent-mark .ssm-crack,
  body[data-variant] .signup-sent-mark .ssm-fork,
  body .signup-sent-mark .ssm-edge { display: none; }
  body .signup-sent-mark .ssm-face { fill: none; stroke: CanvasText; }
  body[data-variant] .signup-sent-mark .ssm-flap,
  body .signup-sent-mark .ssm-flap { display: inline; stroke: CanvasText; stroke-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .signup { transition: none; }
}