/* ==========================================================================
   FEEDER - CINEMATIC PAGE TRANSITION
   Subtle premium reveal: content inhales and exhales between pages.
   No visible vortex, no decoration particles. Only light, depth and blur.
   ========================================================================== */

/* Initial loading state: the page is held in a soft, blurred frame
   until the cinematic entrance plays. */
html.is-page-loading body {
  opacity: 0;
  transform: translateY(24px) scale(1.045);
  filter: brightness(0.55) blur(14px);
  will-change: transform, opacity, filter;
}

/* Exit state: the whole page is dimmed, zoomed and heavily blurred
   while an ambient dark gradient closes around the center. */
html.is-page-exiting body {
  opacity: 0.25;
  transform: translateY(-30px) scale(1.08);
  filter: brightness(0.25) blur(22px);
  will-change: transform, opacity, filter;
}

/* A subtle ambient shade that breathes with the content.
   It is injected by JS only during exit. */
.page-transition-shade {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(3, 5, 10, 0) 0%,
    rgba(3, 5, 10, 0.45) 55%,
    rgba(3, 5, 10, 0.92) 100%
  );
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, background-size;
}

/* Respect reduced motion: instant, no filters. */
@media (prefers-reduced-motion: reduce) {
  html.is-page-loading body,
  html.is-page-exiting body {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .page-transition-shade {
    display: none !important;
  }
}