/* Screen changes in the Studio app (views/studio-app.<lang>.html). studio-router.js sets
   html[data-nav] to forward (into a lessons screen), back (out to the dashboard) or swap,
   and runs the change as a View Transition. The app bar holds still (view-transition-name
   on .mast); the page under it moves on one axis: the screen she leaves fades out early and
   drifts the other way, the one she enters drifts in from the reading end and fades in late,
   so the two never sit half-visible on top of each other. Hebrew mirrors English. */
html[data-nav]::view-transition-old(root),
html[data-nav]::view-transition-new(root) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
html[data-nav="forward"]::view-transition-old(root) { animation-name: stOutStart; }
html[data-nav="forward"]::view-transition-new(root) { animation-name: stInEnd; }
html[data-nav="back"]::view-transition-old(root) { animation-name: stOutEnd; }
html[data-nav="back"]::view-transition-new(root) { animation-name: stInStart; }
html[data-nav="swap"]::view-transition-old(root) { animation-name: stFadeOut; }
html[data-nav="swap"]::view-transition-new(root) { animation-name: stFadeIn; }
/* Right to left: the reading end is the left. */
html[dir="rtl"][data-nav="forward"]::view-transition-old(root) { animation-name: stOutEnd; }
html[dir="rtl"][data-nav="forward"]::view-transition-new(root) { animation-name: stInStart; }
html[dir="rtl"][data-nav="back"]::view-transition-old(root) { animation-name: stOutStart; }
html[dir="rtl"][data-nav="back"]::view-transition-new(root) { animation-name: stInEnd; }

@keyframes stOutStart { 0% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; } 100% { transform: translateX(-28px); } }
@keyframes stOutEnd   { 0% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; } 100% { transform: translateX(28px); } }
@keyframes stInEnd    { 0%, 30% { opacity: 0; transform: translateX(28px); } 100% { opacity: 1; transform: none; } }
@keyframes stInStart  { 0%, 30% { opacity: 0; transform: translateX(-28px); } 100% { opacity: 1; transform: none; } }
@keyframes stFadeOut  { to { opacity: 0; } }
@keyframes stFadeIn   { from { opacity: 0; } }

/* The app bar is its own layer: it stays put while the page moves under it. */
::view-transition-group(studio-bar) { animation-duration: .34s; }

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