:root {
  --blu-transition-surface: #e7e7e7;
  --blu-transition-enter-ease: cubic-bezier(.22, 1, .36, 1);
  --blu-transition-exit-ease: cubic-bezier(.4, 0, 1, 1);
}

/* The destination is covered before its body parses, preventing an unstyled
   frame without retaining or cloning any imagery from the outgoing page. */
html.blu-transition-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
  background: var(--page-bg, var(--blu-transition-surface));
  opacity: 1;
}

/* Once the DOM overlay is present it becomes the sole transition surface.
   Keeping both layers visible compounds their opacity and creates a flash. */
html.blu-transition-arriving.blu-transition-mounted::before {
  display: none;
}

html.blu-transition-anchor-guard,
html.blu-transition-anchor-guard body {
  overflow-anchor: none;
}

.blu-page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--page-bg, var(--blu-transition-surface));
  opacity: 0;
  visibility: hidden;
  contain: strict;
  transition:
    opacity .14s var(--blu-transition-enter-ease),
    visibility 0s linear .14s;
}

html.blu-transition-leaving .blu-page-transition,
html.blu-transition-arriving .blu-page-transition {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

html.blu-transition-leaving .blu-page-transition {
  transition: opacity .1s var(--blu-transition-exit-ease), visibility 0s;
}

html.blu-transition-arriving .blu-page-transition {
  transition: none;
}

html.blu-transition-arriving.blu-transition-revealing .blu-page-transition {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .16s var(--blu-transition-enter-ease),
    visibility 0s linear .16s;
}

html.blu-transition-arriving.blu-transition-revealing::before {
  opacity: 0;
  transition: opacity .16s var(--blu-transition-enter-ease);
}

html.blu-transition-leaving body {
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  html.blu-transition-arriving::before,
  .blu-page-transition {
    display: none !important;
  }
}