/* CODSHIPX_READINESS_KYC_SEAMLESS_SWAP_R11R3R3 */

/*
 * No exit animation.
 * React Router changes the route immediately.
 * Only the newly mounted KYC content gets a tiny entrance motion.
 */

main.cx-seller-route-enter-r11r3r2 {
  animation:
    cxSellerKycSoftEnterR11R3R3
    180ms
    cubic-bezier(.22,.8,.3,1)
    both;
  will-change: opacity, transform;
}

@keyframes cxSellerKycSoftEnterR11R3R3 {
  from {
    opacity: .72;
    transform: translate3d(6px,0,0);
  }

  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@media (max-width: 640px) {
  main.cx-seller-route-enter-r11r3r2 {
    animation-duration: 160ms;
  }

  @keyframes cxSellerKycSoftEnterR11R3R3 {
    from {
      opacity: .78;
      transform: translate3d(4px,0,0);
    }

    to {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  main.cx-seller-route-enter-r11r3r2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}