/* ============ PAGE TRANSITION OVERLAY ============
    Reuses the loader's own visual language (same background token,
    same clip-path wipe, same easing) so navigating between pages
    feels like part of the same system rather than a bolted-on router. */

  .page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--c-bg);
    pointer-events: none;
    clip-path: inset(0 0 100% 0); /* hidden by default */
  }

  .page-transition-overlay.covering {
    animation: pt-cover 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  }
  .page-transition-overlay.revealing {
    animation: pt-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes pt-cover {
    from {
      clip-path: inset(0 0 100% 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  @keyframes pt-reveal {
    from {
      clip-path: inset(0 0 0 0);
    }
    to {
      clip-path: inset(100% 0 0 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-transition-overlay,
    .page-transition-overlay.covering,
    .page-transition-overlay.revealing {
      animation: none !important;
      clip-path: inset(0 0 100% 0) !important;
    }
  }