:root {
  --page-transition-duration: 300ms;
  --page-transition-ease: cubic-bezier(.76, 0, .24, 1);
}

html {
  background: #FFF7FB;
  overflow-x: clip;
}

body { overflow-x: clip; }

html::before,
html::after {
  content: "";
  position: fixed;
  inset: -10vh 0;
  z-index: 9998;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, -120%, 0) skewY(-2deg) scaleY(1.1);
}

html::before {
  background:
    radial-gradient(circle at 18% 78%, rgba(252, 84, 144, .17), transparent 31%),
    radial-gradient(circle at 82% 25%, rgba(12, 192, 216, .18), transparent 29%),
    #FFF7FB;
}

html::after {
  z-index: 9999;
  background:
    radial-gradient(circle at 20% 70%, rgba(255, 255, 255, .34), transparent 24%),
    linear-gradient(125deg, #FC5490 0%, #C15CCE 48%, #0CC0D8 100%);
  box-shadow: 0 26px 70px rgba(53, 21, 45, .22);
}

html.page-entering::after {
  animation: carol-curtain-reveal .25s var(--page-transition-ease) .01s both;
}

html.page-entering::before {
  animation: carol-curtain-reveal .28s var(--page-transition-ease) .02s both;
}

html.page-entering body {
  animation: carol-content-enter .3s cubic-bezier(.16, 1, .3, 1) both;
}

html.page-leaving::before {
  animation: carol-curtain-cover .27s var(--page-transition-ease) both;
}

html.page-leaving::after {
  animation: carol-curtain-cover .24s var(--page-transition-ease) .03s both;
}

html.page-leaving body {
  opacity: .25;
  filter: blur(5px);
  transform: translate3d(0, -18px, 0) scale(.982);
  transition:
    opacity .21s ease,
    filter .23s ease,
    transform .26s cubic-bezier(.32, 0, .15, 1);
  pointer-events: none;
}

@keyframes carol-curtain-reveal {
  0% { transform: translate3d(0, 0, 0) skewY(-2deg) scaleY(1.1); }
  100% { transform: translate3d(0, -120%, 0) skewY(-2deg) scaleY(1.1); }
}

@keyframes carol-curtain-cover {
  0% { transform: translate3d(0, 120%, 0) skewY(-2deg) scaleY(1.1); }
  100% { transform: translate3d(0, 0, 0) skewY(-2deg) scaleY(1.1); }
}

@keyframes carol-content-enter {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 24px, 0) scale(.982);
  }
  58% { filter: blur(0); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after { display: none; }

  html.page-entering body,
  html.page-leaving body {
    animation: none;
    transition: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}