/*
  Language swap

  Cross-document view transitions between a page and its other-language twin.
  The new page is revealed in its own reading direction over the old one.
*/

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  mask-size: 250% 100%;
  mask-repeat: no-repeat;
  animation: 720ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
html[dir="ltr"]::view-transition-new(root) {
  mask-image: linear-gradient(to right, #000 40%, transparent 60%);
  animation-name: sweep-ltr;
}
html[dir="rtl"]::view-transition-new(root) {
  mask-image: linear-gradient(to left, #000 40%, transparent 60%);
  animation-name: sweep-rtl;
}
@keyframes sweep-ltr { from { mask-position: 100% 0; } to { mask-position: 0 0; } }
@keyframes sweep-rtl { from { mask-position: 0 0; } to { mask-position: 100% 0; } }