/*
 * Dreamloud View Transitions
 * Public editorial navigation only.
 *
 * The root transition intentionally does NOT interpolate geometry. Chromium's
 * default root-group size/position animation can expose the page background
 * beside the snapshot when scrollbar widths differ between documents.
 *
 * Instead, the outgoing page remains fixed and fully opaque while the new page
 * fades over it. This avoids sliding, white edge flashes and double-fading.
 */
@view-transition{
  navigation:auto;
}

/* Match Dreamloud's public canvas so no browser-white underlay can flash through. */
html,
body{
  background:#090f26;
}

/* Disable Chromium's default root geometry interpolation completely. */
::view-transition-group(root){
  animation:none!important;
  transform:none!important;
}

/* Keep both root snapshots in one isolated, non-blended stack. */
::view-transition-image-pair(root){
  isolation:isolate;
}

::view-transition-old(root),
::view-transition-new(root){
  mix-blend-mode:normal!important;
  transform:none!important;
}

/* The old document never fades away; the new document simply covers it. */
::view-transition-old(root){
  z-index:1;
  animation:none!important;
  opacity:1;
}

::view-transition-new(root){
  z-index:2;
  animation:dl-view-in 110ms cubic-bezier(.2,.8,.2,1) both!important;
}

@keyframes dl-view-in{
  from{opacity:0}
  to{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root){
    animation:none!important;
  }
}