/* THE STOOP — public landing. Serial Experiments Lain / analog-VHS decay.
   Most of the look is CSS over real content. Palette lives in tokens so a
   future Antara re-skin can lift them wholesale. */

:root {
  /* Lain palette (web-assets doc) */
  --base:      #0e0b08;   /* warm near-black */
  --base-2:    #141009;
  --sepia:     #d8c39a;   /* washed amber midtone */
  --sepia-dim: #9c8a68;
  --blown:     #f6efe2;   /* harsh blown white */
  --oxblood:   #5a1f1f;   /* deep maroon accent */
  --oxblood-2: #7a1414;
  --wired:     #6f8f86;   /* lone cold institutional accent */
  --r:         #ff3b3b;   /* chromatic red ghost */
  --c:         #27d7d7;   /* chromatic cyan ghost */

  --font: "Space Mono", ui-monospace, "Courier New", monospace;
}

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

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(90,31,31,0.10), transparent 60%),
    var(--base);
  color: var(--sepia);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}

/* ----------------- CRT overlay stack ----------------- */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    rgba(0,0,0,0.25) 0 1px, transparent 1px 3px);
  opacity: 0.55;
}
.sweep {
  position: absolute; left: 0; right: 0; height: 38vh;
  background: linear-gradient(rgba(246,239,226,0.00), rgba(246,239,226,0.05), rgba(246,239,226,0.00));
  animation: sweep 9s linear infinite;
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,0.65) 100%);
}
.grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.05; mix-blend-mode: overlay;
}

@keyframes sweep {
  0%   { transform: translateY(-40vh); }
  100% { transform: translateY(140vh); }
}

/* whole-screen irregular flicker */
.flicker { animation: flicker 7s steps(60) infinite; }
@keyframes flicker {
  0%,19%,21%,55%,57%,100% { opacity: 1; }
  20% { opacity: 0.94; }
  56% { opacity: 0.97; }
  80% { opacity: 0.92; }
}

/* ----------------- layout ----------------- */
.screen {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  min-height: 100%;
  padding: max(28px, env(safe-area-inset-top)) 22px 40px;
  display: flex; flex-direction: column; gap: 22px;
}

.head { display: flex; align-items: center; justify-content: space-between; }
.emblem { display: block; image-rendering: pixelated; }

.transmission {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.22em; color: var(--sepia-dim);
}
.tx-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--oxblood-2);
  box-shadow: 0 0 8px var(--oxblood-2);
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }
.tx-time { color: var(--sepia); font-variant-numeric: tabular-nums; }

/* ----------------- wordmark with RGB split ----------------- */
.wordmark {
  position: relative;
  margin-top: 6px;
  font-size: clamp(44px, 16vw, 92px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.92;
  color: var(--blown);
  text-shadow: 0 0 18px rgba(246,239,226,0.18);
}
.wordmark::before, .wordmark::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  z-index: -1;
}
.wordmark::before { color: var(--r); animation: split-r 3.6s steps(40) infinite; }
.wordmark::after  { color: var(--c); animation: split-c 3.6s steps(40) infinite; }
@keyframes split-r { 0%,100%{transform:translate(-2px,0);} 50%{transform:translate(-3px,1px);} }
@keyframes split-c { 0%,100%{transform:translate(2px,0);}  50%{transform:translate(3px,-1px);} }

.present {
  font-size: clamp(15px, 4.5vw, 20px);
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--sepia);
}
.present .found { color: var(--blown); }

.sub { font-size: 13px; color: var(--sepia-dim); letter-spacing: 0.02em; }

.manifesto {
  border-left: 2px solid var(--oxblood);
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.manifesto p { font-size: 14px; color: var(--sepia); }

/* ----------------- doors ----------------- */
.doors { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.door {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  background: var(--base-2);
  border: 1px solid var(--oxblood);
  color: var(--blown);
  padding: 18px 18px;
  letter-spacing: 0.16em; font-size: 14px; font-weight: 700;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.door:hover {
  background: var(--oxblood);
  border-color: var(--oxblood-2);
}
.door:active { transform: translateY(1px); }
.door-glyph { color: var(--wired); font-weight: 700; }
.door:hover .door-glyph { color: var(--blown); }

.door-quiet {
  border-color: var(--sepia-dim);
  color: var(--sepia);
  font-size: 12px; letter-spacing: 0.08em;
  padding: 14px 18px;
}
.door-quiet:hover { background: var(--base); border-color: var(--sepia); }

/* ----------------- footer ----------------- */
.foot {
  margin-top: auto; padding-top: 24px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--sepia-dim); letter-spacing: 0.12em;
}
.cursor { color: var(--sepia); animation: blink 1.1s steps(2) infinite; }

/* ----------------- easter egg desync ----------------- */
body.desync .screen { animation: desync 0.5s steps(8) 3; }
@keyframes desync {
  0%   { transform: translate(0,0); filter: none; }
  25%  { transform: translate(-4px,2px); filter: hue-rotate(20deg) saturate(1.4); }
  50%  { transform: translate(5px,-3px); }
  75%  { transform: translate(-3px,1px); }
  100% { transform: translate(0,0); }
}
.secret {
  color: var(--wired);
  border-color: var(--wired) !important;
}

/* ----------------- reduced motion ----------------- */
@media (prefers-reduced-motion: reduce) {
  .flicker, .sweep, .tx-dot, .cursor,
  .wordmark::before, .wordmark::after { animation: none; }
  .sweep { display: none; }
}