/* Short, readable sequences: paperwork is handled, checked, then answered. */
.service-art--scenes { overflow: hidden; border-radius: 19px; background: linear-gradient(115deg, #04152c, #103557); }
.service-art--scenes svg { border-radius: inherit; }
.service-art--scenes .sa-animated {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(.45, 0, .22, 1);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.service-art--scenes.sa-running .sa-animated { animation-play-state: running; }
.service-art--scenes .sa-sheet-back { animation-name: sa-file-back; }
.service-art--scenes .sa-sheet-front { animation-name: sa-file-front; }
.service-art--scenes .sa-folder-front { animation-name: sa-folder-settle; }
.service-art--scenes .sa-invoice { animation-name: sa-invoice-lift; animation-duration: 8.5s; }
.service-art--scenes .sa-scan { opacity: 0; animation-name: sa-invoice-scan; animation-duration: 8.5s; }
.service-art--scenes .sa-approval { animation-name: sa-approval-arrive; animation-duration: 8.5s; transform-origin: 70% 67%; }
.service-art--scenes .sa-check { stroke-dasharray: 1; stroke-dashoffset: 0; animation-name: sa-check-write; animation-duration: 8.5s; }
.service-art--scenes .sa-message-first { animation-name: sa-message-received; animation-duration: 9s; }
.service-art--scenes .sa-message-transfer { opacity: 0; animation-name: sa-message-send; animation-duration: 9s; }
.service-art--scenes .sa-message-reply { animation-name: sa-reply-arrive; animation-duration: 9s; }
.service-art--scenes .sa-reply-lines { animation-name: sa-reply-write; animation-duration: 9s; }
.service-art--scenes .sa-typing { animation-name: sa-typing-dot; animation-duration: 1.8s; transform-origin: center; }
.service-art--scenes .sa-typing-two { animation-delay: .2s; }
.service-art--scenes .sa-typing-three { animation-delay: .4s; }

@keyframes sa-file-back {
  0%, 9%, 100% { transform: translate(0, 0) rotate(0); }
  28%, 44% { transform: translate(-18px, -16px) rotate(-5deg); }
  65%, 80% { transform: translate(2px, 5px) rotate(1deg); }
}
@keyframes sa-file-front {
  0%, 15%, 100% { transform: translate(0, 0) rotate(0); }
  37%, 51% { transform: translate(13px, -17px) rotate(4deg); }
  73%, 83% { transform: translate(-3px, 8px) rotate(-1deg); }
}
@keyframes sa-folder-settle {
  0%, 21%, 100% { transform: translateY(0); }
  44% { transform: translateY(3px); }
  75%, 84% { transform: translateY(-2px); }
}
@keyframes sa-invoice-lift {
  0%, 100% { transform: translateY(0) rotate(0); }
  18%, 45% { transform: translateY(-5px) rotate(1deg); }
  64%, 83% { transform: translateY(2px) rotate(-.5deg); }
}
@keyframes sa-invoice-scan {
  0%, 13% { opacity: 0; transform: translateY(-16px); }
  18% { opacity: 1; transform: translateY(-12px); }
  43% { opacity: 1; transform: translateY(113px); }
  48%, 100% { opacity: 0; transform: translateY(116px); }
}
@keyframes sa-approval-arrive {
  0%, 25% { transform: translate(8px, 10px) scale(.94); opacity: .64; }
  46%, 78% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(8px, 10px) scale(.94); opacity: .64; }
}
@keyframes sa-check-write {
  0%, 44% { stroke-dashoffset: 1; opacity: 0; }
  45% { stroke-dashoffset: 1; opacity: 1; }
  56%, 84% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sa-message-received {
  0%, 100% { transform: translate(-7px, 4px); }
  19%, 40% { transform: translate(0, -4px); }
  62%, 80% { transform: translate(-3px, 0); }
}
@keyframes sa-message-send {
  0%, 24% { opacity: 0; transform: translate(-27px, -12px) scale(.82); }
  29% { opacity: 1; transform: translate(-21px, -9px) scale(.9); }
  43% { opacity: 1; transform: translate(34px, 22px) scale(.86); }
  49%, 100% { opacity: 0; transform: translate(40px, 26px) scale(.72); }
}
@keyframes sa-reply-arrive {
  0%, 30%, 100% { transform: translate(9px, 6px); }
  49%, 76% { transform: translate(-3px, -4px); }
}
@keyframes sa-reply-write {
  0%, 33%, 100% { opacity: .26; }
  52%, 80% { opacity: 1; }
}
@keyframes sa-typing-dot {
  0%, 60%, 100% { opacity: .38; transform: translateY(0); }
  28% { opacity: .9; transform: translateY(-2px); }
}

.v1-motion-paused .service-art--scenes .sa-animated { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .service-art--scenes .sa-animated { animation: none !important; }
  .service-art--scenes .sa-scan, .service-art--scenes .sa-message-transfer { display: none; }
  .service-art--scenes .sa-check { opacity: 1; stroke-dashoffset: 0; }
}