/* Reset, page background, scroll progress bar, text reveal */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  color: var(--ink);
  --head: "Geist Pixel", "Geist", "Helvetica Neue", Arial, sans-serif;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
/* pixel cursor trail (js/pixel-fx.js) */
.trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* dotted background on its own layer pinned to the screen, so it stays still while the
   page scrolls (phones ignore background-attachment: fixed) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
a { color: inherit; }

/* scroll progress */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: var(--bar, var(--hi-1)); transform-origin: left; transform: scaleX(0);
  transition: background-color .6s ease;
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .65; box-shadow: 0 0 0 transparent; }
  50% { opacity: 1; box-shadow: 0 0 12px var(--bar, var(--hi-1)); }
}

/* text reveal */
.js .rv { opacity: 0; }
/* pixel reveal: text blinks in with stepped opacity while js/reveal.js decodes the letters */
.js .rv.in { opacity: 1; transition: opacity .32s steps(4, end); transition-delay: var(--d, 0ms); }