/* ============================================================
   world-portal.css
   Page-to-page color portal transition for switching worlds
   (Coin <-> Pulse). Two phases:

   1. DEPARTURE — clicked element triggers a colored circle that
      bursts from the click point and expands to cover the screen.
      Once the cover is full, JS navigates to the destination page.

   2. ARRIVAL  — the destination page sees a sessionStorage flag,
      pre-applies html.wp-arriving + a CSS color var, and the
      inline <style> in the page head (which loads before paint)
      paints a full-screen colored cover with clip-path: circle(150%).
      The cover then animates clip-path -> circle(0) to reveal the
      new page from the center outward.

   The arrival keyframes live INLINE in the page head (critical
   path) so there's no flash of unstyled content. This file only
   contains the departure animation + reduced-motion handling.
   ============================================================ */

.wp-portal {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%) scale(0);
  width: 24px;
  height: 24px;
  will-change: transform;
}

.wp-portal.wp-expanding {
  animation: wpExpand 600ms cubic-bezier(.7, 0, .3, 1) forwards;
}

@keyframes wpExpand {
  to { transform: translate(-50%, -50%) scale(240); }
}

/* Reduced motion: skip the animation entirely. JS also short-circuits to a
   direct navigation when prefers-reduced-motion is set. */
@media (prefers-reduced-motion: reduce) {
  .wp-portal,
  html.wp-arriving::before {
    display: none !important;
    animation: none !important;
  }
}