.route-cover {
  position: fixed;
  inset: 0 auto auto 0;
  width: var(--route-width, 100vw);
  height: var(--route-height, 100dvh);
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
  overflow: clip;
  isolation: isolate;
}
.route-cover__panel {
  position: absolute;
  inset: 0;
  display: block;
  background: #4a00e0;
  transform: translate3d(0, 100%, 0);
}
.route-cover > img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: var(--route-logo-width, clamp(180px, 24vw, 280px));
  height: auto;
  aspect-ratio: 316 / 132;
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
}
html:is(.is-route-leaving, .is-route-arriving) .route-cover {
  visibility: visible;
  pointer-events: auto;
}
html:is(.is-route-leaving, .is-route-arriving) .route-cover__panel {
  will-change: transform;
}
html.is-route-arriving .route-cover__panel { transform: translate3d(0, 0, 0); }
html.is-route-arriving .route-cover > img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .route-cover { visibility: hidden !important; pointer-events: none !important; }
}