/* =========================================================
   Page Transition — a full-viewport overlay used for every
   internal navigation across the site (see js/page-transition.js).
   Two moments:
     "entering" -> "entered"  : overlay covers the incoming page on
                                 first paint, then slides up and out
                                 to reveal it (page load / arrival).
     "idle"     -> "leaving"  : on an internal link click, a fresh
                                 overlay slides up from the bottom to
                                 cover the viewport before navigating
                                 away (page departure).
   A deep, near-black aurora backdrop (darker and richer than any
   page behind it) with a slowly drifting color wash, an orbiting
   dual-ring halo around the pulsing brand mark, and a three-dot
   progress pulse — built from the same visual vocabulary as the
   site's own seals/orbits (orbitSpin) and story-bg aurora, just
   condensed into a fast, focused loading moment.
========================================================== */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pt-bg, #04060c);
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), background 0.3s ease;
}

/* Drifting aurora wash — several soft color blooms slowly orbiting
   behind the mark, layered over a base that always reads richer/
   deeper than the page it is covering (near-black in Dark, a soft
   tinted wash over near-white in Light — see --pt-bloom-* in
   css/style.css, restrained a lot further for Light so it never
   reads as a colorful flash against the site's own white pages). */
.page-transition::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(38% 30% at 18% 22%, var(--pt-bloom-1, rgba(123, 92, 240, 0.32)), transparent 65%),
    radial-gradient(34% 28% at 82% 20%, var(--pt-bloom-2, rgba(47, 176, 196, 0.26)), transparent 65%),
    radial-gradient(42% 34% at 50% 88%, var(--pt-bloom-3, rgba(47, 125, 196, 0.30)), transparent 65%),
    radial-gradient(30% 24% at 88% 82%, var(--pt-bloom-4, rgba(91, 47, 214, 0.22)), transparent 65%);
  filter: blur(6px);
  animation: ptAuroraDrift 9s ease-in-out infinite;
}
/* Fine vignette + subtle grain-like edge darkening so the color
   wash never looks flat, matching story-bg's own vignette layer. */
.page-transition::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(var(--pt-vignette-rgb, 0,0,0), var(--pt-vignette-alpha, 0.55)) 100%);
  pointer-events: none;
}

@keyframes ptAuroraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, -2.5%, 0) scale(1.06); }
}

/* Freshly loaded page: overlay is covering, about to lift away */
.page-transition[data-state="entering"] { transform: translateY(0); }
/* Revealed: parked off-screen above the viewport */
.page-transition[data-state="entered"]  { transform: translateY(-100%); pointer-events: none; }
/* About to navigate away: slide fully in from below */
.page-transition[data-state="leaving"]  { transform: translateY(0); }
/* Parked off-screen below, ready to be pulled up on the next click */
.page-transition[data-state="idle"]     { transform: translateY(100%); pointer-events: none; transition: none; }

.page-transition-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.5s ease 0.12s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s;
}
.page-transition[data-state="entering"] .page-transition-mark,
.page-transition[data-state="leaving"] .page-transition-mark {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Orbit halo: soft glow + two counter-rotating dashed rings
   around the logo, echoing .about-banner-seal / .whyus-seal's
   orbitSpin motif elsewhere on the site. ---- */
.pt-orbit {
  position: relative;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-orbit-glow {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pt-bloom-1, rgba(122, 92, 240, 0.55)), var(--pt-bloom-2, rgba(47, 176, 196, 0.18)) 55%, transparent 72%);
  filter: blur(10px);
  animation: ptGlowPulse 2.2s ease-in-out infinite;
}
.pt-orbit-ring {
  position: absolute;
  inset: 0;
  color: var(--pt-ring, rgba(255, 255, 255, 0.5));
}
.pt-orbit-ring--outer { animation: ptSpin 5.5s linear infinite; }
.pt-orbit-ring--inner { inset: 16px; color: var(--accent-ink, #5b8fe0); animation: ptSpinReverse 4s linear infinite; opacity: 0.8; }
.pt-orbit-ring svg { width: 100%; height: 100%; }

.page-transition-logo {
  position: relative;
  z-index: 1;
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 14px var(--pt-logo-glow, rgba(122, 92, 240, 0.45)));
  animation: ptPulse 1.6s ease-in-out infinite;
}

/* ---- Three-dot progress pulse, replacing the old sliding bar ---- */
.pt-dots { display: flex; align-items: center; gap: 8px; }
.pt-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pt-dot-a, #7a5cf0), var(--pt-dot-b, #2fb0c4));
  opacity: 0.35;
  animation: ptDot 1.1s ease-in-out infinite;
}
.pt-dots span:nth-child(2) { animation-delay: 0.15s; }
.pt-dots span:nth-child(3) { animation-delay: 0.3s; }

.page-transition-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pt-label, rgba(255, 255, 255, 0.4));
}

@keyframes ptPulse { 0%, 100% { opacity: 0.88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes ptGlowPulse { 0%, 100% { opacity: 0.6; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ptSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ptSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes ptDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { transition: opacity 0.25s ease; transform: none !important; opacity: 1; }
  .page-transition[data-state="entered"] { opacity: 0; pointer-events: none; }
  .page-transition[data-state="idle"] { opacity: 0; pointer-events: none; }
  .page-transition[data-state="leaving"] { opacity: 1; }
  .page-transition::before { animation: none; }
  .page-transition-logo { animation: none; filter: none; }
  .pt-orbit-glow, .pt-orbit-ring--outer, .pt-orbit-ring--inner { animation: none; }
  .pt-dots span { animation: none; opacity: 0.7; }
}