/* ============================================================
   PAGE TRANSITIONS — liquid/glass veil + enter choreography
   Internal navigation triggers a soft liquid wipe; the arriving
   page enters with a calm cinematic fade-rise + stagger.
   ============================================================ */

/* Transition veil (injected by JS) */
#transition-veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 90% at var(--vx, 50%) var(--vy, 50%),
      rgba(20, 108, 110, 0.55) 0%,
      rgba(15, 61, 62, 0.88) 45%,
      rgba(7, 26, 27, 0.97) 100%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity var(--motion-normal) var(--ease-soft),
              backdrop-filter var(--motion-slow) var(--ease-soft);
}
#transition-veil.cover {
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity var(--motion-normal) var(--ease-soft),
              backdrop-filter var(--motion-slow) var(--ease-soft);
}

/* Exiting content sinks slightly under the veil */
body.leaving .page-content {
  opacity: 0.25;
  transform: translateY(-8px) scale(0.995);
  filter: blur(2px);
  transition: opacity var(--motion-normal) var(--ease-soft),
              transform var(--motion-normal) var(--ease-soft),
              filter var(--motion-normal) var(--ease-soft);
}

/* Arriving content: base pageEnter (base.css) + richer choreography */
body.arriving .page-content {
  animation: pageArrive var(--motion-cinema) var(--ease-out-expo) both;
}
@keyframes pageArrive {
  0%   { opacity: 0; transform: translateY(14px) scale(0.996); filter: blur(3px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Staggered choreography for hero/page-hero + section children */
body.arriving .hero-badge,
body.arriving .page-hero h1,
body.arriving .page-hero .breadcrumb {
  animation: arriveItem var(--motion-slow) var(--ease-out-expo) both;
}
body.arriving .hero-badge        { animation-delay: 0.08s; }
body.arriving .breadcrumb        { animation-delay: 0.05s; }
body.arriving .page-hero h1      { animation-delay: 0.14s; }
body.arriving .hero h1           { animation-delay: 0.12s; }
body.arriving .hero .lede        { animation-delay: 0.2s; }
body.arriving .hero-ctas         { animation-delay: 0.28s; }
body.arriving .hero-visual       { animation-delay: 0.24s; }
body.arriving .page-hero .lede   { animation-delay: 0.22s; }

@keyframes arriveItem {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Native View Transitions API support (progressive enhancement) */
::view-transition-old(root) {
  animation: vtOut var(--motion-normal) var(--ease-soft) both;
}
::view-transition-new(root) {
  animation: vtIn var(--motion-slow) var(--ease-out-expo) both;
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px) scale(0.997); filter: blur(2px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px) scale(0.997); filter: blur(3px); } }

/* Reduced motion: transitions become plain cuts */
@media (prefers-reduced-motion: reduce) {
  #transition-veil { display: none; }
  body.leaving .page-content,
  body.arriving .page-content { animation: none; transition: none; opacity: 1; transform: none; filter: none; }
  body.arriving .hero-badge, body.arriving .page-hero h1, body.arriving .page-hero .breadcrumb,
  body.arriving .hero h1, body.arriving .hero .lede, body.arriving .hero-ctas,
  body.arriving .hero-visual, body.arriving .page-hero .lede { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}