/* ===== dd-route-transition-v4 (Vectr-matched) =====
   Measured from the supplied reference recording:
     - outgoing page does not move; it dims uniformly to ~78% brightness
     - destination sweeps in as a wedge PIVOTING about the top-right corner
       (the wedge's edge rotates 0deg -> 90deg; it does not slide at a fixed angle)
     - full sweep ~650ms on an ease-in-out curve
     - header/logo stay above the wipe for the whole transition
   Geometry is driven per-frame from js/route.js because the polygon depends on
   the live viewport aspect ratio,which CSS keyframes cannot compute.

   v4 reworks what the wedge CARRIES. v3 mounted the destination document in an
   iframe at click time; loading it cost ~160ms of main thread in the middle of
   the sweep,so the wedge froze and then lurched. The wedge now reveals a
   pre-rendered static surface (the destination's own background,and for the
   home page its hero's first frame),which costs nothing to paint.
*/

/* Retire the previous fixed-angle slide and the View Transition path so there
   is exactly one code path producing the animation. */
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root),::view-transition-group(dd-brand-logo),::view-transition-old(dd-brand-logo),::view-transition-new(dd-brand-logo),::view-transition-group(dd-top-actions),::view-transition-old(dd-top-actions),::view-transition-new(dd-top-actions){
  animation: none !important;
}

.dd-route-transition,
.dd-route-layer{
  position: fixed;
  inset: 0;
  z-index: 99980;
  pointer-events: none;
  visibility: hidden;
}
body.dd-route-out .dd-route-transition,
body.dd-route-out .dd-route-layer{ visibility: visible; }

/* Uniform dim over the outgoing page. Reference measured ~20-22% black at the
   end of the sweep (pale blue 200,218,231 read 159,174,185 at 62% progress). */
.dd-route-transition__shade,.dd-route-shade{
  position: absolute;
  inset: 0;
  background: #04141c;
  opacity: 0;
  transition: none;
  will-change: opacity;
}

/* The destination sheet. JS sets clip-path each frame; no transform, no transition.
   Deliberately NO box-shadow: a blurred shadow attached to a shape whose geometry
   changes every frame forces a full re-raster of this layer on every frame. The
   reference edge is a clean cut anyway - the per-frame edge fit found no penumbra. */
.dd-route-transition__sheet,
.dd-route-sheet{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f3f8fa;
  overflow: hidden;
  transform: none !important;
  transition: none !important;
  clip-path: polygon(100% 0, 100% 0, 100% 0);
  will-change: clip-path;
}

/* style.css parks the subpage sheet off-canvas with
   html:not(.dd-arriving) .dd-route-sheet{transform:translate3d(-112vw,0,0)!important}.
   Match its specificity in both html states so the wedge works from every page. */
html:not(.dd-arriving) .dd-route-sheet,
html.dd-arriving .dd-route-sheet,
html:not(.dd-arriving) .dd-route-transition__sheet,
html.dd-arriving .dd-route-transition__sheet{
  transform: none !important;
  transition: none !important;
}

/* What the wedge carries: a flat,already-decoded picture of the destination's
   surface. One paint,no layout,no script. js/route.js fills it in. */
.dd-route-poster{
  position: absolute;
  inset: 0;
  background-color: #f3f8fa;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Own compositing layer: the hero frame is then rastered once and the wedge
     re-clips the cached bitmap, instead of resampling a cover-fit image on
     every frame of the sweep. */
  transform: translateZ(0);
  will-change: transform;
}

/* v3's rotating headline is retired: the destination plays its own designed
   entrance on arrival,and showing the same words twice read as a double-take. */
.dd-route-transition__preview,.dd-route-preview{ display: none !important; }

/* ---- Arrival cover (home only) -------------------------------------------
   Landing on the home page runs a loader until enough of the hero sequence has
   buffered,and the first paint briefly shows the section below the hero. Both
   were visible straight after the wedge finished. This cover holds the exact
   frame the wedge just revealed until the hero canvas has painted it for real.
   It is in the markup (not injected) so it is up on the very first paint.      */
.dd-route-arrival{
  position: fixed;
  inset: 0;
  z-index: 99995;
  pointer-events: none;
  /* The cover is part of the landing markup, so showing it by default closes
     the gap before client-side arrival detection and scroll reset can run. */
  display: block;
  opacity: 1;
  background-color: #dbeaf4;
  background-image: url("../sequence/dd-frame-001.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* While the cover is up the hero's own loader is redundant,and its .45s fade
   was showing through as a pale wash the moment the cover lifted. */
html.dd-arriving .dd-hero__loader{ opacity: 0 !important; transition: none !important; }
.dd-route-arrival.dd-is-clearing{ opacity: 0; transition: opacity .22s linear; }

/* Header furniture stays above the wipe,as in the reference. */
body.dd-route-out .dd-site-logo,body.dd-route-out .dd-site-nav,body.dd-route-out .dd-page-logo,body.dd-route-out .dd-page-actions{ z-index: 99990 !important; }

@media (prefers-reduced-motion: reduce){
  .dd-route-transition__sheet,
  .dd-route-sheet{ clip-path: none; }
  .dd-route-transition__shade,
  .dd-route-shade{ opacity: .22; }
  .dd-route-arrival{ transition: none !important; }
}