/*
 * Pangaea — brand display face, served from src/font as woff2.
 * The family ships four faces, so each declares the weight range it covers and
 * the ranges span 100–900 without gaps. Every font-weight resolves to a real
 * face, so the browser never synthesises one or falls back to system-ui:
 *   100           -> Thin
 *   200, 300      -> Light
 *   400, 500      -> Regular
 *   600, 700, 800, 900 -> Bold
 * The original .otf files sit alongside as source; only woff2 is referenced.
 *
 * font-display: block — brief FOIT instead of FOUT. Brand copy (intro, titles)
 * must not flash a system fallback before Pangaea arrives; faces are preloaded.
 */
@font-face {
  font-family: 'Pangaea';
  src: url('font/Pangaea_Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Pangaea';
  src: url('font/Pangaea_Light.woff2') format('woff2');
  font-weight: 200 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Pangaea';
  src: url('font/Pangaea_Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Pangaea';
  src: url('font/Pangaea_Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: block;
}

/*
 * Text-reveal FOUC: GSAP waits on document.fonts.ready, then splits
 * headings/copy and hides them for the reveal. Until that class exists,
 * keep those elements invisible so they never paint, vanish, then animate.
 */
@media (prefers-reduced-motion: no-preference) {
  .c-page-title > p,
  .c-page-title__image,
  .site-content :is(h2, h3, p, dt, dd),
  .c-footer__content p {
    opacity: 0;
  }

  .c-page-title__image {
    visibility: hidden;
  }

  .c-page-title > p.c-text-reveal,
  .site-content :is(h2, h3, p, dt, dd).c-text-reveal,
  .c-footer__content p.c-text-reveal,
  .site-content :is(.c-kv, .c-kv__text, .js-menu, .js-featured, .c-img, .elfsight-app) :is(h2, h3, p, dt, dd) {
    opacity: 1;
  }
}