/* Slab Lab · S01: the game drops in (owner 10-22). In the yard, Play cuts the slab out of its plate and the floor falls away
   (lab/s01/yard.js); the yard then opts in to a cross-document view transition for that one navigation. Every game page links
   this sheet, so it opts in too, and its page falls in from above onto the slab: a drop, a squash on landing, a small bounce
   and a shake, while the yard underneath darkens in its shadow. A page animates only when both ends opt in, and no page that
   links to a game opts in except the yard at that moment, so no other arrival animates. Browsers without cross-document view
   transitions ignore all of this and simply show the game. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-group(root) { animation-duration: .86s; }
::view-transition-old(root) { animation: slab-drop-shade .86s linear both; }
::view-transition-new(root) { animation: slab-drop-in .86s both; transform-origin: 50% 100%; }
@keyframes slab-drop-in {
  0% { transform: translateY(-104%); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  56% { transform: translateY(0); animation-timing-function: ease-out; }
  62% { transform: translateY(0) scale(1.012, .972); animation-timing-function: ease-out; }
  71% { transform: translateY(-1.8%) scale(.996, 1.006); animation-timing-function: ease-in; }
  79% { transform: translateY(0); }
  83% { transform: translate(-.6%, .35%); }
  87% { transform: translate(.5%, -.3%); }
  91% { transform: translate(-.3%, .15%); }
  95% { transform: translate(.12%, 0); }
  100% { transform: none; }
}
@keyframes slab-drop-shade {
  0% { filter: brightness(1); }
  54% { filter: brightness(.4); }
  100% { filter: brightness(.4); }
}