/* Element-level resets and site-wide utilities.
   Design tokens live in colors_and_type.css — change values there, not here. */

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

html, body { margin: 0; padding: 0; }
body { background: var(--earth-deep); color: var(--fg-1); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }

/* ===== Fade-in on scroll — driven by the reveal Stimulus controller ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.6s var(--ease-cinema), transform 1.6s var(--ease-cinema);
}
.reveal.in { opacity: 1; transform: none; }

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