/* ════════════════════════════════════════════════════════════
   SCP LEGION // HUB — shared site styles
   Composed from the SCP Legion design system website kit.
   ════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-mono); }
a { text-decoration: none; color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.g { color: var(--green); }

/* ── controls ───────────────────────────────────────────── */
.btn {
  height: 30px; padding: 0 16px; background: transparent; color: var(--fg-muted);
  border: 1px solid var(--line-2); font: 700 10px var(--font-mono);
  letter-spacing: 0.08em; cursor: pointer; display: inline-flex; align-items: center;
  text-transform: uppercase;
  transition: background-color 80ms linear, border-color 80ms linear, color 80ms linear;
}
.btn:hover { border-color: var(--fg); color: var(--fg); }
.btn.green { background: var(--green-bg); border-color: var(--green-edge); color: var(--green-2); }
.btn.green:hover { background: #0D2919; border-color: var(--green); color: var(--green); }
.btn.big { height: 36px; padding: 0 20px; font-size: 11px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid var(--line-2);
        background: var(--bg-3); color: var(--fg-sub); font: 700 9px var(--font-mono); letter-spacing: 0.06em; }
.pill.green { background: var(--green-bg); border-color: var(--green-edge); color: var(--green-2); }

.sec-h { font: 700 9px var(--font-mono); color: var(--green-2); letter-spacing: 0.12em; margin-bottom: 14px; }

/* ── nav ────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.nav-in { height: 52px; display: flex; align-items: center; gap: 22px; }
.lockup { font: 700 12px var(--font-mono); color: var(--fg); }
.links { display: flex; gap: 18px; margin-left: 14px; }
.links a { font: 400 11px var(--font-mono); color: var(--fg-sub); transition: color 80ms linear; }
.links a::before { content: '// '; color: transparent; transition: color 80ms linear; }
.links a:hover { color: var(--fg); }
.links a:hover::before { color: var(--green); }
.links a.active { color: var(--fg); font-weight: 700; }
.links a.active::before { color: var(--green); }
.nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.live { display: flex; align-items: center; gap: 6px; font: 400 9px var(--font-mono); color: var(--green-2); letter-spacing: 0.08em; }

/* ── page header strip (interior pages) ─────────────────── */
.page-head { border-bottom: 1px solid var(--line); }
.page-head-in { padding: 56px 32px 44px; }
.page-head h1 { margin: 0 0 12px; font: 700 40px/1.15 var(--font-mono); letter-spacing: -0.01em; }
.page-head .lead { margin: 0; font: 400 13px/1.7 var(--font-mono); color: var(--fg-sub); max-width: 62ch; }

/* ── sections ───────────────────────────────────────────── */
.section { padding: 56px 0; border-bottom: 1px solid var(--line); }
.section h2 { margin: 0 0 24px; font: 700 28px/1.2 var(--font-mono); }
.section .body { font: 400 12px/1.8 var(--font-mono); color: var(--fg-sub); max-width: 68ch; }

/* fused 1px-line grid (features / projects / team) */
.fgrid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fcell { background: var(--bg); padding: 22px; transition: background-color 80ms linear; }
.fcell:hover { background: var(--bg-1); }
.fcell .gl { font: 400 22px var(--font-mono); color: var(--green); line-height: 1; }
.fcell h3 { margin: 12px 0 6px; font: 700 14px var(--font-mono); color: var(--fg); letter-spacing: 0.04em; text-transform: uppercase; }
.fcell p { margin: 0; font: 400 11px/1.7 var(--font-mono); color: var(--fg-muted); }
.fcell .tid { font: 400 9px var(--font-mono); color: var(--fg-dim); }

/* terminal panel */
.term { border: 1px solid var(--line); background: var(--bg-1); }
.term-head { height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line);
             display: flex; align-items: center; justify-content: space-between;
             font: 700 9px var(--font-mono); color: var(--fg-muted); letter-spacing: 0.06em; }
.term-body { padding: 14px; font: 400 11px/1.9 var(--font-mono); color: var(--fg-sub); }
.term-body .ln { opacity: 0; animation: lg-rise 160ms cubic-bezier(0.2,0.8,0.2,1) forwards; white-space: nowrap; }
.term-body .dim { color: var(--fg-muted); }
.term-body .ok { color: var(--green-2); }
.term-body .warn { color: var(--amber); }
.term-body .hot { color: var(--green); font-weight: 700; }

/* ── footer ─────────────────────────────────────────────── */
.foot { background: var(--bg-1); padding: 36px 0 20px; }
.fcols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.ftag { font: 400 10px/1.6 var(--font-mono); color: var(--fg-muted); margin-top: 8px; }
.fh { font: 700 9px var(--font-mono); color: var(--fg-muted); letter-spacing: 0.06em; margin-bottom: 10px; }
.fcol a { display: block; font: 400 11px/2 var(--font-mono); color: var(--fg-sub); transition: color 80ms linear; }
.fcol a:hover { color: var(--green); }
.copy-handle { cursor: pointer; }
.legal { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line);
         display: flex; justify-content: space-between;
         font: 400 9px var(--font-mono); color: var(--fg-muted); }
.legal .ok { color: var(--green-2); }

/* ── stat band ──────────────────────────────────────────── */
.band { border-bottom: 1px solid var(--line); background: var(--bg-1); }
.band-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 18px 0; text-align: center; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .n { font: 700 22px var(--font-mono); color: var(--fg); }
.stat .n .g { color: var(--green); }
.stat .l { font: 700 8px var(--font-mono); color: var(--fg-muted); letter-spacing: 0.1em; margin-top: 4px; }

/* ── cta strip ──────────────────────────────────────────── */
.cta { padding: 64px 0; border-bottom: 1px solid var(--line); text-align: center; }
.cta h2 { margin: 0 0 10px; font: 700 40px var(--font-mono); }
.cta p { margin: 0 0 24px; font: 400 12px var(--font-mono); color: var(--fg-muted); }
.cta .ctas { display: flex; gap: 10px; justify-content: center; }

/* ── nav clock ──────────────────────────────────────────── */
.clock { font: 400 9px var(--font-mono); color: var(--fg-muted); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* ── scroll reveals — legion.js adds .in on intersect ───── */
.js [data-reveal="rise"] { opacity: 0; }
.js [data-reveal="rise"].in { animation: lg-rise var(--dur-reveal) var(--ease-out) both; }
.js [data-reveal="flicker"] { opacity: 0; }
.js [data-reveal="flicker"].in { animation: lg-flicker-in var(--dur-reveal) linear both; }
.js [data-reveal="scan"] { clip-path: inset(0 0 100% 0); }
.js [data-reveal="scan"].in { animation: lg-scan-in 480ms var(--ease-out) both; }
.js [data-reveal="stagger"] > * { opacity: 0; }
.js [data-reveal="stagger"].in > * { animation: lg-rise var(--dur-reveal) var(--ease-out) both; }
.js [data-reveal="stagger"].in > *:nth-child(2) { animation-delay: 60ms; }
.js [data-reveal="stagger"].in > *:nth-child(3) { animation-delay: 120ms; }
.js [data-reveal="stagger"].in > *:nth-child(4) { animation-delay: 180ms; }
.js [data-reveal="stagger"].in > *:nth-child(5) { animation-delay: 240ms; }
.js [data-reveal="stagger"].in > *:nth-child(6) { animation-delay: 300ms; }
.js [data-reveal="stagger"].in > *:nth-child(n+7) { animation-delay: 360ms; }

/* color-only hover niceties */
.drow:hover .did { color: var(--green-2); }
.directives a { color: var(--green-2); transition: color 80ms linear; }
.directives a:hover { color: var(--green); }

/* ── system ticker (marquee strip under nav) ────────── */
.ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.ticker-track { display: flex; gap: 0; width: max-content; animation: lg-ticker 36s linear infinite; }
.ticker-track span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 24px;
                     font: 400 9px var(--font-mono); color: var(--fg-muted); letter-spacing: 0.08em; white-space: nowrap; }
.ticker-track .tk { color: var(--green-2); }
@keyframes lg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ── CRT scanline overlay — add .crt to any .term ─────── */
.crt { position: relative; }
.crt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 3px);
}
.crt::before {
  content: ''; position: absolute; left: 0; right: 0; height: 28px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(74,222,128,0) 0%, rgba(74,222,128,0.06) 50%, rgba(74,222,128,0) 100%);
  animation: lg-sweep 5s linear infinite;
}
@keyframes lg-sweep { from { top: -28px; } to { top: 100%; } }

/* ── button scan sweep on hover ───────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
              background: linear-gradient(90deg, rgba(74,222,128,0) 0%, rgba(74,222,128,0.14) 50%, rgba(74,222,128,0) 100%);
              transform: skewX(-18deg); transition: left 240ms var(--ease-out); pointer-events: none; }
.btn:hover::after { left: 120%; }

/* ── target brackets on grid cells ─────────────────── */
.fcell { position: relative; }
.fcell::before, .fcell::after { content: ''; position: absolute; width: 10px; height: 10px;
  border: 0 solid var(--green); opacity: 0; transition: opacity 80ms linear; pointer-events: none; }
.fcell::before { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.fcell::after { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }
.fcell:hover::before, .fcell:hover::after { opacity: 1; }

/* ── lockup glitch on hover ─────────────────────── */
@keyframes lg-glitch {
  0%, 100% { text-shadow: none; }
  20% { text-shadow: 1px 0 var(--green), -1px 0 var(--red); }
  40% { text-shadow: -1px 0 var(--green), 1px 0 var(--red); }
  60% { text-shadow: 1px 0 var(--red); }
}
.lockup:hover { animation: lg-glitch 280ms steps(2, end) 1; }

/* nav underline draw */
.links a { position: relative; }
.links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
                  background: var(--green); transition: right 160ms var(--ease-out); }
.links a:hover::after, .links a.active::after { right: 0; }

/* entrance choreography helpers */
.a-d1 { animation-delay: 60ms; } .a-d2 { animation-delay: 140ms; } .a-d3 { animation-delay: 220ms; }

@media (max-width: 900px) {
  .fgrid { grid-template-columns: 1fr !important; }
  .fcols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .term, .term-body .ln { animation: none; opacity: 1; }
  .js [data-reveal], .js [data-reveal] > * { opacity: 1 !important; animation: none !important; clip-path: none !important; }
  .ticker-track { animation: none; }
  .crt::before { animation: none; display: none; }
  .lockup:hover { animation: none; }
}