/* ============================================================
   BASE · Reset + global element defaults + accessibility
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Slight inertia offset for anchor jumps so sticky nav doesn't cover headings */
  scroll-padding-top: 5rem;
}

body {
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient background · radial gradients that sit behind every page.
   Deliberately faint; they add depth without competing for attention. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(45, 212, 191, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(99, 102, 241, 0.05), transparent 60%);
}

/* Faint grid pattern. CSS-only, no image request. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 50%, transparent 100%);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo);
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ----- Typography defaults ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

p {
  color: var(--fg-secondary);
  line-height: var(--leading-relaxed);
}

::selection {
  background: var(--accent-soft);
  color: var(--fg-primary);
}

/* ----- Focus states · accessible & consistent ----- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Scrollbar · subtle on dark */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ----- Utility: visually-hidden but available to screen readers ----- */
.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;
}

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

.container--narrow {
  max-width: var(--container-narrow);
}

/* ----- Animation utility classes ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}