@keyframes logos-orbit-rotate {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes logos-orbit-rotate-reverse {
  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }
}

@keyframes logos-core-breathe {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.07);
  }
}

@keyframes logos-module-float {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -0.35rem;
  }
}

@keyframes logos-signal-pulse {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes logos-background-drift {
  0% {
    transform:
      translate3d(-1.5%, -0.5%, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(1%, 1%, 0)
      scale(1.03);
  }

  100% {
    transform:
      translate3d(-1.5%, -0.5%, 0)
      scale(1);
  }
}

@keyframes logos-discovery-complete {
  0% {
    box-shadow:
      0 0 0 rgba(0, 201, 133, 0);
  }

  45% {
    box-shadow:
      0 0 3rem rgba(0, 201, 133, 0.4);
  }

  100% {
    box-shadow:
      0 0 0 rgba(0, 201, 133, 0);
  }
}

@keyframes logos-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes logos-panel-content-in {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logos-background__glow--core {
  animation:
    logos-background-drift
    13s
    ease-in-out
    infinite;
}

.logos-background__orbit--outer {
  animation:
    logos-orbit-rotate
    42s
    linear
    infinite;
}

.logos-background__orbit--middle {
  animation:
    logos-orbit-rotate-reverse
    34s
    linear
    infinite;
}

.logos-background__orbit--inner {
  animation:
    logos-orbit-rotate
    27s
    linear
    infinite;
}

.logos-core-node__halo {
  animation:
    logos-core-breathe
    4.3s
    ease-in-out
    infinite;
}

.logos-core-node__orbit--outer {
  animation:
    logos-orbit-rotate
    24s
    linear
    infinite;
}

.logos-core-node__orbit--inner {
  animation:
    logos-orbit-rotate-reverse
    18s
    linear
    infinite;
}

.logos-core-node__signal span {
  animation:
    logos-signal-pulse
    1.8s
    ease-in-out
    infinite;
}

.logos-core-node__signal span:nth-child(2) {
  animation-delay: 180ms;
}

.logos-core-node__signal span:nth-child(3) {
  animation-delay: 360ms;
}

.logos-module-node {
  animation:
    logos-module-float
    5.5s
    ease-in-out
    infinite;
}

.logos-module-node:nth-child(2) {
  animation-delay: -0.8s;
}

.logos-module-node:nth-child(3) {
  animation-delay: -1.6s;
}

.logos-module-node:nth-child(4) {
  animation-delay: -2.4s;
}

.logos-module-node:nth-child(5) {
  animation-delay: -3.2s;
}

.logos-module-node:nth-child(6) {
  animation-delay: -4s;
}

.logos-module-panel__content:not([hidden]) {
  animation:
    logos-panel-content-in
    420ms
    var(--logos-ease)
    both;
}

.logos-stage.is-synchronized
.logos-discovery {
  animation:
    logos-discovery-complete
    1.6s
    var(--logos-ease);
}

.logos-button__loader {
  animation:
    logos-loader-spin
    800ms
    linear
    infinite;
}

.logos-demo-dialog__visual-ring--one {
  animation:
    logos-orbit-rotate
    25s
    linear
    infinite;
}

.logos-demo-dialog__visual-ring--two {
  animation:
    logos-orbit-rotate-reverse
    18s
    linear
    infinite;
}

.logos-demo-dialog__visual-ring--three {
  animation:
    logos-orbit-rotate
    12s
    linear
    infinite;
}

/* JS can set one of these classes/states */

body.is-motion-paused *,
body[data-motion="paused"] *,
.logos-landing.is-motion-paused * {
  animation-play-state: paused !important;
}

body.is-motion-paused
.logos-module-node,
body[data-motion="paused"]
.logos-module-node,
.logos-landing.is-motion-paused
.logos-module-node {
  margin-top: 0;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .logos-module-node {
    animation: none !important;
  }

  .logos-background__orbit,
  .logos-core-node__orbit,
  .logos-core-node__halo,
  .logos-core-node__signal span {
    animation: none !important;
  }
}