/* Screen and state changes via the View Transitions API (times in kiosk-motion.css).
   Browsers without the API keep the enter-only animation of .k-screen (--k-screen-in).

   Two kinds (js/view-transitions.js puts the kind on <html data-vt="…"> while it runs):
   - screen: a new screen arrives — the old one fades out quickly, the new one fades in with a short rise;
   - state:  something changes within a screen — only what changed cross-fades.
   Everything that only cross-fades uses the browser's own cross-fade (both images blended with
   plus-lighter): pixels that are the same before and after stay exactly as they are, so a coloured panel
   never dims or flashes white, and only the content that really changed moves.
   Looping animations (.k-live: the illustrations, the edge pointers) keep running through a state change:
   they are taken out of the snapshot and shown live, so they neither freeze nor jump. */

/* Where view transitions exist they replace the enter-only animation of .k-screen. */
@supports (view-transition-name: none) {
  .k-screen { animation: none; }
}

/* Places that stay put across screens: the header, and the payment panel (bill → card payment). */
.k-header { view-transition-name: kiosk-header; }
.due { view-transition-name: kiosk-panel; }

/* A new screen. */
html[data-vt="screen"]::view-transition-old(root) { animation: vt-out var(--k-vt-out) ease-in both; }
html[data-vt="screen"]::view-transition-new(root) { animation: vt-in var(--k-vt-in) cubic-bezier(.2, .7, .2, 1) var(--k-vt-in-delay) both; }
html[data-vt="screen"]::view-transition-group(kiosk-header),
html[data-vt="screen"]::view-transition-group(kiosk-panel),
html[data-vt="screen"]::view-transition-old(kiosk-header),
html[data-vt="screen"]::view-transition-new(kiosk-header),
html[data-vt="screen"]::view-transition-old(kiosk-panel),
html[data-vt="screen"]::view-transition-new(kiosk-panel) { animation-duration: var(--k-vt-fixed); }

/* A change within a screen: the browser's cross-fade everywhere, just with our duration. */
html[data-vt="state"]::view-transition-group(*),
html[data-vt="state"]::view-transition-old(*),
html[data-vt="state"]::view-transition-new(*) { animation-duration: var(--k-vt-state); }

/* …except the looping animations, which stay live and in place (one that appears or goes away still fades). */
html[data-vt="state"] .k-live { view-transition-name: match-element; view-transition-class: live; }
html[data-vt="state"]::view-transition-group(*.live),
html[data-vt="state"]::view-transition-new(*.live):not(:only-child) { animation: none; }
html[data-vt="state"]::view-transition-old(*.live):not(:only-child) { display: none; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(var(--k-screen-rise)); } }