/* cards.css */

.R2 { display: flex; }
.G { 
  background: lightgrey; 
  margin-bottom: .3em; 
  display: inline-block; 
}
.L { color: gray; }
html { border: 3px dashed blue; }
body { border: 3px dashed red;  }
html {font-size: 1.6em;}

@view-transition { navigation: auto; }


/*
https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/
*/

@keyframes slide-to-right {
  from {  transform: translateX(0    );  }    /* Start from screen view */
    to {  transform: translateX(100vw);  }    /* Move to right */
}
@keyframes slide-from-right {
  from { transform: translateX(100vw); } /* Arrive from the right */
    to { transform: translateX(0    ); } /* Come into view */
}

@keyframes slide-to-left {
  from {  transform: translateX(0    );  }    /* Start from screen view */
    to {  transform: translateX(-100vw);  }    /* Move to LEFT? */
}
@keyframes slide-from-left {
  from { transform: translateX(-100vw); } /* Arrive from the LEFT? */
    to { transform: translateX(0    ); } /* Come into view */
}

:root {  --DIR: forward;  } /* default */



::view-transition-old(root) { animation: var(--ANIM_TO_USE) 1.6s; z-index: 2; }  /* old page does this - slides-TO-right. */
::view-transition-new(root) { animation: var(--BNIM_TO_USE) 1.6s; }  /* new page does this - slides-FROM-right. */


:root[style*="--DIR: forward"] { --ANIM_TO_USE: slide-to-left; --BNIM_TO_USE: slide-from-right;}

:root[style*="--DIR: backward"] { --ANIM_TO_USE: slide-to-right;  --BNIM_TO_USE: slide-from-left; } /* Map CSS variable to actual animation */

/* And this of course is broken;
it must be direction-dependent,
and the 'other' page must act in sync, not in opposition.

::view-transition-old(root) { animation: slide-to-left 1.6s; z-index: 2; }
::view-transition-new(root) { animation: slide-from-right 1.6s; }

hmm, den der koerer UD ved forward, er forkert.
Den koerer ti hoejre, det skal den ikke.
*/


/* ::view-transition-new(root) { animation: none; } */
/* ::view-transition-old(root) { animation: none; } */