:root {
  --mukani-transition-duration: 220ms;
  --mukani-transition-ease: cubic-bezier(.45, 0, .2, 1);
}

.mukani-page-transition {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  overflow: hidden;
  background: #090909;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mukani-transition-duration) var(--mukani-transition-ease),
    visibility 0s linear var(--mukani-transition-duration);
}

.mukani-page-transition__mark {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1;
  opacity: .96;
  transform: translateX(.09em);
}

html.mukani-leaving .mukani-page-transition,
html.mukani-arriving .mukani-page-transition {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Covers the first streamed body bytes until wp_body_open emits the overlay. */
html.mukani-arriving body::before {
  position: fixed;
  z-index: 2147483645;
  inset: 0;
  display: block;
  background: #090909;
  content: "";
}

.mukani-lazy {
  background-color: #efefed;
  opacity: 0;
  transition: opacity 320ms ease;
}

.mukani-lazy.loaded,
.mukani-lazy.applied {
  background-color: transparent;
  opacity: 1;
}

.mukani-lazy.error {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mukani-page-transition,
  .mukani-lazy {
    transition: none !important;
  }
}