/* ---------- the global page transition ----------
   A WIPE. In one continuous move (client, 2026-09-01):

     1. the content of the page you are leaving moves UP
     2. a panel sweeps up from the bottom edge and covers it
     3. the panel carries on and exits off the top edge
     4. the arriving page's content slides up from under it

   THERE IS NO WIPE ELEMENT, AND THERE DOES NOT NEED TO BE. A panel travelling
   over the content is the same picture as the content being CLIPPED away by an
   edge that moves bottom-to-top, with the panel's colour showing behind it. So
   the "panel" is a background on `::view-transition` — the root of the overlay
   tree, which sits behind both page snapshots — and the moving edge is a
   `clip-path: inset()` animated on each snapshot.

   That matters for more than tidiness: a real element would have to exist in
   every page's markup, be hidden during normal browsing, and be given a
   `view-transition-name` whose group animates between two positions that are
   IDENTICAL in both documents — which would not move at all. The clip does the
   whole thing with no DOM and no per-page work.

   Reading the two halves:
     leaving   `inset(0 0 B 0)`, B: 0 -> 100%   the panel's TOP edge rising,
                                                content surviving above it
     arriving  `inset(T 0 0 0)`, T: 100% -> 0   the panel's BOTTOM edge rising,
                                                content revealed below it

   The two are SEQUENTIAL, which is what makes it read as ONE panel crossing
   the screen rather than two effects. Run together it is a cross-dissolve —
   that version was built first and rejected. */

/* The panel's colour. It is the page ground, so the wipe reads as the site's
   own surface passing over rather than as a foreign sheet; one line to change
   if it should be lime instead. */
::view-transition {
  background: var(--rdk-black-green, #001407);
}

/* THE MOVE AND THE WIPE ARE TWO SEPARATE ANIMATIONS ON THE SAME PSEUDO, AND
   THAT IS WHAT FIXES THE JERK.

   They were one multi-stop keyframes block, which applies the easing PER
   SEGMENT — a `cubic-bezier(0.65, 0, 0.35, 1)` eased in AND out of the 40%
   mark, then in and out again to 100%. Two accelerations with a stop between
   them (client, 2026-09-01: "it moves up, then moves up again"). I had written
   that up as a feature; it reads as a stutter.

   Split into two animations, each property gets exactly two stops and its own
   clock: the transform is ONE continuous curve for the whole duration, and the
   clip simply starts later. Same sequencing, no stutter. Any property that has
   to move continuously gets two stops — if it needs different timing from a
   neighbour, give it its own animation rather than another keyframe. */
@keyframes rdk-leave-move {
  from { transform: translateY(0); }
  to   { transform: translateY(-22%); }
}

@keyframes rdk-leave-wipe {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}

@keyframes rdk-enter-move {
  from { transform: translateY(14%); }
  to   { transform: translateY(0); }
}

@keyframes rdk-enter-wipe {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* NO OPACITY ON EITHER. The content is COVERED, not faded — fading it as well
   makes the panel look translucent and the whole thing turns back into a
   dissolve.

   THE LEAVING PAGE MOVES AS ONE BLOCK, deliberately (client, 2026-09-01, after
   re-checking the reference: "everything is moving up and off the page
   together but then it staggers when it slides up to appear"). An earlier pass
   tried to stagger this half with a `scaleY` about the top edge and it was
   wrong on both counts — it is not what the reference does, and a uniform
   squash is not a stagger anyway. The stagger belongs to the ARRIVAL, and it
   comes from the arriving page's own content entrances, not from here: a
   snapshot is one flat image and cannot be staggered from inside. */
::view-transition-old(root) {
  animation:
    rdk-leave-move 0.66s cubic-bezier(0.45, 0, 0.75, 0.15) both,
    rdk-leave-wipe 0.42s 0.24s cubic-bezier(0.65, 0, 0.35, 1) both;
  /* The leaving page paints ABOVE the arriving one, or the wipe happens behind
     it and is invisible. Stated so a later edit cannot silently reorder them. */
  z-index: 1;
}

/* The rise runs LONGER than the uncover and outlasts it, so the page is still
   arriving after the panel has gone rather than being finished the moment it
   is revealed. */
::view-transition-new(root) {
  animation:
    rdk-enter-move 0.78s 0.66s cubic-bezier(0.16, 1, 0.3, 1) both,
    rdk-enter-wipe 0.42s 0.66s cubic-bezier(0.65, 0, 0.35, 1) both;
  z-index: 0;
}

/* The opt-in itself is NOT here — it is inline in every page's <head>. In an
   external stylesheet it arrives too late under the dev server's
   `Cache-Control: no-store` and the browser abandons the transition on every
   navigation, silently. These rules are safe in a stylesheet because they are
   only consulted once the transition has already been agreed. */