:root {
  --lg-route-accent: #e95f78;
}

#pjax-container {
  transform-origin: 50% 16vh;
  transition:
    opacity 240ms ease,
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    filter 300ms ease;
}

.lg-route-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.72), rgba(255,255,255,.34) 34%, rgba(255,255,255,.18) 68%),
    linear-gradient(135deg, rgba(252,238,242,.3), rgba(233,241,255,.24));
  -webkit-backdrop-filter: blur(0) saturate(1.2);
  backdrop-filter: blur(0) saturate(1.2);
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms,
    backdrop-filter 420ms cubic-bezier(.22, 1, .36, 1),
    -webkit-backdrop-filter 420ms cubic-bezier(.22, 1, .36, 1);
}

.lg-route-curtain::before,
.lg-route-curtain::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
}

.lg-route-curtain::before {
  width: min(72vw, 820px);
  aspect-ratio: 1;
  left: -30vw;
  top: -44vw;
  background: radial-gradient(circle, rgba(255,143,166,.22), transparent 68%);
}

.lg-route-curtain::after {
  width: min(68vw, 760px);
  aspect-ratio: 1;
  right: -30vw;
  bottom: -44vw;
  background: radial-gradient(circle, rgba(119,153,244,.2), transparent 68%);
}

.lg-route-curtain__mark {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 21px;
  color: var(--lg-route-accent);
  background: rgba(255,255,255,.66);
  box-shadow:
    0 18px 48px rgba(77,63,72,.14),
    inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(22px) saturate(1.65);
  backdrop-filter: blur(22px) saturate(1.65);
  opacity: 0;
  transform: translateY(10px) scale(.84) rotate(-8deg);
  transition: opacity 220ms ease, transform 480ms cubic-bezier(.34, 1.56, .64, 1);
}

.lg-route-curtain__mark::before {
  content: "♥";
  font: 700 25px/1 system-ui, sans-serif;
  text-shadow: 0 5px 14px rgba(233,95,120,.24);
}

.lg-route-curtain__mark::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -14px;
  height: 2px;
  border-radius: 10px;
  background: rgba(44,44,51,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.lg-route-curtain__progress {
  position: absolute;
  left: 9px;
  bottom: -14px;
  width: 40px;
  height: 2px;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #ee7289, #778ee8);
}

html.is-route-loading .lg-route-curtain {
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(13px) saturate(1.45);
  backdrop-filter: blur(13px) saturate(1.45);
  transition-delay: 0s;
}

html.is-route-loading .lg-route-curtain__mark {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

html.is-route-loading .lg-route-curtain__progress {
  animation: lg-route-progress 1.2s cubic-bezier(.22, 1, .36, 1) infinite;
}

html.is-route-leaving #pjax-container {
  opacity: .18;
  transform: translateY(8px) scale(.992);
  filter: blur(7px);
}

html.is-route-entering #pjax-container {
  animation: lg-route-enter 560ms cubic-bezier(.22, 1, .36, 1) both;
}

.lg-click-glow {
  position: fixed;
  z-index: 2147482500;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 16%, rgba(233,95,120,.34) 22%, rgba(233,95,120,0) 68%);
  mix-blend-mode: screen;
  animation: lg-click-glow 520ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes lg-route-progress {
  0% { transform: scaleX(0); transform-origin: left; }
  48% { transform: scaleX(1); transform-origin: left; }
  52% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

@keyframes lg-route-enter {
  from { opacity: 0; transform: translateY(12px) scale(.994); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes lg-click-glow {
  from { opacity: .86; transform: scale(.7); }
  to { opacity: 0; transform: scale(8); }
}

@media (max-width: 760px) {
  .lg-route-curtain__mark {
    width: 52px;
    height: 52px;
    border-radius: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pjax-container,
  .lg-route-curtain,
  .lg-route-curtain__mark {
    transition-duration: 1ms !important;
  }
  .lg-route-curtain__progress,
  .lg-click-glow,
  html.is-route-entering #pjax-container {
    animation: none !important;
  }
}