/* ==========================================================================
   BASE — fonts, reset, view containers
   ========================================================================== */

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-display-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-display-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Ayuthaya";
  src: url("../assets/fonts/ayuthaya.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;          /* Each view scrolls independently */
  background: var(--c-header);
}

body {
  font-family: var(--font-grotesk);
  font-weight: var(--w-light);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;   /* Matches Figma's text rendering */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

h1, h2, h3, p, figure { margin: 0; }
img, video { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   VIEWS
   The homepage and the open project are two stacked, independently
   scrolling layers that fill the whole window, so each scrollbar runs from
   the very top of the browser to the bottom. The fixed SITE_HEADER sits over
   the content but stops at the scrollbar (see --sbw), so it never overlaps it.
   -------------------------------------------------------------------------- */
.view {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Narrow, understated scrollbar. Chrome, Edge and Safari use the
   ::-webkit-scrollbar rules (no arrow buttons, like YouTube); browsers
   without them (Firefox) use the standard properties. */
@supports not selector(::-webkit-scrollbar) {
  .view {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scroll-thumb) var(--c-scroll-track);
  }
}
/* Styled scrollbar for mouse/trackpad devices only; touch devices keep
   their native overlay scroll indicators (no gutter). */
@media (pointer: fine) {
  .view::-webkit-scrollbar { width: var(--scroll-w); background: var(--c-scroll-track); }
  .view::-webkit-scrollbar-button { display: none; height: 0; }
  .view::-webkit-scrollbar-track { background: var(--c-scroll-track); }
  .view::-webkit-scrollbar-thumb {
    background: var(--c-scroll-thumb);
    border-radius: calc(var(--scroll-w) / 2);
  }
  .view::-webkit-scrollbar-thumb:hover { background: var(--c-scroll-thumb-hover); }
}

.view--home {
  z-index: 1;
  background: var(--c-header);
}

/* No scrollbar — and no scrollbar space — while the entrance plays, so the
   rising accordion runs to the right-hand edge of the window. */
body.is-loading .view--home,
body.entrance-pending .view--home { overflow-y: hidden; }

.view--project {
  z-index: 2;
  background: var(--c-page);
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
}
.view--project.is-open,
.view--project.is-animating { visibility: visible; }
.view--project.is-open { transform: none; }

/* Visible keyboard focus */
:focus-visible {
  outline: 2px solid var(--c-icon);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}