@font-face { font-family: "Space Grotesk"; src: url(/fonts/space-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Blade Runner"; src: url(/fonts/blade-runner.ttf) format("truetype"); font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --bg: #060C08;
  --fg: #E4EDE0;
  --muted: #6F8069;
  --line: rgba(255, 255, 255, 0.08);
  --cyan: #A4E86A; /* lime */
  --violet: #4F8A4A; /* moss */
  --grad: linear-gradient(100deg, var(--cyan), var(--violet));
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font: 400 13px/1.5 var(--mono); letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--cyan); color: var(--bg); }

#camo { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .5; }
#field { position: fixed; inset: 0; width: 100%; height: 100%; }
/* Faint scanlines + vignette over everything */
.scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
}

.frame { position: fixed; inset: 0; z-index: 3; }
.corner { position: absolute; display: flex; gap: 22px; align-items: center; color: var(--muted); text-transform: lowercase; }
.tl { top: 28px; left: 32px; color: var(--fg); gap: 12px; }
.tr { top: 28px; right: 32px; transition: color .2s; }
.tr:hover { color: var(--cyan); }
.bl { bottom: 26px; left: 32px; }
.br { bottom: 26px; right: 32px; font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.ok { font-weight: 500; color: var(--cyan); }
.ring {
  width: 16px; height: 16px; border-radius: 5px; padding: 3.5px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  box-shadow: 0 0 18px rgba(164, 232, 106, .6);
}

/* Centre */
.core {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.word {
  position: relative; margin: 0;
  font: 400 clamp(44px, 8.5vw, 140px)/1.1 "Blade Runner", var(--sans); letter-spacing: 0.02em;
  background: linear-gradient(180deg, #F2F7EE 30%, rgba(190, 214, 176, 0.6));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(164, 232, 106, 0.12);
}
.word::after { /* chromatic ghost */
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .45; mix-blend-mode: screen; transform: translate(2px, 0);
  animation: jitter 7s steps(1) infinite;
}
@keyframes jitter {
  0%, 92%, 100% { transform: translate(2px, 0); clip-path: none; }
  93% { transform: translate(-6px, 1px); clip-path: inset(20% 0 55% 0); }
  95% { transform: translate(5px, -1px); clip-path: inset(60% 0 10% 0); }
  97% { transform: translate(-3px, 0); clip-path: inset(40% 0 35% 0); }
}
.sub { margin: 22px 0 0; color: var(--muted); letter-spacing: 0.42em; text-transform: uppercase; font-size: 12px; }

.term { list-style: none; margin: 56px 0 0; padding: 0; text-align: left; min-height: 7.5em; color: #A9B8A2; }
.term li { white-space: nowrap; }
.term li::before { content: "> "; color: var(--cyan); }
.term li.done::before, .term li.typing::before { content: "> "; }
.term li:not(.done):not(.typing) { visibility: hidden; }
.term li.typing::after, .term li.last::after {
  content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px;
  background: var(--cyan); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Hero art: rotating nested squares behind the word */
.art { position: absolute; width: min(70vmin, 720px); aspect-ratio: 1; perspective: 1200px; opacity: .55; pointer-events: none; }
.art .sq {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(164, 232, 106, 0.5);
  box-shadow: 0 0 40px rgba(164, 232, 106, 0.08), inset 0 0 40px rgba(79, 138, 74, 0.08);
  animation: grow 9s cubic-bezier(.25, .6, .3, 1) infinite;
  transform: rotateX(70deg);
}
.art .sq:nth-child(even) { border-color: rgba(79, 138, 74, 0.55); }
.art .sq:nth-child(2) { animation-delay: -1.5s; } .art .sq:nth-child(3) { animation-delay: -3s; }
.art .sq:nth-child(4) { animation-delay: -4.5s; } .art .sq:nth-child(5) { animation-delay: -6s; }
.art .sq:nth-child(6) { animation-delay: -7.5s; }
@keyframes grow {
  0% { width: 4%; height: 4%; opacity: 0; }
  12% { opacity: 1; }
  100% { width: 100%; height: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .term li { visibility: visible !important; }
}
@media (max-width: 600px) {
  .tl, .bl { left: 16px; } .tr, .br { right: 16px; }
  .br { flex-direction: column; align-items: flex-end; gap: 2px; }
  .bl { flex-direction: column; align-items: flex-start; gap: 2px; }
  .word { letter-spacing: 0.03em; }
  .sub { letter-spacing: 0.25em; }
  .term { font-size: 12px; }
}