/* Page-enter transition hook — empty by design, drive its animation
   from JS/CSS wherever the transition is implemented. Not a loader. */
.page-transition-in {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 55;
  pointer-events: none;
}

/* Skipped entirely for any logged-in user (WordPress adds this class
   to <body> automatically, see wp_body_open()/body_class() in
   header.php) — this multi-second entrance replays on every single
   reload, which is exactly what gets in the way while an editor is
   repeatedly testing content changes on the front page. */
body.logged-in .page-transition-in {
  display: none;
}

/* Reveal is gated on body.is-hero-video-ready (assets/js/hero-video.js
   adds it once the hero video is actually playing from its
   data-start-time, with a timeout fallback so a blocked autoplay can't
   leave this stuck covering the page forever) instead of @starting-style's
   page-load-time trigger — @starting-style can't wait for that async
   signal, only for first paint. The per-property delays below are now
   relative to that class landing, not to page load. Rest state (below)
   is what @starting-style used to hold — rendered from first paint,
   same as before, just no longer also the trigger for the transition. */
.page-transition-in__shape {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
  box-shadow: inset 0 35svh 0 0svh var(--brand-color-dark), inset 0 -35svh 0 0svh var(--brand-color-dark), inset 10vw 0 0 0vw var(--brand-color-dark), inset -10vw 0 0 0vw var(--brand-color-dark), inset 0 0 0 calc(9vw + var(--theme-line-width)) var(--brand-color-dark);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 1;
  backdrop-filter: blur(var(--theme-blur));

  transition:
    border-width 1.5s var(--theme-ease-signature) 1.5s,
    opacity .5s var(--theme-ease-signature) 5.75s,
    border-color 1s var(--theme-ease-signature) 3.75s,
    scale 1.5s linear 5.5s,
    box-shadow 1.5s 2.5s,
    backdrop-filter 4s var(--theme-ease-signature) 0s;
}

body.is-hero-video-ready .page-transition-in__shape {
  box-shadow: inset 0 0svh 0 var(--theme-section-padding) var(--brand-color-dark), inset 0 -0svh 0 var(--theme-section-padding) var(--brand-color-dark), inset 0vw 0 0 var(--theme-section-padding) var(--brand-color-dark), inset -0vw 0 0 var(--theme-section-padding) var(--brand-color-dark), inset 0 0 0 calc(var(--theme-section-padding) + var(--theme-line-width)) var(--theme-color-border);
  opacity: 0;
  scale: 1.5;
  backdrop-filter: blur(0px);
}

/* left:0/right:0 + text-align:center instead of left:50% +
   translateX(-50%) — the translateX(-50%) trick centers based on the
   element's own (nowrap, auto) width, which Safari has a long-standing
   habit of computing a few px differently than Chrome for text boxes,
   visibly off-center as a result. Centering via a full-width box
   instead sidesteps that — no width-dependent transform math at all,
   only the vertical slide below still needs a transform.

   Visible state is the plain rest state (not @starting-style) for the
   same reason .page-transition-in__shape above isn't either:
   @starting-style only fires reliably if this stylesheet is already
   parsed by the element's first paint — on a slow/cold reload the
   paint can beat the stylesheet, and the transition (and the wordmark
   itself) just silently never appears. Gating the hide/exit on
   body.is-hero-video-ready instead removes that race entirely. */
.page-transition-in__wordmark {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 0 1rem;
  color: var(--brand-color-light);
  font-size: clamp(0.875rem, 3.5vw, 3.25rem);
  font-weight: 100;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity .5s 2.5s var(--theme-ease-signature), transform 1s 2.5s var(--theme-ease-signature);
  padding: 40svh 20vw;
  text-fit: grow;
}

body.is-hero-video-ready .page-transition-in__wordmark {
  opacity: 0;
  transform: translateY(-100%);
}