/* ==========================================================================
   base.css — tokens, reset, and the chrome shared by every page.

   Deliberately contains NO layout mode. The one-screen, non-scrolling
   treatment lives in screen.css (loaded by the landing and 404 pages); the
   scrolling document treatment lives in report.css. Keeping those out of here
   is what lets long reports scroll at all.
   ========================================================================== */

/* Same visual system as yakhnis.com, with the text scale rebuilt for a site
   that carries real body copy.

   yakhnis used translucent tints (--dim at 0.38, --faint at 0.14) because there
   they only ever coloured tiny decorative corner marks. Here those tokens carry
   paragraphs, navigation and form labels, and at those alphas they measured
   3.09:1 and 1.36:1 against the background — below the 4.5:1 WCAG AA floor, and
   in --faint's case effectively invisible.

   They are now solid values with measured contrast against --bg:
     --fg     18:1   headings, emphasis
     --dim    9.8:1  body copy            (AAA is 7:1)
     --faint  6.3:1  labels, nav, footer  (AA is 4.5:1)
     --accent 11.2:1 eyebrows, links, figures

   --rule/--panel/--surface stay translucent: they are non-text surfaces, so
   contrast minimums don't apply and tinting keeps them tied to the ground. */
:root {
  --bg: #12121b;
  --fg: #f2f3f8;
  --dim: #b9bcc9;
  --faint: #9296a6;
  --accent: #7dd3fc;

  --rule: rgba(242, 243, 248, 0.14);
  --panel: rgba(242, 243, 248, 0.05);
  --surface: rgba(242, 243, 248, 0.03);
  --warn: #fbbf24;
  --good: #6ee7b7;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- backdrop (partials/backdrop.njk + assets/js/aurora.js) -------------- */

canvas#aurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(80px) saturate(130%);
  transform: scale(1.2);
  opacity: 0.85;
}

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -8%); }
  30% { transform: translate(3%, -4%); }
  50% { transform: translate(-7%, 6%); }
  70% { transform: translate(6%, 2%); }
  90% { transform: translate(-3%, 7%); }
}

/* --- corner labels ------------------------------------------------------- */

.corner {
  position: fixed;
  z-index: 3;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--faint);
  opacity: 0;
  animation: fade 2s 1.8s ease forwards;
}
.corner.bl { left: 2rem; bottom: 1.8rem; }
.corner.br { right: 2rem; bottom: 1.8rem; }
.corner.tl { left: 2rem; top: 1.8rem; display: flex; gap: 1.4rem; }

.corner.tl a {
  color: var(--faint);
  text-decoration: none;
  transition: color 0.3s;
}
.corner.tl a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .corner.bl { left: 1.2rem; }
  .corner.br { right: 1.2rem; }
  .corner.tl { left: 1.2rem; top: 1.2rem; }
}

/* Shared keyframe — home.css relies on this too, so it stays in base. */
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .corner { animation-duration: 0.01s; animation-delay: 0s; }
}