/* Decorative layers share the full frame's intrinsic coordinates at every size. */
.legion-motion { position: absolute; inset: 0; pointer-events: none; }
.legion-motion-region { position: absolute; display: block; height: auto; overflow: hidden; opacity: 0; }
.legion-motion-region.is-ready { opacity: 1; }
.legion-motion.is-reduced .legion-motion-region { opacity: 0; }
.legion-ring-spin { animation: legion-ring 14s linear infinite; transform-origin: 0 0; }
.legion-dot {
  fill: #a2dffc;
  animation: legion-dots 7.2s ease-in-out infinite;
  animation-delay: var(--dot-delay);
  transform-origin: 0 0;
}
.legion-orbit-rotor { animation: legion-orbit var(--orbit-duration) linear infinite; transform-origin: 0 0; }
.legion-orbit-face { animation: legion-orbit-upright var(--orbit-duration) linear infinite; transform-origin: 0 0; }
.legion-flow-current { animation: legion-flow 18s linear infinite; }
.legion-motion-region :is(.legion-ring-spin, .legion-dot, .legion-orbit-rotor, .legion-orbit-face, .legion-flow-current) { animation-play-state: paused; }
.legion-motion-region.is-ready.is-running :is(.legion-ring-spin, .legion-dot, .legion-orbit-rotor, .legion-orbit-face, .legion-flow-current) { animation-play-state: running; }
@keyframes legion-ring { to { transform: rotate(360deg); } }
@keyframes legion-dots {
  0%, 100% { transform: translate(0, 0) scale(.9); fill: #a2dffc; opacity: .66; }
  35% { transform: translate(var(--dot-shift), var(--dot-lift)) scale(.72); fill: #d2f2ff; opacity: .9; }
  65% { transform: translate(0, var(--dot-lift)) scale(1.05); fill: #7baeea; opacity: .7; }
}
@keyframes legion-orbit {
  from { transform: rotate(var(--orbit-angle)); }
  to { transform: rotate(calc(var(--orbit-angle) + 360deg)); }
}
@keyframes legion-orbit-upright {
  from { transform: rotate(calc(-1 * var(--orbit-angle))); }
  to { transform: rotate(calc(-1 * var(--orbit-angle) - 360deg)); }
}
@keyframes legion-flow {
  from { stroke-dashoffset: calc(120px + var(--flow-start) + var(--flow-phase)); }
  to { stroke-dashoffset: calc(-1 * var(--flow-total) - 230px + var(--flow-start) + var(--flow-phase)); }
}
@media (prefers-reduced-motion: reduce) {
  .legion-motion { display: none; }
  .legion-motion-region * { animation: none !important; }
}