.page-transition-card{
  position:relative;
  isolation:isolate;
}

.page-transition-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:calc(100dvh - var(--topbar-height,72px) - 118px);
  min-height:420px;
  z-index:30;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,252,.76), transparent 64%),
    radial-gradient(circle at 50% 18%, rgba(255,248,226,.22), transparent 52%),
    linear-gradient(180deg, rgba(255,254,249,.36), rgba(238,205,139,.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 42px rgba(255,255,248,.34),
    inset 0 0 76px rgba(236,202,137,.08);
  animation:pageMicroPulse 400ms linear both;
}

.page-transition-ghost{
  display:none!important;
}

html.no-motion .page-transition-card,
body.no-motion .page-transition-card,
.no-motion .page-transition-card{
  isolation:auto!important;
}

html.no-motion .page-transition-card::before,
body.no-motion .page-transition-card::before,
.no-motion .page-transition-card::before{
  display:none!important;
}

@keyframes pageMicroPulse{
  0%{
    opacity:0;
  }
  2%{
    opacity:.38;
  }
  6%{
    opacity:.56;
  }
  18%{
    opacity:.5;
  }
  42%{
    opacity:.25;
  }
  72%{
    opacity:.08;
  }
  100%{
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){
  html:not(.page-transition-ignore-reduced-motion) .page-transition-card{
    isolation:auto!important;
  }

  html:not(.page-transition-ignore-reduced-motion) .page-transition-card::before{
    display:none!important;
  }

  html:not(.page-transition-ignore-reduced-motion) .page-transition-ghost{
    display:none!important;
  }
}

@media(max-width:620px){
  .page-transition-card::before{
    height:calc(100dvh - var(--topbar-height,64px) - 96px);
    min-height:520px;
  }
}