/* The navigation remains a normal document load; browsers without this feature
   use the short arrival animation below. Physical directions are intentional. */
@view-transition { navigation: auto; }

html[data-dar-slide="left"]::view-transition-old(root) {
  animation: dar-old-left 280ms cubic-bezier(.22,.7,.2,1) both;
}
html[data-dar-slide="left"]::view-transition-new(root) {
  animation: dar-new-left 280ms cubic-bezier(.22,.7,.2,1) both;
}
html[data-dar-slide="right"]::view-transition-old(root) {
  animation: dar-old-right 280ms cubic-bezier(.22,.7,.2,1) both;
}
html[data-dar-slide="right"]::view-transition-new(root) {
  animation: dar-new-right 280ms cubic-bezier(.22,.7,.2,1) both;
}
@keyframes dar-old-left { to { transform: translateX(-100%); } }
@keyframes dar-new-left { from { transform: translateX(100%); } }
@keyframes dar-old-right { to { transform: translateX(100%); } }
@keyframes dar-new-right { from { transform: translateX(-100%); } }

@media (prefers-reduced-motion: no-preference) {
  html[data-dar-arrive="left"] body { animation: dar-arrive-left 220ms ease-out both; }
  html[data-dar-arrive="right"] body { animation: dar-arrive-right 220ms ease-out both; }
}
@keyframes dar-arrive-left { from { opacity: .85; transform: translateX(24px); } }
@keyframes dar-arrive-right { from { opacity: .85; transform: translateX(-24px); } }

/* Keep transition snapshots from intercepting taps on the live page. */
html[data-dar-slide]::view-transition,
html[data-dar-slide]::view-transition-group(*),
html[data-dar-slide]::view-transition-image-pair(*),
html[data-dar-slide]::view-transition-old(*),
html[data-dar-slide]::view-transition-new(*) { pointer-events: none; }