/* ==========================================================================
   Reset, fonts, and the ScrollSmoother scaffold
   ========================================================================== */

/* Self-hosted only — no CDN, so this survives the move onto the iGEM wiki. */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Drop Anton-Regular.ttf into assets/fonts/ and uncomment to use it for display.
@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
*/

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

html {
  /* ScrollSmoother drives the scroll; native smooth-scroll would fight it. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
svg { display: block; }

/* --- ScrollSmoother scaffold ---------------------------------------------
   #smooth-wrapper must be a fixed-size viewport box; #smooth-content is the
   thing ScrollSmoother translates. Height is left to the content.          */
#smooth-wrapper {
  position: fixed;
  overflow: hidden;
  inset: 0;
  width: 100%;
}
#smooth-content { will-change: transform; }

/* Before JS boots, fall back to plain document scroll so the page is still
   readable if a script fails to load. .js-ready is set by main.js. */
html:not(.js-ready) #smooth-wrapper { position: relative; overflow: visible; }

/* --- Typography helpers --------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.eyebrow {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: var(--measure);
  opacity: 0.85;
}

/* A line of text that rises out of a clipping mask — the "text going up"
   motif, reused by the intro and by the SMOGSENSE reveal in Act III. */
.mask-line { display: block; overflow: hidden; }
.mask-line > * { display: block; will-change: transform; }

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

/* The SVG sprite of repeated marks (PM2.5 particle, stick figure, cytokine).
   Kept in the DOM — not display:none — because Safari will not render <use>
   references into a fully hidden tree. */
.sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Reduced motion --------------------------------------------------------
   main.js also skips the smoother and pinning; this handles the CSS side. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #smooth-wrapper { position: relative; overflow: visible; }
}