/* 1.13 — fluid staged wipe: veil hides document swap; coast to rest (no hard stop). */

.page-portal {
  position: fixed;
  top: var(--portal-top, var(--header, 80px));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
}

.portal-depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(247, 244, 239, 0.72) 42%,
    rgba(247, 244, 239, 0.92) 100%
  );
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-face,
.portal-sheen {
  display: none !important;
}

.site-header { z-index: 60; }

.is-transitioning .page-portal,
html.portal-arrival .page-portal {
  visibility: visible;
}

.is-transitioning .portal-depth {
  opacity: 1;
  transition-duration: 0.32s;
}

html.portal-arrival .portal-depth {
  opacity: 1;
  transition: none;
}

html.portal-arrival.portal-settled .portal-depth {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exit — finishes under veil before navigate */
.is-transitioning main .portal-exit {
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) var(--portal-delay, 0ms),
    transform 0.48s cubic-bezier(0.25, 0.8, 0.25, 1) var(--portal-delay, 0ms),
    filter 0.4s cubic-bezier(0.4, 0, 0.2, 1) var(--portal-delay, 0ms);
  opacity: 0;
  filter: blur(0.4px);
  pointer-events: none;
  will-change: opacity, transform;
}

html[data-portal-sense="forward"] main .portal-exit {
  transform: translate3d(-18px, -6px, 0);
}

html[data-portal-sense="back"] main .portal-exit {
  transform: translate3d(18px, -6px, 0);
}

/* Arrival — longer coast */
html.portal-arrival main .portal-item {
  opacity: 0;
  animation: portal-enter-forward 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--portal-delay, 0ms) both;
  will-change: opacity, transform;
}

html.portal-arrival[data-portal-sense="back"] main .portal-item {
  animation-name: portal-enter-back;
}

html.portal-settled main .portal-item {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  will-change: auto;
}

@keyframes portal-enter-forward {
  0% {
    opacity: 0;
    transform: translate3d(16px, 18px, 0);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes portal-enter-back {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 18px, 0);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.motion-reduced .page-portal,
.motion-reduced main .portal-exit,
.motion-reduced main .portal-item {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-portal,
  main .portal-exit,
  main .portal-item {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}