/*
 * HYPERION and TETHYS "coming soon": one stylesheet for both pages.
 * After TETHYS's hero on / (apps/tethys/src/widgets/hero) and the ui-theme tokens
 * (packages/tethys-ui-theme/src/tokens.ts, system.ts): void canvas, bone ink, flare
 * accent, a dark Earth with a cyan limb, blueprint linework pinned to the corners.
 * The globe is dark in both colour modes, as in the app (OverGlobe); the page around
 * it follows prefers-color-scheme. No script, no inline style: CSP style-src 'self'.
 */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("/assets/fonts/orbitron-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Tokens: dark (void) is the default, as on protoworks.dev. */
:root {
  color-scheme: dark light;
  --canvas: #0B0D10;
  --strong: #F7F6F2;
  --ink: #C9CCD3;
  --muted: #A3A8B2;
  --label: #8B909B;
  --ghost: #4A4F59;
  --line: #1D2026;
  --line-default: #2A2E36;
  --line-strong: #363B45;
  --brand: #ec7a35;
  --brand-fg: #f9a46d;
  --on-brand: #0B0D10;
  --water: #5EC8D8;
  --sun: #E0A43A;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wordmark: "Orbitron", "Geist", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --canvas: #F7F6F2;
    --strong: #0B0D10;
    --ink: #1d2128;
    --muted: #565b66;
    --label: #6b707b;
    --ghost: #9aa0ab;
    --line: #dedbd2;
    --line-default: #cfcbc0;
    --line-strong: #b8b3a6;
    --brand: #cf6020;
    --brand-fg: #a84a18;
    --on-brand: #ffffff;
    --water: #1f7f8f;
    --sun: #a87410;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); }
body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--brand); color: var(--on-brand); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── The Earth ─────────────────────────────────────────────────────────── */
.stage { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.globe {
  position: absolute;
  /* 1120-unit box, disc of 1000: size the disc, let the limb glow spill. */
  width: min(62vh, 100vw);
  aspect-ratio: 1;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  animation: globe-in 1.4s cubic-bezier(.2,.6,.2,1) both;
}
@media (min-width: 64em) {
  .globe { width: min(94vh, 58vw); left: 66%; top: 50%; }
}
.globe .grat { fill: none; stroke: #5EC8D8; stroke-opacity: .13; stroke-width: 1.2; }
.globe .land { fill: #33402f; fill-opacity: .92; stroke: #A3A8B2; stroke-opacity: .28; stroke-width: 1; stroke-linejoin: round; }
.globe .za { fill: #ec7a35; fill-opacity: .16; stroke: #ec7a35; stroke-width: 2.2; stroke-linejoin: round; }
.globe .atmo { animation: atmo 9s ease-in-out infinite; transform-origin: center; }
.globe .pin .ring { fill: none; stroke: #ec7a35; stroke-width: 2; }
.globe .pin .pulse { fill: none; stroke: #ec7a35; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-out 1.6s infinite; opacity: 0; }
.globe .pin .cross { stroke: #F7F6F2; stroke-opacity: .7; stroke-width: 1.6; }
.globe .pin .dot { fill: #F7F6F2; }
.globe .pin text { fill: #F7F6F2; fill-opacity: .8; font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: .06em; paint-order: stroke; stroke: #0B0D10; stroke-width: 6px; stroke-linejoin: round; }
@keyframes globe-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.965); } }
@keyframes atmo { 50% { opacity: .7; } }
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

/* ── Blueprint linework, after widgets/hero/ui/schematic-field.tsx ─────── */
.tsf { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden;
  --tsf-line: var(--ghost); --tsf-ink: var(--label); --tsf-water: var(--water); --tsf-knock: var(--canvas); }
/* On bone the labels cross the dark globe: a bone knock-out would read as a smudge there. */
@media (prefers-color-scheme: light) { .tsf { --tsf-knock: transparent; } }
.tsf .l { fill: none; stroke: var(--tsf-line); stroke-width: 1; }
.tsf .k { fill: none; stroke: var(--tsf-ink); stroke-opacity: .45; stroke-width: 1; }
.tsf .dash { stroke-dasharray: 2 6; }
.tsf .cad { stroke-dasharray: 10 3 2 3; }
.tsf .t { fill: var(--tsf-ink); fill-opacity: .6; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .06em; paint-order: stroke; stroke: var(--tsf-knock); stroke-width: 4px; stroke-linejoin: round; }
.tsf .draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: tsf-draw var(--dur, 2.4s) cubic-bezier(.45,0,.2,1) var(--d, 0s) both; }
.tsf .appear { animation: tsf-appear 1.4s ease-out var(--d, 0s) both; }
.tsf .flow { fill: none; stroke: var(--tsf-water); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 2 18; opacity: .5; animation: tsf-appear 1.4s ease-out var(--d, 0s) both, tsf-flow 3.2s linear var(--d, 0s) infinite; }
.tsf .drip { fill: var(--tsf-water); opacity: .45; animation: tsf-appear 1.2s ease-out var(--d, 0s) both, tsf-drip 9s ease-in-out calc(var(--d, 0s) + 1.2s) infinite; }
.tsf .wet { fill: var(--tsf-water); }
.tsf .arm { transform-box: fill-box; transform-origin: center; transform: rotate(-140deg); animation: tsf-spin 140s linear infinite; }
/* HYPERION's pieces: the sun, its hours, its rays, the modules. */
.tsf .sun { fill: var(--brand); }
.tsf .halo { fill: none; stroke: var(--brand); stroke-opacity: .35; }
.tsf .hour { fill: var(--tsf-line); animation: tsf-appear 1.4s ease-out var(--d, 0s) both; }
.tsf .ray { fill: none; stroke: var(--sun); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 3 9; opacity: .55; animation: tsf-appear 1.4s ease-out var(--d, 0s) both, tsf-flow 2.6s linear var(--d, 0s) infinite; }
.tsf .mod { fill: none; stroke: var(--tsf-ink); stroke-opacity: .4; stroke-width: 1; }
.tsf .pv rect { fill: var(--tsf-water); fill-opacity: .1; stroke: var(--tsf-water); stroke-opacity: .45; stroke-width: 1; }
@keyframes tsf-draw { from { stroke-dashoffset: 1; } }
@keyframes tsf-appear { from { opacity: 0; } }
@keyframes tsf-flow { to { stroke-dashoffset: -20; } }
@keyframes tsf-drip { 50% { opacity: .12; } }
@keyframes tsf-spin { from { transform: rotate(-140deg); } to { transform: rotate(220deg); } }
/* Until the copy sits beside the globe, the corners are drawn small and unlabelled (as the app does below 48em). */
@media (max-width: 63.99em) { .tsf .s { transform: scale(.6); } .tsf .s .t { display: none; } }

/* ── A scrim on the copy's side only, so the words read over the globe ── */
.scrim {
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--canvas) 94%, transparent) 0%,
    color-mix(in srgb, var(--canvas) 70%, transparent) 50%,
    transparent 78%);
}
@media (min-width: 64em) {
  .scrim {
    right: auto; width: 62%;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--canvas) 90%, transparent) 0%,
      color-mix(in srgb, var(--canvas) 45%, transparent) 55%,
      transparent 100%);
  }
}
@media (min-width: 80em) { .scrim { width: 52%; } }

/* ── Bar ───────────────────────────────────────────────────────────────── */
.bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
}
@media (min-width: 48em) { .bar { padding: 22px 40px; } }
@media (min-width: 80em) { .bar { padding: 26px 64px; } }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); }
.mark { flex-shrink: 0; }
.mark .accent { stroke: var(--brand); }
.mark .accent-fill { fill: var(--brand); }
.wordmark { font-family: var(--wordmark); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; }
.home {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 8px 0;
}
.home:hover { color: var(--strong); }

/* ── Copy ──────────────────────────────────────────────────────────────── */
.copy {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: flex-end;
  padding: 0 max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* On a phone the globe sits above; the copy starts below its middle. */
  padding-top: 38vh;
}
@media (min-width: 48em) and (max-width: 63.99em) { .copy { padding: 52vh 40px 48px; } }
/* Centred a little high, so the drawing in the bottom-left corner stays clear of the words. */
@media (min-width: 64em) { .copy { align-items: center; padding: 24px 40px clamp(64px, 18vh, 180px); } }
@media (min-width: 80em) { .copy { padding-left: 64px; padding-right: 64px; } }
.copy section { width: 100%; max-width: 34rem; animation: fade-in 900ms cubic-bezier(.2,.6,.2,1) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }

.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--label);
}
.eyebrow .rule { flex: 0 0 20px; height: 1px; background: var(--brand); }
h1 {
  margin: 0 0 18px; max-width: 13ch;
  font-family: var(--sans); font-weight: 500; color: var(--strong);
  font-size: 2.25rem; line-height: .98; letter-spacing: -0.04em; text-wrap: balance;
}
@media (min-width: 48em) { h1 { font-size: 3rem; margin-bottom: 22px; } }
@media (min-width: 80em) { h1 { font-size: 3.75rem; } }
.lede { margin: 0; max-width: 44ch; font-size: 1rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (min-width: 48em) { .lede { font-size: 1.125rem; } }

.status { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 24px 0 0; }
@media (min-width: 48em) { .status { margin-top: 32px; } }
.soon, .button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 18px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 0;
}
.soon { color: var(--brand-fg); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.soon .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.button { color: var(--strong); text-decoration: none; background: color-mix(in srgb, var(--canvas) 60%, transparent); transition: border-color .2s, color .2s; }
.button:hover { border-color: var(--brand); color: var(--brand-fg); }

.naming { margin: 22px 0 0; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.wordmark-sm { font-family: var(--wordmark); font-weight: 600; font-size: 11px; letter-spacing: .2em; color: var(--strong); }
.sources { margin: 10px 0 0; max-width: 60ch; font-size: 12px; line-height: 1.6; color: var(--label); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Animation delays and durations, one class per tenth of a second (the markup carries no style attributes). */
.tsf .t0{--d:0s}
.tsf .t1{--d:0.1s}
.tsf .t2{--d:0.2s}
.tsf .t3{--d:0.3s}
.tsf .t4{--d:0.4s}
.tsf .t5{--d:0.5s}
.tsf .t6{--d:0.6s}
.tsf .t7{--d:0.7s}
.tsf .t8{--d:0.8s}
.tsf .t9{--d:0.9s}
.tsf .t10{--d:1s}
.tsf .t11{--d:1.1s}
.tsf .t12{--d:1.2s}
.tsf .t13{--d:1.3s}
.tsf .t14{--d:1.4s}
.tsf .t15{--d:1.5s}
.tsf .t16{--d:1.6s}
.tsf .t17{--d:1.7s}
.tsf .t18{--d:1.8s}
.tsf .t19{--d:1.9s}
.tsf .t20{--d:2s}
.tsf .t21{--d:2.1s}
.tsf .t22{--d:2.2s}
.tsf .t23{--d:2.3s}
.tsf .t24{--d:2.4s}
.tsf .t25{--d:2.5s}
.tsf .t26{--d:2.6s}
.tsf .t27{--d:2.7s}
.tsf .t28{--d:2.8s}
.tsf .t29{--d:2.9s}
.tsf .t30{--d:3s}
.tsf .t31{--d:3.1s}
.tsf .t32{--d:3.2s}
.tsf .t33{--d:3.3s}
.tsf .t34{--d:3.4s}
.tsf .t35{--d:3.5s}
.tsf .t36{--d:3.6s}
.tsf .t37{--d:3.7s}
.tsf .t38{--d:3.8s}
.tsf .t39{--d:3.9s}
.tsf .t40{--d:4s}
.tsf .t41{--d:4.1s}
.tsf .t42{--d:4.2s}
.tsf .t43{--d:4.3s}
.tsf .t44{--d:4.4s}
.tsf .t45{--d:4.5s}
.tsf .t46{--d:4.6s}
.tsf .t47{--d:4.7s}
.tsf .t48{--d:4.8s}
.tsf .t49{--d:4.9s}
.tsf .t50{--d:5s}
.tsf .t51{--d:5.1s}
.tsf .t52{--d:5.2s}
.tsf .t53{--d:5.3s}
.tsf .t54{--d:5.4s}
.tsf .t55{--d:5.5s}
.tsf .t56{--d:5.6s}
.tsf .t57{--d:5.7s}
.tsf .t58{--d:5.8s}
.tsf .t59{--d:5.9s}
.tsf .t60{--d:6s}
.tsf .u16{--dur:1.6s}
.tsf .u24{--dur:2.4s}
.tsf .u32{--dur:3.2s}
.tsf .u34{--dur:3.4s}
.tsf .o110{fill-opacity:0.0660}
.tsf .o88{fill-opacity:0.0528}
.tsf .o66{fill-opacity:0.0396}
.tsf .o44{fill-opacity:0.0264}
.tsf .o22{fill-opacity:0.0132}