/* dexterm.xyz splash (task-1327). Palette = the app's cyberspace theme (dexterm/app/packages/tui/src/theme.ts, same
   tokens as dexterm/site/src/css/site.css). Monospace only. Every animation is driven by splash.js from one clock
   (so the reel can be captured frame-exact); this file only lays out and styles the calm, still state. */

:root {
  --bg: #020507;
  --panel: #03090c;
  --border: #0c3a24;
  --text: #eafff0;
  --muted: #62c98a;
  --dim: #3aa866;
  --phosphor: #39ff14;
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --coral: #d97757;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Monaco, 'Cascadia Code', 'DejaVu Sans Mono', monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 15px/1.6 var(--mono); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
a { color: var(--cyan); text-underline-offset: 3px; text-decoration-color: rgba(0, 240, 255, .4); }
a:hover { text-decoration-color: var(--cyan); }
:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 4px; border-radius: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: #0b3b22; color: var(--text); }

/* the living field sits behind everything; the veil adds scanlines + a vignette (static, GPU-cheap) */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 46%, rgba(2, 5, 7, 0) 40%, rgba(2, 5, 7, .55) 85%, rgba(2, 5, 7, .85) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .18) 2px 3px); }
.glow { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 1; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(57, 255, 20, .10) 0%, rgba(0, 240, 255, .04) 35%, rgba(0, 0, 0, 0) 70%); }
main, .foot { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- hero: wordmark, one line, two buttons, status */
.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 20px 72px; position: relative; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
h1 { margin: 0; line-height: 0; }
.wm { width: min(640px, 84vw); height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(57, 255, 20, .22)); }
.wm-ghost { opacity: .32; }
.wm-m { transform: translateX(-3px); }
.wm-c { transform: translateX(3px); }
.wm-row, .wm-ghost, .wm-cur { will-change: transform, opacity; }
/* no-JS intro fallback (splash.js turns these off and drives the intro itself) */
.wm-row, .wm-cur, .cta, .status { animation: dx-in .7s ease 1.2s both; }
.wm-ghost { animation: dx-ghost .7s ease 1.2s both; }
@keyframes dx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dx-ghost { from { opacity: 0; } to { opacity: .32; } }
.tag { margin: clamp(22px, 4vw, 34px) 0 0; font-size: clamp(15px, 2.1vw, 20px); letter-spacing: .02em; color: var(--text); }
.cta { display: flex; gap: 14px; margin-top: clamp(26px, 4.4vw, 40px); }
.btn { position: relative; display: inline-block; min-width: 132px; padding: 11px 22px; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); background: rgba(3, 9, 12, .62); text-decoration: none; font-size: 14px; letter-spacing: .14em; text-transform: lowercase;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: color .25s ease, border-color .25s ease, box-shadow .35s ease, background-color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.btn::before { content: '›'; position: absolute; left: 10px; opacity: 0; color: var(--phosphor); transition: opacity .2s ease, transform .2s ease; transform: translateX(-4px); }
.btn:hover, .btn:focus-visible { color: var(--text); border-color: var(--phosphor); background: rgba(6, 48, 26, .55);
  box-shadow: 0 0 0 1px rgba(57, 255, 20, .25), 0 0 28px rgba(57, 255, 20, .22), inset 0 0 18px rgba(57, 255, 20, .08); transform: translateY(-1px); }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; transform: none; }
.btn:active { transform: translateY(0); }
.status { margin: 22px 0 0; font-size: 12px; letter-spacing: .12em; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px rgba(217, 119, 87, .8); }
.cue { position: absolute; left: 50%; bottom: 22px; width: 1px; height: 44px; overflow: hidden; background: rgba(57, 255, 20, .14); }
.cue i { position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); }

/* ---------------------------------------------------------------- the four beats */
.beat { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 72px clamp(12px, 4vw, 48px); }
.beat { --fit: 1.68; }
.beat[data-beat="analyst"] { --fit: 2.15; }
.cap, .note { align-self: center; width: min(1400px, 100%, calc((100vh - 170px) * var(--fit))); margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; color: var(--muted); }
.cap b { color: var(--phosphor); font-weight: 700; margin-right: 10px; }
.win { margin: 0; width: min(1400px, 100%, calc((100vh - 170px) * var(--fit))); border-radius: 10px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px var(--border) inset, 0 40px 120px rgba(0, 0, 0, .7), 0 0 90px rgba(57, 255, 20, .07);
  will-change: transform, opacity; }
.bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #050b0e; border-bottom: 1px solid #08160f; }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.bar i + i { background: #febc2e; }
.bar i + i + i { background: #28c840; }
.bar span { flex: 1; text-align: center; margin-right: 52px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win canvas { display: block; width: 100%; height: auto; background: var(--bg); }
/* 03 is a replay of real historical data: the honesty caption sits right under the window, never cropped */
.note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--text); }
.note span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }

/* ---------------------------------------------------------------- footer + sound */
.foot { padding: 40px 20px 56px; text-align: center; font-size: 12px; color: var(--muted); background: linear-gradient(to bottom, rgba(2, 5, 7, 0), var(--bg) 40%); }
.foot nav { display: flex; justify-content: center; gap: 22px; margin-bottom: 10px; letter-spacing: .12em; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover, .foot nav a:focus-visible { color: var(--text); }
.foot p { margin: 0; }
.snd { position: fixed; right: 16px; bottom: 16px; z-index: 3; font: 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted);
  background: rgba(3, 9, 12, .7); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; cursor: pointer;
  transition: opacity .4s ease, color .2s ease, border-color .2s ease; }
.snd:hover, .snd:focus-visible { color: var(--text); border-color: var(--phosphor); }
.snd[aria-pressed="true"] { color: var(--phosphor); }
.snd.away { opacity: 0; pointer-events: none; }
.snd.away:focus-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
  .btn { min-width: 116px; padding: 11px 16px; }
  .beat { padding: 56px 10px; }
  .win { border-radius: 8px; }
  .bar { height: 24px; }
  .bar i { width: 9px; height: 9px; }
  .bar span { font-size: 10px; margin-right: 40px; }
  .cap { font-size: 12px; }
  .note { font-size: 11px; }
  .note span { font-size: 10px; }
}
@media (hover: none), (pointer: coarse) { .glow { display: none; } }
html.reel { scrollbar-width: none; }
html.reel::-webkit-scrollbar { display: none; }
html.reel .glow { display: block; }
/* reduced motion: the calm still composition. splash.js draws one frame of everything and starts no loop. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .snd { transition: none; }
  .wm-row, .wm-cur, .wm-ghost, .cta, .status { animation: none; }
  .cue { display: none; }
  .glow { display: none; }
}