/* ─────────────────────────────────────────────
   Page transition — radial ink wipe from click point
   Coordinated with shared/page-transition.js
   ───────────────────────────────────────────── */

/* The exit veil — sits over home, animates a radial ink wash from a
   user-supplied (--ox, --oy) origin. */
.pt-exit {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: var(--ink, #06050a);
  /* start as a tiny circle at the origin, expand outward to cover screen */
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  -webkit-clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1),
              -webkit-clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.pt-exit.go {
  clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
  -webkit-clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
  pointer-events: auto;
}

/* faint warm halo riding just inside the ink front so the wipe has a soft edge */
.pt-exit::before {
  content: '';
  position: absolute; inset: -10%;
  background: radial-gradient(
    circle at var(--ox, 50%) var(--oy, 50%),
    rgba(232, 162, 113, 0.18) 0%,
    rgba(217, 123, 61, 0.12) 18%,
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.pt-exit.go::before { opacity: 1; }

/* ── ENTRY ── reverse: page is masked to a small circle at origin, grows out */
body.pt-entering {
  /* prevent the user from scrolling/clicking the half-revealed page */
  overflow: hidden !important;
}
.pt-enter-mask {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: var(--ink, #06050a);
  clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
  -webkit-clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
}
.pt-enter-mask.run {
  /* shrink the mask away to reveal the page from the entry point outward */
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  -webkit-clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* warm halo on the inside of the shrinking mask — leaves a brief saffron glow
   at the entry point as the page reveals */
.pt-enter-mask::before {
  content: '';
  position: absolute; inset: -10%;
  background: radial-gradient(
    circle at var(--ox, 50%) var(--oy, 50%),
    rgba(232, 162, 113, 0.22) 0%,
    rgba(217, 123, 61, 0.12) 14%,
    transparent 40%
  );
  opacity: 1;
  transition: opacity 0.85s ease-out;
  pointer-events: none;
}
.pt-enter-mask.run::before { opacity: 0; }

/* small orange spark at the origin — pops the entry point */
.pt-spark {
  position: fixed;
  z-index: 9001;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff8ef;
  box-shadow:
    0 0 12px #e8a271,
    0 0 32px #d97b3d,
    0 0 64px rgba(217, 123, 61, 0.6);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  opacity: 0;
}
.pt-spark.fire {
  animation: pt-spark-pulse 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pt-spark-pulse {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

/* Fallback gentle fade-up for pages loaded WITHOUT a stashed origin
   (direct URL, refresh, deep-link). The clip-path entry handles
   navigated-from-app cases; element-level entry animations on each page
   (.bar, .stage, etc.) handle their own staged appear, so we don't need
   to fade the whole body. */

@media (prefers-reduced-motion: reduce) {
  .pt-exit, .pt-enter-mask {
    transition: opacity 0.2s ease !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    opacity: 0;
  }
  .pt-exit.go { opacity: 1; }
  .pt-spark { display: none; }
}