#why .why-card { isolation: isolate; overflow: hidden; }
#why .why-motion {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  color: #a97909;
  opacity: .17;
  filter: blur(.7px);
}
#why .why-motion svg { width: 100%; height: 100%; display: block; }
.why-motion .why-hoist { animation: why-hoist 6s ease-in-out infinite; }
.why-motion .why-truck { animation: why-truck 9s ease-in-out infinite; }
.why-motion .why-drafting { animation: why-drafting 8s ease-in-out infinite; }
.why-motion .why-check { stroke-dasharray: 100; animation: why-check 6s ease-in-out infinite; }
.why-motion .why-halo, .why-motion .why-bulb, .why-motion .why-nodes { animation: why-pulse 5s ease-in-out infinite; }
.why-motion .why-route { stroke-width: 5; stroke-dasharray: 12 88; animation: why-route 7s linear infinite; }
.why-motion .why-drone { animation: why-drone 6s ease-in-out infinite; }
.why-motion .why-scan { animation: why-pulse 4s ease-in-out infinite; }
.why-motion .why-network { stroke-dasharray: 5 8; animation: why-network 5s linear infinite; }
@keyframes why-hoist { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }
@keyframes why-truck { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(70px); } }
@keyframes why-drafting { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-12px, 13px); } }
@keyframes why-check { 0%, 15% { stroke-dashoffset: 100; opacity: .3; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .3; } }
@keyframes why-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes why-route { to { stroke-dashoffset: -100; } }
@keyframes why-drone { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -8px); } }
@keyframes why-network { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) {
  #why .why-motion * { animation: none !important; }
}