/* =========================================================
   Qurikvoy — page-change transition (all public pages)
   New page is revealed with a soft diagonal wipe (bottom-left → top-right),
   led by a band in the brand colours (navy → blue → rust).
   Uses cross-document View Transitions: Chrome/Edge 126+, Safari 18.2+.
   Other browsers simply open the page normally — nothing breaks.
   Speed: change 0.8s below (both animations).

   How the colour band works (no extra HTML needed):
     layer 1  ::view-transition-group(root)  → brand gradient background
     layer 2  old page  → erased a little AHEAD of the wipe edge
     layer 3  new page  → revealed up to the wipe edge
   The thin gap between the two edges shows the brand gradient.
   ========================================================= */

/* 1. Turn on transitions between pages of this site */
@view-transition {
  navigation: auto;
}

/* 2. Wipe progress (0 → 1) read by the masks */
@property --wipe {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes qv-wipe-in {
  from { --wipe: 0; }
  to   { --wipe: 1; }
}

/* Brand colours behind both pages (seen only in the band) */
::view-transition-group(root) {
  background: linear-gradient(50deg, #001d36 0%, #005a9a 38%, #2373ba 64%, #bf4b0e 100%);
}

/* Old page: stays put, its leading edge dissolves just ahead of the new page */
::view-transition-old(root) {
  animation: qv-wipe-in 0.8s cubic-bezier(0.27, 0, 0.51, 1) both;
  -webkit-mask-image: linear-gradient(50deg,
    transparent calc(-2% + 130% * var(--wipe)),
    #000 calc(9% + 130% * var(--wipe)));
          mask-image: linear-gradient(50deg,
    transparent calc(-2% + 130% * var(--wipe)),
    #000 calc(9% + 130% * var(--wipe)));
}

/* New page: feathered diagonal mask sweeping in */
::view-transition-new(root) {
  animation: qv-wipe-in 0.8s cubic-bezier(0.27, 0, 0.51, 1) both;
  -webkit-mask-image: linear-gradient(50deg,
    #000 calc(-30% + 130% * var(--wipe)),
    transparent calc(130% * var(--wipe)));
          mask-image: linear-gradient(50deg,
    #000 calc(-30% + 130% * var(--wipe)),
    transparent calc(130% * var(--wipe)));
}

/* 3. Respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root),
  ::view-transition-old(root) {
    animation: none !important;
    -webkit-mask-image: none;
            mask-image: none;
  }
  ::view-transition-group(root) {
    background: none;
  }
}