/* ============================================================
   GateHouse — Base reset & element defaults
   ------------------------------------------------------------
   Light, opinionated reset. Sets the navy ground, the text
   defaults, selection color, and mono-tabular numerals.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: var(--type-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--text-primary); }

/* The navy ground carries a vignette: a faint Cobalt lift behind the
   top-left content, darkening to ink at the edges. Backgrounds only —
   never behind body copy at reduced contrast. */
[data-theme="dark"] body,
html[data-theme="dark"] body {
  background-color: var(--navy-950);
  background-image:
    radial-gradient(1100px 620px at 18% -6%, rgba(27, 95, 191, 0.18), transparent 62%),
    radial-gradient(900px 700px at 100% 0%, rgba(20, 73, 143, 0.14), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Tabular numerals everywhere numbers matter */
.gh-tnum, [data-metric] { font-variant-numeric: tabular-nums; }

/* NB: type utility classes (.gh-eyebrow, .gh-h1, .gh-body, …) live in
   colors_and_type.css — the single source of truth for type. */

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Shared keyframes used by components ---- */
@keyframes gh-spin { to { transform: rotate(360deg); } }
@keyframes gh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes gh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gh-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gh-slide-in-right { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gh-slide-in-left { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gh-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Boundary-motif keyframes (the signature device) ---- */
/* A computed value crossing FROM the membrane TO the exterior — never from the interior. */
@keyframes gh-cross {
  0%   { opacity: 0; transform: translateX(-14px) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
/* Computation pulsing ON the membrane line. */
@keyframes gh-membrane-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
/* A compute node travelling along the membrane. */
@keyframes gh-membrane-travel {
  0%   { top: 6%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}