/* ═══════════════════════════════════════════════════════════════════════════════
   THE DIGITAL VAULT — OPACITY PAGE TRANSITIONS (FADE-IN / FADE-OUT)
   The current page gently dissolves into transparency while the new page fades in.
   Clean, fast (<240ms), seamless SPA-like crossfade.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Native CSS View Transitions API (Chrome 111+, Edge, Safari 18+) ── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both fadeOutView;
}

::view-transition-new(root) {
  animation: 240ms cubic-bezier(0, 0, 0.2, 1) both fadeInView;
}

@keyframes fadeOutView {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.996);
  }
}

@keyframes fadeInView {
  from {
    opacity: 0;
    transform: scale(1.004);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Universal Smooth Opacity Transition ── */
body {
  opacity: 1;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Page Entrance Dissolve In */
body.page-enter {
  animation: pageFadeIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page Exit Dissolve Out (Clean gentle dissolution into transparency) */
body.page-leaving {
  opacity: 0 !important;
  transform: translateY(-4px) scale(0.996) !important;
  pointer-events: none !important;
  transition: opacity 0.20s cubic-bezier(0.4, 0, 0.2, 1), transform 0.20s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  body,
  body.page-enter,
  body.page-leaving {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}