/* A quiet loop for the architecture illustration. */
.hero-art.motion-ready .art-top-layer {
  animation: motion-top 6s ease-in-out infinite;
}

.hero-art.motion-ready .art-middle-layer {
  animation: motion-middle 6s ease-in-out infinite;
}

.hero-art.motion-ready .art-flow,
.hero-art.motion-ready .art-flow-second,
.hero-art.motion-ready .art-flow-third {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: .9 99.1;
  animation: motion-flow 8s linear infinite;
}

.hero-art.motion-ready .art-flow-second { animation-delay: -2.6667s; }
.hero-art.motion-ready .art-flow-third { animation-delay: -5.3333s; }

.hero-art:not(.motion-ready) .art-flow { display: none; }

@keyframes motion-top {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes motion-middle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes motion-flow {
  0% { stroke-dashoffset: 0; opacity: .25; }
  25%, 75% { opacity: .85; }
  100% { stroke-dashoffset: -100; opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-art *,
  .hero-art::before,
  .hero-art::after,
  .hero-art *::before,
  .hero-art *::after {
    animation: none !important;
  }

}