/* The coming-soon page.
   Layout: full-bleed live contour map (WebGL) with tracers riding the isolines;
   lockup anchored lower-left, minimal corner marks.

   Everything reads brand/tokens.css. The block below pins the handful of
   values this page shipped with before tokens v1.0 settled a step away from
   them, so the home page stays pixel-identical until launch
   (docs/DECISIONS.md, "Coming-soon page keeps its shipped values"). Delete the
   block and the page is on the brand tokens. */
:root[data-page="coming-soon"] {
  --ground: #0a1411;
  --ground-rgb: 10, 20, 17;   /* the same colour as a triple, for the veil's rgba() stops: legacy rgba() keeps the gradient in sRGB, exactly as shipped */
  --sage: #9cc3ab;
  --text: #e3ede6;
  --text-faint: #6f8e7e;
  --track-label: .16em;
  --lockup-word: clamp(30px, 5.6vw, 58px);
  --lockup-sub: clamp(10px, 1.25vw, 13px);
  --lockup-sub-track-phone: .48em;
  --soon-size: clamp(14px, 1.7vw, 17px);
  --soon-track: .06em;
  --t-field-in: 2.4s;
  --t-rise: .8s;
  --ease-rise: cubic-bezier(.2, .8, .2, 1);
  --t-in: .9s;
  --t-blink: 1.1s;
}

html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: var(--font-data); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl { opacity: 0; transition: opacity var(--t-field-in) ease .1s; }
#gl.on { opacity: 1; }
.veil {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(85% 70% at 10% 92%, rgba(var(--ground-rgb), .9) 0%, rgba(var(--ground-rgb), .55) 38%, rgba(var(--ground-rgb), 0) 72%),
    radial-gradient(140% 120% at 50% 50%, rgba(var(--ground-rgb), 0) 55%, rgba(var(--ground-rgb), .75) 100%);
}
.frame {
  position: relative; z-index: 1; height: 100%; box-sizing: border-box;
  padding-block: clamp(20px, 4.5vh, 44px);
  padding-inline: var(--gutter);
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-5);
  pointer-events: none;
}
.bar, .foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  font-size: var(--text-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.hero { align-self: end; display: grid; gap: clamp(22px, 3.6vh, 34px); padding-bottom: clamp(8px, 3vh, 28px); }
.lockup { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 26px); }
.mark { width: clamp(56px, 8vw, 80px); height: auto; flex: none; overflow: visible; }
.mark .diamond { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw var(--t-draw) var(--ease-in-out) .3s forwards; }
.mark .core { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: rise var(--t-rise) var(--ease-rise) 1.45s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { transform: scaleY(1); } }
.word { display: grid; gap: var(--s-2); min-width: 0; }
.word h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--lockup-word); letter-spacing: var(--track-wordmark); line-height: 1; color: var(--text);
  margin-right: calc(-1 * var(--track-wordmark));
}
.word span {
  font-family: var(--font-display); font-size: var(--lockup-sub);
  letter-spacing: var(--track-subword); color: var(--sage); text-transform: uppercase;
}
.word h1, .word span, .soon { opacity: 0; transform: translateY(6px); animation: in var(--t-in) var(--ease-out) forwards; }
.word h1 { animation-delay: .9s; }
.word span { animation-delay: 1.15s; }
.soon { animation-delay: 1.6s; }
@keyframes in { to { opacity: 1; transform: none; } }
.soon {
  margin: 0; font-size: var(--soon-size); letter-spacing: var(--soon-track); color: var(--text);
  display: flex; align-items: baseline;
}
.soon .dots { display: inline-block; width: 3ch; color: var(--sage); }
.soon .caret { display: inline-block; width: .55ch; height: 1.05em; background: var(--sage); transform: translateY(.17em); animation: blink var(--t-blink) steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #gl { transition: none; }
  .mark .diamond, .mark .core, .word h1, .word span, .soon, .soon .caret { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}
@media (max-width: 520px) { .word span { letter-spacing: var(--lockup-sub-track-phone); } }