@charset "UTF-8";
/* ---------------------------------------------------------------------------
   transition.css
   The full-bleed curtain that covers the first paint and every subsequent
   in-site navigation. Two stacked panels: one wipes out on load
   (p-transitionIn), one wipes in before a route change (p-transition).
--------------------------------------------------------------------------- */

.p-transitionContainer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

/* --- Leaving the page ---------------------------------------------------- */
.p-transition {
  position: absolute;
  inset: 0;
  background: var(--c-black, #000);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.p-transition.is-active {
  transform: scaleY(1);
}

/* --- Arriving ------------------------------------------------------------ */
.p-transitionIn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black, #000);
  transform: scaleY(1);
  transform-origin: top center;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.25s;
}

.p-transitionIn.is-hidden {
  transform: scaleY(0);
}

/* Loading counter shown while assets settle. */
.p-transitionIn__count {
  font-family: var(--f-mont, "Montserrat", sans-serif);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.3s linear;
}

.p-transitionIn.is-hidden .p-transitionIn__count {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .p-transition,
  .p-transitionIn {
    transition-duration: 0.01ms;
  }
}