@keyframes signal-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes signal-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes grid-drift {
  to {
    background-position: 12rem 12rem;
  }
}

@keyframes scan-pass {
  from {
    transform: translateY(-110%);
  }
  to {
    transform: translateY(110%);
  }
}

@keyframes beacon-pulse {
  0%,
  100% {
    box-shadow: 0 0 0.45rem currentColor;
    opacity: 0.72;
  }
  50% {
    box-shadow: 0 0 1rem currentColor;
    opacity: 1;
  }
}

@keyframes orbit-turn {
  to {
    transform: rotate(1turn);
  }
}

.signal-loader__core {
  animation: signal-spin 3.5s linear infinite;
}

.signal-loader__core::after {
  animation: signal-breathe 1.8s ease-in-out infinite;
}

.live-dot,
.hero__telemetry i,
.badge--status::before {
  animation: beacon-pulse 2.6s ease-in-out infinite;
}

.hero__grid {
  animation: grid-drift 24s linear infinite;
}

.genre-explorer__orbit::before {
  animation: orbit-turn 32s linear infinite;
}

.genre-explorer__orbit::after {
  animation: signal-breathe 4s ease-in-out infinite;
}

.featured-stage__viewport::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgb(113 236 242 / 5%) 50%, transparent 55%);
  content: "";
  opacity: 0.35;
  pointer-events: none;
  transform: translateY(-110%);
  animation: scan-pass 8s linear infinite;
}

[data-reveal] {
  transition:
    opacity var(--duration-slow) ease,
    transform var(--duration-slow) var(--ease-out);
}

.reveal-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(1.5rem);
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

html[data-motion="off"] .particle-field {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .particle-field {
    display: none;
  }

  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}