.ops-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: #25251f;
  isolation: isolate;
}
.ops-art .ops-art-label {
  fill: #3c3a32;
  font: 500 16px/1.2 Satoshi, sans-serif;
  letter-spacing: -.25px;
}
.ops-art .ops-art-label-end { text-anchor: end; }
.ops-art .ops-art-fine {
  fill: none;
  stroke: #827c6f;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ops-art .ops-art-rail {
  fill: none;
  stroke: #d7c9b6;
  stroke-width: 3;
  stroke-linecap: round;
}
.ops-art .ops-art-route {
  fill: none;
  stroke: #b34024;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 19 98;
  animation: ops-art-flow 8s linear infinite;
}
.ops-art .ops-art-route-in { animation-delay: -1.2s; }
.ops-art .ops-art-route-middle { animation-delay: -3.7s; }
.ops-art .ops-art-route-out { animation-delay: -5.4s; }
.ops-art .ops-art-check {
  fill: none;
  stroke: #b34024;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ops-art .ops-art-record-lines {
  fill: none;
  stroke: #a39b8d;
  stroke-width: 4;
  stroke-linecap: round;
}
.ops-art .ops-art-source-lines {
  fill: none;
  stroke: #aaa191;
  stroke-width: 3;
  stroke-linecap: round;
}
.ops-art .ops-art-inquiry {
  animation: ops-art-inquiry 8s cubic-bezier(.4,0,.2,1) infinite;
}
.ops-art .ops-art-record {
  animation: ops-art-record 8s ease-in-out infinite;
}
.ops-art .ops-art-owner {
  animation: ops-art-owner 8s ease-in-out infinite;
}
.ops-art .ops-art-processing {
  animation: ops-art-processing 8s ease-in-out infinite;
}
.ops-art .ops-art-approval {
  animation: ops-art-approval 8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.ops-art .ops-art-review-scan {
  animation: ops-art-scan 9s cubic-bezier(.4,0,.2,1) infinite;
}
.ops-art .ops-art-review-lens {
  animation: ops-art-review 9s cubic-bezier(.4,0,.2,1) infinite;
}
.ops-art .ops-art-layer-guide {
  fill: none;
  stroke: #b8ab96;
  stroke-width: .8;
  stroke-dasharray: 3 5;
}
.ops-art .ops-art-layer-interface {
  animation: ops-art-interface 12s cubic-bezier(.45,0,.2,1) infinite;
}
.ops-art .ops-art-layer-record {
  animation: ops-art-record-layer 12s cubic-bezier(.45,0,.2,1) infinite;
}
.ops-art .ops-art-layer-connection {
  animation: ops-art-connection-layer 12s cubic-bezier(.45,0,.2,1) infinite;
}
.ops-art .ops-art-circuit {
  fill: none;
  stroke: #fffdfa;
  stroke-width: 3;
  stroke-dasharray: 13 140;
  animation: ops-art-circuit 5s linear infinite;
}
.ops-art .ops-art-camera-flash {
  opacity: 0;
  animation: ops-art-photo 9s ease-out infinite;
}
.ops-art .ops-art-sync {
  transform-box: fill-box;
  transform-origin: center;
  animation: ops-art-sync 9s cubic-bezier(.4,0,.2,1) infinite;
}
.ops-art .ops-art-synced-photo {
  animation: ops-art-saved 9s ease-in-out infinite;
}

/* The parent activates only visible artwork. Pausing preserves the current frame. */
.ops-art .art-animated { animation-play-state: paused; }
html[data-motion="on"] [data-animated-art][data-in-view="true"] .art-animated {
  animation-play-state: running;
}

@keyframes ops-art-flow {
  to { stroke-dashoffset: -468; }
}
@keyframes ops-art-inquiry {
  0%, 12%, 85%, 100% { transform: translate(0, 0); }
  30%, 48% { transform: translate(8px, 1px); }
}
@keyframes ops-art-record {
  0%, 28%, 90%, 100% { opacity: 1; transform: translateY(0); }
  38% { opacity: .45; transform: translateY(6px); }
  53%, 75% { opacity: 1; transform: translateY(0); }
}
@keyframes ops-art-owner {
  0%, 55%, 94%, 100% { transform: translateY(0); }
  67%, 80% { transform: translateY(-5px); }
}
@keyframes ops-art-processing {
  0%, 15%, 81%, 100% { opacity: .78; }
  33%, 52% { opacity: 1; }
}
@keyframes ops-art-approval {
  0%, 57%, 95%, 100% { transform: scale(1); }
  70%, 79% { transform: scale(1.055); }
}
@keyframes ops-art-scan {
  0%, 12%, 100% { transform: translateY(-44px); opacity: .35; }
  36% { opacity: 1; }
  67%, 82% { transform: translateY(67px); opacity: .8; }
  91% { opacity: .1; }
}
@keyframes ops-art-review {
  0%, 14%, 100% { transform: translate(-8px, -20px); }
  40%, 68% { transform: translate(0, 2px); }
  83% { transform: translate(-8px, -20px); }
}
@keyframes ops-art-interface {
  0%, 18%, 100% { transform: translateY(0); }
  45%, 66% { transform: translateY(57px); }
}
@keyframes ops-art-record-layer {
  0%, 18%, 100% { transform: translateY(0); }
  45%, 66% { transform: translateY(33px); }
}
@keyframes ops-art-connection-layer {
  0%, 18%, 100% { transform: translateY(0); }
  45%, 66% { transform: translateY(9px); }
}
@keyframes ops-art-circuit {
  to { stroke-dashoffset: -459; }
}
@keyframes ops-art-photo {
  0%, 14%, 28%, 100% { opacity: 0; }
  18% { opacity: .86; }
}
@keyframes ops-art-sync {
  0%, 29% { transform: rotate(0); }
  59%, 100% { transform: rotate(360deg); }
}
@keyframes ops-art-saved {
  0%, 32%, 100% { opacity: 1; transform: translateY(0); }
  42% { opacity: .3; transform: translateY(7px); }
  61%, 90% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ops-art .art-animated {
    animation: none !important;
    transform: none;
  }
  .ops-art .ops-art-camera-flash { opacity: 0; }
  .ops-art .ops-art-review-scan { opacity: .45; }
  .ops-art .ops-art-route { stroke-dasharray: 19 31; }
}