/* ==========================================================================
   Intro — Pensatori-style page swap
   1. Loader card (logo + meter) fills the screen over an ink backdrop.
   2. It shrinks to a card, slides up and out; the page arrives from below
      as a card at the same scale, then opens to full bleed.
   The backdrop sits under .page and the loader card over it, so the three
   layers interleave without extra wrappers (see intro.js for the timing).
   ========================================================================== */

.intro__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro-backdrop);
  background: var(--ink);
}

.intro__card {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro-card);
  display: grid;
  place-items: center;
  /* --bone at 99.8%: to the eye the same card (the page behind it shows
     through by under one colour level), but not opaque to the compositor,
     so the page waiting behind it is rasterised before the swap (intro.js). */
  background: rgb(247 245 242 / 0.998);
  transform-origin: 50% 50%;
  will-change: transform;
}

.intro__brand {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.2vh, 26px);
  width: clamp(128px, 10.5vw, 164px);
}

.intro__logo {
  width: 100%;
  height: auto;
  animation: intro-rise 900ms var(--ease-out) backwards;
}

.intro__meter {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.12);
  animation: intro-rise 900ms 120ms var(--ease-out) backwards;
}

.intro__meter-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.intro__count {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 3svh, 36px);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  animation: intro-fade 700ms 250ms var(--ease-out) backwards;
}

.intro__place {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(18px, 3svh, 36px);
  color: var(--text-faint);
  animation: intro-fade 700ms 250ms var(--ease-out) backwards;
}

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes intro-fade {
  from {
    opacity: 0;
  }
}

/* While the intro runs, the page is a clipped card that intro.js moves.
   The document stays scrollable (scrollbar present) so nothing shifts at
   the hand-off; scroll input is held by the head guard + Lenis.stop(). */
html.is-loading .page {
  position: relative;
  z-index: var(--z-page);
  clip-path: inset(0 0 calc(100% - 100svh) 0);
  transform-origin: 50% 50svh;
}

/* The pointer is held off the page by a clear sheet over it, removed with
   the intro. Not pointer-events on .page: that property is inherited, so
   clearing it at the hand-off restyled all ~1,100 elements in one frame,
   mid-flight (a 25ms task). */
.intro::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-intro-card);
}

/* Hidden states for the intro chrome when it is not running */
.no-js .intro,
.intro-failed .intro,
html.is-ready .intro {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro__logo,
  .intro__meter {
    animation-name: intro-fade;
  }
}