/* Visible by default: neither JavaScript nor animation support is required. */
.reveal {
  transition: none;
}
.reveal,
.motion-ready .reveal:not(.is-visible),
.motion-ready .reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* The module marks only independent blocks; existing transforms remain intact. */
body.site-motion-active [data-site-motion] {
  --site-motion-x: 0px;
  --site-motion-y: 18px;
}
body.site-motion-active [data-site-motion="left"] {
  --site-motion-x: -22px;
  --site-motion-y: 12px;
}
body.site-motion-active [data-site-motion="right"],
body.site-motion-active [data-site-motion="portrait"] {
  --site-motion-x: 22px;
  --site-motion-y: 12px;
}
body.site-motion-active [data-site-motion="duel-left"] {
  --site-motion-x: -64px;
  --site-motion-y: 0px;
}
body.site-motion-active [data-site-motion="duel-right"] {
  --site-motion-x: 64px;
  --site-motion-y: 0px;
}
body.site-motion-active [data-site-motion][data-site-motion-state="pending"] {
  opacity: 0;
  translate: var(--site-motion-x) var(--site-motion-y);
}
body.site-motion-active [data-site-motion][data-site-motion-state="visible"] {
  opacity: 1;
  translate: none;
}
/* Scale is independent of the VS transform used to keep it centered. */
body.site-motion-active .role-diorama-versus[data-site-motion="versus"] {
  transform-origin: 0 0;
}
body.site-motion-active [data-site-motion="versus"][data-site-motion-state="pending"] {
  translate: none;
  scale: .25;
}
body.site-motion-active [data-site-motion="versus"][data-site-motion-state="visible"] {
  scale: 1;
}

@media (max-width: 760px) {
  body.site-motion-active [data-site-motion] {
    --site-motion-y: 14px;
  }
  body.site-motion-active [data-site-motion="left"] {
    --site-motion-x: -12px;
  }
  body.site-motion-active [data-site-motion="right"],
  body.site-motion-active [data-site-motion="portrait"] {
    --site-motion-x: 12px;
  }
  body.site-motion-active [data-site-motion="duel-left"] {
    --site-motion-x: -20px;
    --site-motion-y: 0px;
  }
  body.site-motion-active [data-site-motion="duel-right"] {
    --site-motion-x: 20px;
    --site-motion-y: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-motion-active [data-site-motion][data-site-motion-state] {
    opacity: 1;
    translate: none;
    scale: none;
  }
}