:root {
  --page-transition-duration: 300ms;
  --page-transition-ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --reveal-duration: 420ms;
  --reveal-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
}

html.page-transition-enabled body {
  opacity: 0;
  transform: translateY(12px) scale(0.994);
  filter: blur(5px);
  transition:
    opacity var(--page-transition-duration) var(--page-transition-ease),
    transform var(--page-transition-duration) var(--page-transition-ease),
    filter var(--page-transition-duration) var(--page-transition-ease);
}

html.page-transition-enabled body.is-loaded {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

html.page-transition-enabled body.is-leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.992);
  filter: blur(4px);
}

html.page-transition-enabled .reveal-card {
  opacity: 0;
  transform: translateY(18px) scale(0.992);
  filter: blur(4px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--delay, 0ms);
}

html.page-transition-enabled body.is-loaded .reveal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  html.page-transition-enabled body,
  html.page-transition-enabled body.is-loaded,
  html.page-transition-enabled body.is-leaving,
  html.page-transition-enabled .reveal-card,
  html.page-transition-enabled body.is-loaded .reveal-card {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}