/* ================== PAGE TRANSITIONS ================== */
html{
  overflow-x: hidden;
  --page-transition-ms: 320ms;
  --page-transition-ease: cubic-bezier(.22, 1, .36, 1);
  --page-enter-x: 52px;
  --page-enter-y: 0px;
  --page-exit-x: -52px;
  --page-exit-y: 0px;
  --page-overlay-start-x: 100%;
  --page-overlay-start-y: 0%;
  --page-overlay-end-x: -100%;
  --page-overlay-end-y: 0%;
}

html[data-page-transition-dir="backward"]{
  --page-enter-x: -52px;
  --page-enter-y: 0px;
  --page-exit-x: 52px;
  --page-exit-y: 0px;
  --page-overlay-start-x: -100%;
  --page-overlay-start-y: 0%;
  --page-overlay-end-x: 100%;
  --page-overlay-end-y: 0%;
}

html[data-page-transition-dir="up"]{
  --page-enter-x: 0px;
  --page-enter-y: 52px;
  --page-exit-x: 0px;
  --page-exit-y: -52px;
  --page-overlay-start-x: 0%;
  --page-overlay-start-y: 100%;
  --page-overlay-end-x: 0%;
  --page-overlay-end-y: -100%;
}

html[data-page-transition-dir="down"]{
  --page-enter-x: 0px;
  --page-enter-y: -52px;
  --page-exit-x: 0px;
  --page-exit-y: 52px;
  --page-overlay-start-x: 0%;
  --page-overlay-start-y: -100%;
  --page-overlay-end-x: 0%;
  --page-overlay-end-y: 100%;
}

body{
  overflow-x: hidden;
}

body::before{
  content: "";
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.98) 0%, rgba(245,250,252,.98) 52%, rgba(224,242,247,.98) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.03);
  transform: translate3d(var(--page-overlay-start-x), var(--page-overlay-start-y), 0);
  opacity: 0;
}

main{
  position: relative;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

html.page-enter body::before,
html.page-leave body::before{
  opacity: 1;
}

html.page-enter body::before{
  transform: translate3d(0, 0, 0);
  animation: page-overlay-reveal var(--page-transition-ms) var(--page-transition-ease) both;
}

html.page-leave body::before{
  animation: page-overlay-cover var(--page-transition-ms) var(--page-transition-ease) both;
}

html.page-enter main{
  animation: page-content-enter var(--page-transition-ms) var(--page-transition-ease) both;
}

html.page-leave main{
  pointer-events: none;
  animation: page-content-leave 240ms var(--page-transition-ease) both;
}

@keyframes page-content-enter{
  from{
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(var(--page-enter-x), var(--page-enter-y), 0) scale(.985);
  }
  to{
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes page-content-leave{
  from{
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  to{
    opacity: .18;
    filter: blur(6px);
    transform: translate3d(var(--page-exit-x), var(--page-exit-y), 0) scale(.985);
  }
}

@keyframes page-overlay-cover{
  from{
    transform: translate3d(var(--page-overlay-start-x), var(--page-overlay-start-y), 0);
  }
  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes page-overlay-reveal{
  from{
    transform: translate3d(0, 0, 0);
  }
  to{
    transform: translate3d(var(--page-overlay-end-x), var(--page-overlay-end-y), 0);
  }
}

@media (prefers-reduced-motion: reduce){
  html.page-enter body::before,
  html.page-leave body::before,
  html.page-enter main,
  html.page-leave main{
    animation: none !important;
  }

  body::before{
    display: none;
  }
}