/* ── RESET & BASE ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Prevent layout shifts from scrollbar appearing */
  scrollbar-gutter: stable;
}

body {
  background: var(--midnight);
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed; /* prefer speed over legibility kerning */
}

/* ── SCROLLBAR ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 4px; }
::-webkit-scrollbar-track    { background: var(--midnight); }
::-webkit-scrollbar-thumb    { background: var(--red-muted); border-radius: 2px; }

/* ── SHARED BUTTON ─────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 16px 44px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  /* Only animate GPU-friendly properties */
  transition: background .25s, transform .25s var(--ease);
  /* Static shadow — avoids repainting box-shadow on hover */
  box-shadow: 0 0 40px var(--red-glow);
  will-change: transform;
}
.btn-primary:hover {
  background: var(--red-muted);
  transform: translateY(-2px);
}

/* ── SCROLL REVEAL ─────────────────────────────────────────────────────────── */
/* Applied by IntersectionObserver in app.js */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  /* Delay driven by --delay CSS custom property on the element */
  transition:
    opacity  .7s var(--ease) var(--delay, 0s),
    transform .7s var(--ease) var(--delay, 0s);
  /* Tell browser these props are changing — avoids mid-scroll repaints */
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
  /* Remove will-change after animation so it doesn't hog VRAM */
  will-change: auto;
}

/* Reduce motion: honour the OS preference */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  html    { scroll-behavior: auto; }
}