/* ==========================================================================
   BIG SKY FPV 2.0 — Base layer
   Reset, typography defaults, layout primitives, utility classes.
   Loads after tokens.css. Component styles come after this.
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--ink-950);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---- Typography defaults --------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  font-weight: 600;
}
h1 { font-size: var(--display-l); }
h2 { font-size: var(--heading-l); }
h3 { font-size: var(--heading-m); }

p { max-width: var(--measure-max); }
p + p { margin-top: var(--space-2); }

a { color: var(--text-primary); text-decoration: none; transition: color var(--t-micro) var(--ease); }
a:hover { color: var(--accent); }

strong { color: var(--text-primary); font-weight: 600; }

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

/* ---- Focus (visible on dark — WCAG 2.2) ------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ---- Layout primitives ------------------------------------------------------ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); position: relative; z-index: var(--z-content); }
.section--inner { padding-block: var(--section-gap-inner); }
.section--alt { background: var(--ink-900); }
.section--tight { padding-block: var(--space-4) var(--space-5); } /* follows a flush element (e.g. stats bar) */

/* ---- Glass material (panels that sit "on" the page) ------------------------- */
.glass {
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* ---- Photographic section backdrop (real footage + heavy scrim) -------------- */
.section--photo { position: relative; overflow: hidden; }
.section--photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--photo);
  background-size: cover; background-position: center;
  opacity: 0.20;
  filter: saturate(0.85);
}
.section--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink-950) 0%, transparent 30%, transparent 70%, var(--ink-950) 100%);
}
.section--photo > * { position: relative; z-index: 1; }

/* ---- Telemetry section header (hairline + mono eyebrow) --------------------- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin-bottom: var(--space-4);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.eyebrow--accent { color: var(--accent); }

/* ---- Mono data (stats, specs) ------------------------------------------------ */
.mono-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ---- Scroll reveal (IntersectionObserver adds .is-in) ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---- Utilities ----------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100%; left: var(--gutter);
  background: var(--ink-800); color: var(--text-primary);
  padding: var(--space-1) var(--space-2); z-index: var(--z-overlay);
}
.skip-link:focus { top: var(--space-1); }