/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
a { text-decoration: none; color: inherit; }

/* ─── Base ───────────────────────────────────────────────────────────── */
body {
  font-family: 'Space Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scroll fade-in ─────────────────────────────────────────────────── */
/*
  Apply class="fade-in" to any element you want to appear softly as it
  scrolls into view. The IntersectionObserver in project.html adds
  "visible" when the element enters the viewport.
  Use style="--fade-delay: 0.1s" to stagger items in a grid.
*/
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--fade-delay, 0s);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Scrollbar (project card) ───────────────────────────────────────── */
.project-card {
  scrollbar-width: thin;
  scrollbar-color: #b4b0a8 transparent;
}
.project-card::-webkit-scrollbar { width: 4px; }
.project-card::-webkit-scrollbar-track { background: transparent; }
.project-card::-webkit-scrollbar-thumb { background: #b4b0a8; border-radius: 2px; }