/* ============================================================================
   Informed Software Solutions — motion.css  (shared, appendable motion layer)
   ----------------------------------------------------------------------------
   Owned by the motion-choreography pass. Linked on EVERY page AFTER the page
   CSS line, so it sits last in the cascade without touching the frozen shared
   files (tokens / base / components / product). Consumes design tokens only.

   Contents:
     1. Page-transition ridge wipe overlay (.page-wipe)

   Everything here is inert until JS (animations.js) creates the element and
   adds the .is-active hook AFTER confirming motion is allowed. No-JS and
   reduced-motion users never see the overlay (it is display:none until JS
   activates it, and JS skips activation entirely under reduced motion).
   ========================================================================== */

/* ===========================================================================
   1. PAGE-TRANSITION RIDGE WIPE
   A brand-navy panel that sweeps across the viewport on internal navigations,
   led by a thin beacon ridge accent. JS sets the transform (xPercent) via
   GSAP; this file only paints the panel + accent and keeps it above all UI.
   =========================================================================== */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);          /* above header, flyout, cursor, menu */
  display: none;                     /* JS flips to block when navigating */
  background-color: var(--navy-900);
  /* faint fingerprint-ridge texture: concentric hairlines in navy-700, so the
     panel reads as "evidence surface" rather than a flat block. Pure tokens
     via color-mix; no raw hex. */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 46px,
      color-mix(in srgb, var(--navy-700) 60%, transparent) 46px,
      color-mix(in srgb, var(--navy-700) 60%, transparent) 47px
    );
  will-change: transform;
  pointer-events: none;              /* never traps clicks mid-transition */
}

/* Leading accent ridge — a vertical beacon bar riding the panel's right edge
   as it sweeps in, so the wipe has a clear forensic "scan line". */
.page-wipe__accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      var(--beacon-500) 22%,
      var(--beacon-400) 50%,
      var(--beacon-500) 78%,
      transparent 100%
    );
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--beacon-500) 55%, transparent);
}

/* When the overlay is active it must paint even though the base rule is
   display:none — JS sets display:block inline, but mirror the intent here so
   the panel is opaque and full-bleed whenever .is-active is present. */
.page-wipe.is-active {
  display: block;
}

/* Hard stop for anyone who reaches this file with reduced motion: the wipe is
   purely decorative and must never delay or obscure navigation. */
@media (prefers-reduced-motion: reduce) {
  .page-wipe {
    display: none !important;
  }
}
.no-motion .page-wipe {
  display: none !important;
}