/* Static-site helpers — loaded after the compiled Tailwind stylesheet. */

/* Reveal elements are visible by default (no-JS / file:// safe). JS re-arms
   them with .js-reveal so the scroll animation still plays when scripting runs. */
.reveal { opacity: 1; transform: none; }
.reveal.js-reveal { opacity: 0; transform: translateY(20px); }
.reveal.js-reveal.reveal-in { opacity: 1; transform: none; }

/* Sticky header background once the page is scrolled. Uses the theme
   variables from styles.css so it stays correct in light AND dark mode. */
header.hdr-scrolled {
  border-bottom-color: rgb(var(--hairline) / 0.1);
  background: rgb(var(--ink-950) / 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.js-reveal { opacity: 1 !important; transform: none !important; }
}