/* ============================================================================
   EcuTunerx — Base layer: reset, typography, page atmosphere, a11y
   ========================================================================== */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Lenis smooth-scroll integration */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

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

/* ---- Page atmosphere: ambient aurora + grain + scanlines ---- */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.atmosphere__aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 90vh;
  background:
    radial-gradient(40% 50% at 18% 12%, rgba(25,230,255,0.10), transparent 70%),
    radial-gradient(45% 55% at 82% 8%, rgba(255,106,26,0.08), transparent 72%),
    radial-gradient(60% 60% at 50% 120%, rgba(255,45,85,0.05), transparent 70%);
  filter: blur(10px);
}
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 3px);
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}

/* Faint engineering grid behind content */
.gridlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, black, transparent 75%);
}

/* ---- Layout helpers ---- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: var(--maxw-narrow); }
main { position: relative; z-index: var(--z-base); }
section { position: relative; }
.section-pad { padding-block: var(--section-y); }

/* ---- Typography primitives ---- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--leading-tight); letter-spacing: 0.02em; text-transform: uppercase; }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; }
h3, .h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
/* Explicit heading color — never depend on inheritance (prevents dark/invisible headings) */
h1, h2, h3, h4, h5, h6,
.display, .h1, .h2, .h3, .ostep__title, .stage-panel__name { color: var(--text); }
.lead { font-size: var(--fs-lead); color: var(--text-dim); line-height: 1.55; max-width: 60ch; }

/* Native dropdown options must be readable in the dark theme */
select option, .select option { background-color: var(--surface-2); color: var(--text); }

.kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: ""; width: 22px; height: 1px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.mono { font-family: var(--font-mono); }
.text-muted { color: var(--muted); }
.text-dim { color: var(--text-dim); }
.text-grad {
  background: var(--grad-thermal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-cyan { color: var(--accent); }
.text-amber { color: var(--accent-2); }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: var(--gutter); z-index: var(--z-modal);
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-sm); transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a3441; }

/* Reveal animation base (driven by GSAP or fallback) */
[data-reveal] { opacity: 0; transform: translateY(28px); will-change: transform, opacity; }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.no-js [data-reveal], .reveal-done [data-reveal] { opacity: 1; transform: none; }
[data-reveal-x] { opacity: 0; transform: translateX(-30px); }
[data-reveal-x].is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}