/* ═══════════════════════════════════════════════════════════════════════════
   BASE — reset, document shell, typography, accessibility primitives.
   ═══════════════════════════════════════════════════════════════════════════ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchor targets and scrollIntoView() clear of the fixed nav pill. */
  scroll-padding-top: 7.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft);
}

img, svg, video { display: block; max-width: 100%; }

input, textarea, button, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--blue); color: #fff; }

/* ── Focus: visible, on-brand, never on mouse clicks ─────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--cta-bg);
  color: var(--cta-ink);
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: top var(--d-base) var(--ease-out);
}
.skip-link:focus { top: 16px; text-decoration: none; }

/* Screen-reader-only, but still focusable. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Layout shells ───────────────────────────────────────────────────────── */
main { flex: 1 0 auto; position: relative; }

.shell {
  width: var(--shell);
  margin-inline: auto;
}
.shell-narrow { width: var(--shell-narrow); }

/* ── Type helpers ────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 800;
  text-wrap: balance;
}
h3, h4 { line-height: var(--lh-snug); }

p { text-wrap: pretty; }

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

.gold { color: var(--gold); }
.muted { color: var(--text-3); }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.12em 0.42em;
}

/* ── The navy bloom behind the hero. Pure CSS, no images to download. ────── */
.aurora {
  position: absolute;
  inset: -22% 0 auto 0;
  height: 780px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 62% at 50% 26%, var(--glow-1) 0%, transparent 68%),
    radial-gradient(90% 78% at 50% 0%,  var(--glow-2) 0%, transparent 72%);
  filter: blur(6px);
  opacity: 0;
  animation: auroraIn 1400ms var(--ease-out) 60ms forwards;
  /* Fade the element out before its box ends. Without this the block's bottom
     edge cuts the glow off dead straight and reads as a stray hairline across
     the page. */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.aurora-soft { height: 520px; opacity: 0; animation-duration: 1000ms; }

@keyframes auroraIn { to { opacity: 1; } }

/* ── View switching + entrance transition ────────────────────────────────── */
.view {
  display: none;
  position: relative;
  padding-block: clamp(6.5rem, 5rem + 7vw, 9.5rem) var(--s-9);
}
.view.is-active {
  display: block;
  animation: viewIn var(--d-slow) var(--ease-out) both;
}
/* Lift real content above the aurora. `:not(.aurora)` matters — without it this
   would override the aurora's `position: absolute` and drop 780px of empty
   space into the layout. */
.view > *:not(.aurora) { position: relative; z-index: 1; }

@keyframes viewIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Stagger the hero's own children so the landing page assembles itself. */
#view-landing.is-active .hero > * {
  animation: riseIn 720ms var(--ease-out) both;
}
#view-landing.is-active .hero > *:nth-child(1) { animation-delay: 40ms; }
#view-landing.is-active .hero > *:nth-child(2) { animation-delay: 100ms; }
#view-landing.is-active .hero > *:nth-child(3) { animation-delay: 170ms; }
#view-landing.is-active .hero > *:nth-child(4) { animation-delay: 240ms; }
#view-landing.is-active .hero > *:nth-child(5) { animation-delay: 320ms; }

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  font-size: var(--t-sm);
  color: var(--text-3);
  background: var(--bg);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
.foot-brand { font-weight: 700; color: var(--text-2); letter-spacing: -0.01em; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--accent); }
.foot-copy { margin-left: auto; }

@media (max-width: 560px) {
  .foot-copy { margin-left: 0; width: 100%; }
}

/* Reduced motion: kill transforms, keep opacity so nothing pops in abruptly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .aurora { opacity: 1; }
}