@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* ============================================================
   BASE STYLES
   ============================================================ */

html, body {
  height: 100%;
  overflow: hidden;
}

html {
  cursor: none;
}

body {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-base);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-text-primary);
  color: var(--color-bg);
}

a {
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

a:hover {
  opacity: 0.6;
}

:focus-visible {
  outline: 1px solid var(--color-text-primary);
  outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */

[data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-anim-clip] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--duration-page) var(--ease-out-expo);
}

[data-anim-clip].is-revealed {
  clip-path: inset(0% 0 0 0);
}

[data-anim-fade] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
}

[data-anim-fade].is-visible {
  opacity: 1;
}

/* ============================================================
   UTILITY
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* App root — fills full viewport, no scroll here */
#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Project pages switch to document scrolling on tablets and phones.
   Without this override the desktop viewport lock clips the gallery. */
@media (max-width: 899px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #app {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
}