/* Holding page (lane HOLD-1, round 7): the waitlist look, ported from c1cc76e src/style.css.
   Only the hero, the form, the bands and the footer are on this page; the other sections and their rules are dropped. */
:root {
  --depth-0: #0E1328; --depth-1: #161D3A; --panel: #1C2447; --mist: #2A3358; --line: #8A93C8;
  --gold: #F2C879; --amber: #E8A65A; --warm: #FFF4E2; --pres: #CFC7FF; --ember: #B9785A;
  --fg: #E9E4F2; --muted: #A9AECD;
  --field-line: #636b9c;
  --f-body: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--depth-0); scroll-behavior: smooth; }
body {
  margin: 0; color: var(--fg); font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  background: radial-gradient(120% 70% at 50% 0%, #1F2850 0%, var(--depth-1) 45%, var(--depth-0) 100%) var(--depth-1);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* The honeypot (site-wl's `website` field): off-screen, out of the tab order, never seen. */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--depth-0); padding: 8px 12px; z-index: 5; }
.skip:focus { top: 12px; }

h1, h2, h3 { font-weight: 300; letter-spacing: .01em; text-wrap: balance; margin: 0 0 .5em; }
h2 { font-size: clamp(26px, 4.2vw, 40px); color: var(--warm); }
h3 { font-size: 20px; color: var(--warm); font-weight: 400; }
p { margin: 0 0 1em; max-width: 62ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px;
  border-radius: 999px; text-decoration: none; font: inherit; font-size: 16px; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--gold); color: #1A1A2E; font-weight: 500; }
.btn-primary:hover { background: #F7D693; }
.btn-quiet { border-color: rgba(242, 200, 121, .5); color: var(--warm); background: rgba(14, 19, 40, .4); }
.btn-quiet:hover { border-color: var(--gold); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 40%, #262C54 0%, var(--depth-1) 55%, var(--depth-0) 100%);
  padding: 0 var(--gutter) max(48px, 9vh);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.hero-canvas.on { opacity: 1; }
.hero-copy {
  position: relative; max-width: 640px; padding: 28px 26px; border-radius: 22px;
  background: rgba(14, 19, 40, .72); /* the scrim: SCRIM_ALPHA in palette.js */
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* The Machine World mark, moving ("D·live", owner 2 Nov 2026; a quarter of the first size, 90px, 50px on phones): the master wheel in gold on a navy tile, turning once a
   minute about its centre, with gold rings going out from the hub every 1.2 s. Each ring fades in at the hub and out at
   the edge, and the three start spaced out (negative delays), so the loop has no visible restart. Still under
   prefers-reduced-motion (the rule at the end of this file stops every animation; the rings then rest mid-way). */
.mw-mark { position: relative; z-index: 0; width: 90px; height: 90px; max-width: 100%; aspect-ratio: 1; margin: 0 0 14px; }
/* r8d: no tile and no clipping, so the waves spread past the mark into the card; the card's text sits above them */
.hero-copy > :not(.mw-mark) { position: relative; z-index: 1; }
.mw-mark > span { position: absolute; }
.mw-mark .bloom { inset: -50%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 244, 226, .7) 0, rgba(242, 200, 121, .4) 12%,
  rgba(242, 200, 121, .12) 32%, rgba(242, 200, 121, 0) 50%); }
.mw-mark .ring { left: 50%; top: 50%; width: 160%; height: 160%; margin: -80% 0 0 -80%; pointer-events: none; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(242, 200, 121, .9); box-shadow: 0 0 5px rgba(242, 200, 121, .8), inset 0 0 3px rgba(242, 200, 121, .4);
  transform: scale(.1); opacity: 0; will-change: transform, opacity; animation: mw-wave 3.6s linear infinite; }
.mw-mark .ring:nth-of-type(3) { animation-delay: -1.2s; }
.mw-mark .ring:nth-of-type(4) { animation-delay: -2.4s; }
@keyframes mw-wave {
  0% { transform: scale(.1); opacity: 0; }
  12% { opacity: .85; }
  70% { opacity: .35; }
  100% { transform: scale(1); opacity: 0; }
}
.mw-mark .turn { inset: 0; animation: mw-turn 60s linear infinite; will-change: transform; }
@keyframes mw-turn {
  to { transform: rotate(360deg); }
}
.mw-mark .wheel { position: absolute; inset: 8%; background: var(--gold); filter: drop-shadow(0 0 1px rgba(242, 200, 121, .6));
  -webkit-mask: url(/mark-wheel.png) center / contain no-repeat; mask: url(/mark-wheel.png) center / contain no-repeat; }
@media (max-width: 480px) { .mw-mark { width: 50px; height: 50px; margin-bottom: 10px; } }
.wordmark { font-size: 24px; font-weight: 400; letter-spacing: .14em; line-height: 1.3; color: var(--gold); margin-bottom: 8px; }
.hero h1 { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.28; color: var(--warm); }
.tagline { color: var(--muted); margin-bottom: 18px; }
.mark { display: inline-block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--warm); border: 1px solid rgba(242, 200, 121, .5); border-radius: 999px; padding: 4px 12px; margin: 0 0 16px; }
.lead { color: var(--muted); }
@media (max-width: 480px) { .mark { font-size: 11px; letter-spacing: .08em; white-space: nowrap; } .wordmark { font-size: 21px; letter-spacing: .1em; } }
.gate { color: var(--muted); margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.seed {
  position: absolute; right: var(--gutter); bottom: 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--muted); text-decoration: none; background: rgba(14, 19, 40, .72); /* the seed scrim: SCRIM_ALPHA */ padding: 4px 10px; border-radius: 999px;
}
.seed:hover { color: var(--warm); }
@media (min-width: 900px) {
  .hero { align-items: center; padding-left: max(6vw, var(--gutter)); }
}

/* ---------- sections ---------- */
main > section { padding: 0 var(--gutter); }
.band { max-width: 620px; margin: 0 auto; padding-block: 40px !important; border-top: 1px solid rgba(138, 147, 200, .18); }
.band h2 { font-size: clamp(22px, 3vw, 28px); }

/* ---------- waitlist, directly under the hero ---------- */
.register { max-width: 620px; margin: 0 auto; padding-block: clamp(56px, 10vh, 96px) 40px !important; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { color: var(--warm); font-size: 16px; }
.opt { color: var(--muted); }
input[type=email], textarea {
  font: inherit; color: var(--warm); background: #10162e; border: 1px solid var(--field-line); /* hold-1: 3:1 (WCAG 1.4.11) */
  border-radius: 12px; padding: 12px 14px; width: 100%;
}
input[type=email]:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(242, 200, 121, .25); }
.privacy { color: var(--muted); font-size: 14px; margin-top: 14px; }
.contact { color: var(--muted); font-size: 14px; margin-top: 6px; }
.wl-status { min-height: 1.6em; color: var(--warm); }
.wl .btn { width: 100%; }
.wl .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin: 16px 0; }
.wl .or::before, .wl .or::after { content: ""; flex: 1; height: 1px; background: rgba(138, 147, 200, .3); }
.wl .btn:disabled { opacity: .55; cursor: not-allowed; }
.wl .err { border-left: 2px solid var(--gold); padding: 8px 12px; background: rgba(255, 244, 226, .05); color: #F0C2A8; margin: 0 0 16px; }
.muted { color: var(--muted); font-size: 15px; }
.wl-status[data-state=error], .wl-status[data-state=offline], .wl-status[data-state=busy] { color: #F0C2A8; }

.foot { text-align: center; padding: 40px var(--gutter) 56px; border-top: 1px solid rgba(138, 147, 200, .18); color: var(--muted); }
.foot p { margin-inline: auto; }
.foot .small { font-size: 13px; letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) {
  .mw-mark .turn, .mw-mark .ring { animation: none !important; }
  .mw-mark .ring { opacity: .3; transform: scale(.55); }
  .mw-mark .ring:nth-of-type(3), .mw-mark .ring:nth-of-type(4) { opacity: 0; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .hero-canvas { opacity: 1; }
}