@import url('./foundations.css');
@import url('./grid.css');
@import url('./misc.css');
@import url('./typography.css');

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  --color-bg: #000;
  --color-fg: #fff;

  /* Total scroll distance of the hero, as multiples of the viewport height.
     The sticky pin occupies 1 screen, so the scrub travels (this - 1) screens. */
  --hero-scroll: 500vh;
}

/* =========================================================================
   Reset / base
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 10px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
   Scroll-scrub hero
   ========================================================================= */
.hero {
  position: relative;
  height: var(--hero-scroll);
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* avoids mobile URL-bar jump where supported */
  overflow: hidden;
  background: var(--color-bg);
}

.hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Loader: shown until the active frame set has preloaded, then faded out. */
.hero__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  transition: opacity 0.5s ease;
}

.hero__loader.is-done {
  opacity: 0;
  pointer-events: none;
}

.hero__loader[hidden] {
  display: none;
}

.hero__loader-bar {
  display: block;
  width: min(220px, 46vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.hero__loader-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-fg);
  transition: width 0.2s ease;
}

/* =========================================================================
   Reduced motion: collapse the scroll distance and show a single frame.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero {
    height: 100vh;
    height: 100svh;
  }

  .hero__pin {
    position: relative;
  }
}