/* Welcome intro: a loading counter. It starts below the bottom edge of the green screen and climbs
   from 1% to 100% while travelling to the top — picking up speed off the bottom and easing hard into
   its final position. At 100% the green fades away to reveal the hero, and the header/announcement
   slide down from the top with a soft fade.
   The overlay is armed by an inline script in <head>, so it is already painted on the first frame
   and the hero can never flash through before the script runs. */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--brand-primary);
  display: none;
  /* while the intro plays it owns the page: clicks and taps land here, not on the site */
  pointer-events: auto;
  touch-action: none;
}
.intro.is-done { pointer-events: none; }
html.intro-armed .intro, html.intro-running .intro, html.intro-settling .intro { display: block; }

.intro__logo {
  position: fixed; inset: 0; z-index: 201; display: none;
  color: #fff;
  pointer-events: none;
  overflow: hidden;
}
html.intro-armed .intro__logo, html.intro-running .intro__logo, html.intro-settling .intro__logo { display: block; }

/* --p: 0 -> 1, set by js */
.intro__counter {
  --p: 0;
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .06em;
  font: 600 clamp(88px, 17vw, 300px)/0.9 var(--font); /* Geist SemiBold */
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  /* the trip: p=0 sits in the lower part of the screen (fully in frame), p=1 lands near the top */
  transform: translateY(calc(100vh - 1.5em - var(--p) * (100vh - 2.1em)));
  will-change: transform;
}
.intro__num { display: inline-block; }
.intro__pct { opacity: 1; }

/* phase: fade — the counter dissolves, then the green dissolves and the hero shows through */
.intro__logo.is-fade { transition: opacity .5s ease; opacity: 0; }
.intro.is-fade { transition: opacity 1s ease .15s; opacity: 0; }
.intro.is-done, .intro__logo.is-done { display: none !important; }

/* page holds still while the intro plays; header + announcement then slide down with a soft fade */
html.intro-armed .site-header, html.intro-armed .announce,
html.intro-running .site-header, html.intro-running .announce { transform: translateY(-110%); opacity: 0; }
.site-header, .announce { transition: transform .8s cubic-bezier(0, 1, .4, 1), opacity .6s ease; }
html.intro-armed body, html.intro-running body, html.intro-settling body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .intro, .intro__logo { display: none !important; } }