.home-workflow-motion__canvas {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.home-workflow-motion__canvas > img {
  position: relative;
  z-index: 1;
}

.home-workflow-motion__overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.home-workflow-motion__progress {
  position: absolute;
  left: 14%;
  top: 14.1%;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #38a3ff;
  box-shadow: 0 0 9px rgba(30, 136, 229, .42);
  transition: width 760ms cubic-bezier(.22, 1, .36, 1);
}

.home-workflow-motion__packet {
  position: absolute;
  left: 14%;
  top: calc(14.1% - 3px);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #087cf0;
  box-shadow: 0 0 0 4px rgba(8, 124, 240, .14), 0 2px 8px rgba(8, 64, 128, .25);
  transition: left 760ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}

.home-workflow-motion__node {
  position: absolute;
  top: 11.6%;
  width: 5.2%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 50%;
  transform: translateX(-50%) scale(.82);
  opacity: 0;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease;
}

.home-workflow-motion__node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(8, 124, 240, .36);
  border-radius: 50%;
  animation: workflow-node-ring 1.2s ease-out infinite;
}

.home-workflow-motion__node--1 { left: 14%; }
.home-workflow-motion__node--2 { left: 39.7%; }
.home-workflow-motion__node--3 { left: 63.5%; }
.home-workflow-motion__node--4 { left: 87.6%; }

.home-workflow-motion__panel {
  position: absolute;
  top: 18.8%;
  height: 63.8%;
  border: 1px solid rgba(8, 124, 240, 0);
  border-radius: 3.2%;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 0 rgba(8, 124, 240, 0);
  opacity: 0;
  transition: opacity 220ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.home-workflow-motion__panel::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 4%;
  height: 1px;
  background: rgba(8, 124, 240, .54);
  box-shadow: 0 0 10px rgba(8, 124, 240, .5);
  animation: workflow-panel-scan 1.4s ease-in-out infinite;
}

.home-workflow-motion__panel--1 { left: 3.1%; width: 21.6%; }
.home-workflow-motion__panel--2 { left: 29.1%; width: 19.9%; }
.home-workflow-motion__panel--3 { left: 52.7%; width: 20.5%; }
.home-workflow-motion__panel--4 { left: 77%; width: 19.9%; }

.home-workflow-motion__handoff {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #18a875;
  box-shadow: 0 0 0 4px rgba(24, 168, 117, .13), 0 0 10px rgba(24, 168, 117, .42);
  opacity: 0;
}

.home-workflow-motion__handoff--1 { left: 27%; top: 49%; }
.home-workflow-motion__handoff--2 { left: 50.8%; top: 35%; }
.home-workflow-motion__handoff--3 { left: 75.1%; top: 49.6%; }

.home-workflow-motion[data-workflow-step="1"] .home-workflow-motion__node--1,
.home-workflow-motion[data-workflow-step="1"] .home-workflow-motion__panel--1,
.home-workflow-motion[data-workflow-step="2"] .home-workflow-motion__node--2,
.home-workflow-motion[data-workflow-step="2"] .home-workflow-motion__panel--2,
.home-workflow-motion[data-workflow-step="3"] .home-workflow-motion__node--3,
.home-workflow-motion[data-workflow-step="3"] .home-workflow-motion__panel--3,
.home-workflow-motion[data-workflow-step="4"] .home-workflow-motion__node--4,
.home-workflow-motion[data-workflow-step="4"] .home-workflow-motion__panel--4 {
  border-color: rgba(8, 124, 240, .5);
  box-shadow: 0 0 0 3px rgba(8, 124, 240, .07), 0 12px 30px rgba(8, 68, 126, .08);
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.home-workflow-motion[data-workflow-step="1"] .home-workflow-motion__panel--1,
.home-workflow-motion[data-workflow-step="2"] .home-workflow-motion__panel--2,
.home-workflow-motion[data-workflow-step="3"] .home-workflow-motion__panel--3,
.home-workflow-motion[data-workflow-step="4"] .home-workflow-motion__panel--4 {
  transform: none;
}

.home-workflow-motion[data-workflow-step="2"] .home-workflow-motion__handoff--1,
.home-workflow-motion[data-workflow-step="3"] .home-workflow-motion__handoff--2,
.home-workflow-motion[data-workflow-step="4"] .home-workflow-motion__handoff--3 {
  animation: workflow-handoff 820ms ease-out both;
}

.home-workflow-motion[data-workflow-step="2"] .home-workflow-motion__progress { width: 25.7%; }
.home-workflow-motion[data-workflow-step="3"] .home-workflow-motion__progress { width: 49.5%; }
.home-workflow-motion[data-workflow-step="4"] .home-workflow-motion__progress { width: 73.6%; }
.home-workflow-motion[data-workflow-step="2"] .home-workflow-motion__packet { left: 39.7%; }
.home-workflow-motion[data-workflow-step="3"] .home-workflow-motion__packet { left: 63.5%; }
.home-workflow-motion[data-workflow-step="4"] .home-workflow-motion__packet { left: 87.6%; }

.home-workflow-motion.is-resetting .home-workflow-motion__progress,
.home-workflow-motion.is-resetting .home-workflow-motion__packet {
  opacity: 0;
  transition: none;
}

.home-workflow-motion__toggle {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(152, 162, 179, .48);
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: #344054;
  box-shadow: 0 3px 10px rgba(16, 24, 40, .1);
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, border-color 160ms ease, color 160ms ease;
}

.home-workflow-motion__canvas:hover .home-workflow-motion__toggle,
.home-workflow-motion__toggle:focus-visible {
  opacity: 1;
}

.home-workflow-motion__toggle:hover {
  border-color: rgba(8, 124, 240, .45);
  color: #087cf0;
}

.home-workflow-motion__toggle:focus-visible {
  outline: 2px solid rgba(8, 124, 240, .28);
  outline-offset: 2px;
}

.home-workflow-motion__toggle svg {
  width: 16px;
  height: 16px;
}

.home-workflow-motion__play { display: none; }
.home-workflow-motion[data-workflow-playing="false"] .home-workflow-motion__play { display: block; }
.home-workflow-motion[data-workflow-playing="false"] .home-workflow-motion__pause { display: none; }
.home-workflow-motion[data-workflow-playing="false"] .home-workflow-motion__node::after,
.home-workflow-motion[data-workflow-playing="false"] .home-workflow-motion__panel::after,
.home-workflow-motion[data-workflow-playing="false"] .home-workflow-motion__handoff { animation-play-state: paused; }

@keyframes workflow-node-ring {
  0% { opacity: .8; transform: scale(.78); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes workflow-panel-scan {
  0%, 100% { opacity: 0; transform: translateY(0); }
  18% { opacity: .7; }
  72% { opacity: .22; }
  88% { opacity: 0; transform: translateY(54vh); }
}

@keyframes workflow-handoff {
  0% { opacity: 0; transform: scale(.45); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.65); }
}

@media (max-width: 700px) {
  .home-workflow-motion__toggle { top: 6px; right: 6px; opacity: 1; }
  .home-workflow-motion__panel { border-width: 1px; box-shadow: none; }
  .home-workflow-motion__packet { width: 6px; height: 6px; top: calc(14.1% - 2px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-workflow-motion__overlay { display: none; }
  .home-workflow-motion__toggle { display: none; }
}