/* Global resets + body type + Reveal animation classes.
 * Loaded by every HTML page. */

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

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  background: #0a0908;
  color-scheme: dark;
}

body {
  background: #0a0908;
  color: #f3ece2;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a       { color: inherit; text-decoration: none; }
button  { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid #ff7a35;
  outline-offset: 2px;
}

/* Reveal.jsx applies these classes via IntersectionObserver. */
.reveal-init { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-in   { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; transition: none; }
}