/* Purpose: Page loader — full-screen emerald curtain with the brand, a counter and a
   progress line. Driven by initLoader() in animations.js: counts 0→100, then lifts up to
   reveal the page while the hero intro (paused via html.wv-loading) begins. */

.wv-loader {
  position: fixed; inset: 0; z-index: 100000;
  background: var(--cream);
  display: grid; place-items: center;
  will-change: transform;
}
.wv-loader__inner { display: grid; justify-items: center; gap: 22px; }
/* The hypnosis spiral from the logo (crisp vector) — scaled small → big by initLoader(). */
.wv-loader__mark {
  width: clamp(96px, 15vw, 148px); height: auto;
  will-change: transform;
}
.wv-loader__count {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em;
  color: var(--emerald);
}

/* While loading: lock scroll and freeze the hero intro + nav drop so they play in sync
   the moment the curtain lifts (JS removes .wv-loading). */
html.wv-loading { overflow: hidden; }
html.wv-loading .section-hero__video,
html.wv-loading .section-hero__img,
html.wv-loading .section-hero__eyebrow,
html.wv-loading .section-hero__title,
html.wv-loading .section-hero__sub,
html.wv-loading .section-hero__ctas,
html.wv-loading .site-header { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .wv-loader { transition: none; }
}