/* ============================================================
   EAGLE EYE — defense-intelligence data fusion
   Design tokens + base styles
   ============================================================ */

:root {
  /* Base — warm charcoal / lichen black */
  --navy-950: oklch(0.155 0.012 105);
  --navy-900: oklch(0.205 0.014 105);
  --navy-850: oklch(0.245 0.016 105);
  --navy-800: oklch(0.285 0.018 105);
  --navy-750: oklch(0.340 0.020 105);
  --navy-700: oklch(0.405 0.022 105);

  /* Ink — parchment whites, not clinical white */
  --ink:        oklch(0.930 0.016 88);
  --ink-dim:    oklch(0.735 0.018 88);
  --ink-faint:  oklch(0.575 0.018 92);
  --ink-ghost:  oklch(0.430 0.016 96);

  /* Hairlines */
  --line:       oklch(0.610 0.025 88 / 0.28);
  --line-soft:  oklch(0.610 0.025 88 / 0.14);

  /* Signal accent — aged brass */
  --accent-h: 78;
  --accent:     oklch(0.705 0.075 78);
  --accent-dim: color-mix(in oklab, var(--accent) 14%, transparent);

  /* Modality palette — muted, material colours */
  --thermal: oklch(0.670 0.078 56);
  --sar:     oklch(0.625 0.052 18);
  --eo:      oklch(0.690 0.042 205);
  --rf:      oklch(0.665 0.052 145);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  --font-sans: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    linear-gradient(180deg, oklch(0.145 0.012 105), var(--navy-950) 34%, oklch(0.125 0.010 105));
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle starfield / grain veil over the whole page */
/* Quiet atmospheric veil — a single soft fade, no starfield */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.33 0.030 88 / 0.30), transparent 62%),
    radial-gradient(70% 55% at 100% 10%, oklch(0.28 0.035 150 / 0.16), transparent 62%);
  opacity: var(--grain-opacity, 1);
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

/* ---------- shared utility ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--accent);
  border-radius: 0;
}

.section {
  padding-block: clamp(72px, 11vw, 150px);
  position: relative;
  z-index: 1;
}

.section-head {
  max-width: 760px;
}
.section-head h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  margin-top: 22px;
}
.section-head p {
  color: var(--ink-dim);
  font-size: clamp(17px, 1.5vw, 20px);
  margin-top: 22px;
  max-width: 620px;
}

/* tick label used to mark section index numbers */
.section-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-ghost);
}

/* buttons */
.btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--navy-950);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink-dim); background: oklch(1 0 0 / 0.03); }

.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* divider line */
.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

::selection { background: var(--accent); color: var(--navy-950); }

/* keyboard focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* reveal on scroll */
.reveal { opacity: 1; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.mod-card.reveal { transition-delay: .04s; }

@keyframes lineFlow {
  from { stroke-dashoffset: 42; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}