:root {
  --page-transition-duration: 420ms;
  --page-transition-enter-duration: 760ms;
  --page-transition-cover-duration: 760ms;
  --page-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-transition-soft: rgba(247, 241, 234, 0.84);
  --page-transition-strong: rgba(232, 223, 214, 0.98);
  --page-transition-line: rgba(23, 23, 23, 0.14);
  --page-transition-text: rgba(23, 23, 23, 0.7);
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

body.page-transition-enter > :not(.page-transition-layer) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(5px);
}

body.page-transition-enter.page-transition-ready > :not(.page-transition-layer) {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 580ms ease,
    transform var(--page-transition-enter-duration) var(--page-transition-ease),
    filter 620ms ease;
}

body.page-transition-standard.page-transition-out > :not(.page-transition-layer) {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  filter: blur(3px);
  transition:
    opacity 300ms ease,
    transform var(--page-transition-duration) var(--page-transition-ease),
    filter 300ms ease;
}

body.page-transition-out {
  pointer-events: none;
}

.page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.page-transition-veil {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.7), transparent 38%),
    linear-gradient(145deg, var(--page-transition-soft) 0%, rgba(241, 232, 224, 0.94) 55%, var(--page-transition-strong) 100%);
  opacity: 0;
  transform: translate3d(0, 24%, 0) scale(1.03);
  transition:
    opacity 320ms ease,
    transform 680ms var(--page-transition-ease);
}

.page-transition-line {
  position: absolute;
  left: clamp(24px, 9vw, 132px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--page-transition-line) 18%, var(--page-transition-line) 82%, transparent 100%);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition:
    opacity 220ms ease,
    transform 620ms var(--page-transition-ease);
}

.page-transition-title {
  position: absolute;
  left: clamp(28px, 8vw, 144px);
  bottom: clamp(32px, 12vh, 112px);
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(40px, 8vw, 96px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--page-transition-text);
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 320ms ease,
    transform 720ms var(--page-transition-ease);
}

body.page-transition-active .page-transition-layer {
  opacity: 1;
}

body.page-transition-standard.page-transition-out .page-transition-veil {
  opacity: 0.34;
  transform: translate3d(0, 0, 0) scale(1);
}

body.page-transition-cover.page-transition-out .page-transition-veil {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-duration: var(--page-transition-cover-duration);
}

body.page-transition-cover.page-transition-out .page-transition-line {
  opacity: 0.9;
  transform: scaleY(1);
}

body.page-transition-cover.page-transition-out .page-transition-title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.page-transition-enter > :not(.page-transition-layer),
  body.page-transition-enter.page-transition-ready > :not(.page-transition-layer),
  body.page-transition-standard.page-transition-out > :not(.page-transition-layer),
  .page-transition-layer,
  .page-transition-veil,
  .page-transition-line,
  .page-transition-title {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}