/* A decorative curtain bridges real page loads without changing navigation. */
.page-curtain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--coral);
  border-bottom: 14px solid var(--blush);
  transform: translateY(-105%);
}

@keyframes curtain-arrive {
  from { transform: translateY(0); }
  to { transform: translateY(-105%); }
}

@keyframes curtain-leave {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}

@keyframes page-arrive {
  from { opacity: 0.25; translate: 0 40px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .page-curtain {
    display: block;
    animation: curtain-arrive 700ms cubic-bezier(0.76, 0, 0.24, 1) both;
  }

  html:not(.motion-paused) main {
    animation: page-arrive 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  html.page-leaving:not(.motion-paused) .page-curtain {
    animation: curtain-leave 420ms cubic-bezier(0.76, 0, 0.24, 1) both;
  }

  html.page-leaving:not(.motion-paused) main {
    animation: none;
    opacity: 0.4;
    translate: 0 -24px;
    transition: opacity 420ms ease, translate 420ms ease;
  }

  html.page-restored main,
  html.page-restored .page-curtain {
    animation: none;
  }
}

html.motion-paused main {
  animation: none !important;
  transition: none !important;
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    translate: none;
  }
}