/* base.css — reset, document defaults, atmosphere, shared utilities */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s var(--ease), color .4s var(--ease);
}

/* smooth theme cross-fade on surfaces/text/borders */
a, button, .panel, section, nav, input,
[class*="card"], [class*="tag"], [class*="badge"] {
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .25s var(--ease);
}

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

/* ── Atmosphere ── */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: clamp(34px, 6vw, 46px) clamp(34px, 6vw, 46px);
  -webkit-mask-image: radial-gradient(ellipse 130% 80% at 50% -10%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 130% 80% at 50% -10%, #000 45%, transparent 100%);
  opacity: .9;
}
.bg-glow { position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(140px); }
.bg-glow-1 { width: min(60vw,720px); height: min(45vw,520px); top: -160px; right: -120px; background: var(--gold-glow); opacity: .5; }
.bg-glow-2 { width: min(55vw,620px); height: min(55vw,620px); bottom: -120px; left: -160px; background: var(--cyan-dim); }

/* ── Layout primitives ── */
section { position: relative; z-index: 1; scroll-margin-top: var(--nav-h); }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Reveal-on-scroll utility (reveal.js) ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .07s; } .reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; } .reveal-d4 { transition-delay: .28s; }
.reveal-d5 { transition-delay: .35s; } .reveal-d6 { transition-delay: .42s; }

/* ── Accessibility ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px;
}
.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;
}

/* ── Custom scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; border: 2px solid var(--ground); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}