/* SORARIS page transition v0.1 — motion is applied to the active page root only.
   CSS individual translate preserves each page's existing transform/scale geometry. */
.screen-transition-target { will-change: translate, opacity, filter; }
.screen-transition-target.screen-leaving {
  pointer-events: none !important;
  translate: -11vw 0;
  opacity: .04 !important;
  filter: blur(3px) saturate(.82);
  transition:
    translate 360ms cubic-bezier(.68, 0, .84, .22),
    opacity 320ms ease-in,
    filter 320ms ease-in;
}
.screen-transition-target.screen-entering {
  animation: soraris-screen-enter 520ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes soraris-screen-enter {
  0% { translate: 11vw 0; opacity: 0; filter: blur(3px) saturate(.82); }
  76% { translate: -.65vw 0; opacity: .96; filter: blur(.25px) saturate(1.01); }
  100% { translate: 0 0; opacity: 1; filter: blur(0) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-transition-target,
  .screen-transition-target.screen-leaving,
  .screen-transition-target.screen-entering {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    opacity: 1 !important;
    filter: none !important;
    will-change: auto !important;
  }
}