/* Zille page transition prototype: isolated from the site's layout styles. */
#zille-page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  background: var(--zille-black, #0d0d0d);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}

#zille-page-transition::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--zille-yellow, #fbb800);
  content: "";
  transform: scaleX(0.18);
  transform-origin: left center;
}

html.zille-transition-enter #zille-page-transition {
  visibility: visible;
  pointer-events: auto;
  transform: scaleY(1);
  transform-origin: 50% 0;
  animation: zille-transition-enter-fallback 0.8s ease-in-out forwards;
}

@keyframes zille-transition-enter-fallback {
  to {
    visibility: hidden;
    pointer-events: none;
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #zille-page-transition {
    display: none;
  }
}