@keyframes bgShift {
  0% {
    background-position:
      0% 50%,
      0% 50%;
  }

  50% {
    background-position:
      100% 50%,
      100% 50%;
  }

  100% {
    background-position:
      0% 50%,
      0% 50%;
  }
}

@keyframes floatBanner {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes floatParticle {
  0% {
    transform: translateY(110vh) scale(0.7);
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(-15vh) scale(1.05);
    opacity: 0;
  }
}

@keyframes starPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(77, 163, 255, 0.22)) brightness(0.95);
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(142, 197, 255, 0.4)) brightness(1.12);
  }
}

@keyframes iconPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(77, 163, 255, 0.18)) saturate(0.96);
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(77, 163, 255, 0.34)) saturate(1.15);
  }
}

@keyframes bannerIconPulse {
  0%,
  100% {
    transform: scale(0.96) rotate(-2deg);
  }

  50% {
    transform: scale(1.04) rotate(2deg);
  }
}

@keyframes heroLogoFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) scale(1.03) rotate(-1.2deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

.particle {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: var(--particle-size, 16px);
  height: var(--particle-size, 16px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--particle-opacity, 0.85);
  animation-name: floatParticle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity, filter;
}

.particle--star {
  background-image: url("../assets/icons/particle-star.svg");
  animation-name: floatParticle, starPulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: var(--particle-delay, 0s), 0s;
  animation-duration: var(--particle-duration, 12s), 4.6s;
}

.particle--computer {
  background-image: url("../assets/icons/particle-computer.svg");
  animation-name: floatParticle, iconPulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: var(--particle-delay, 0s), 0s;
  animation-duration: var(--particle-duration, 16s), 5.4s;
}

.particle--code {
  background-image: url("../assets/icons/particle-code.svg");
  animation-name: floatParticle, iconPulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: var(--particle-delay, 0s), 0s;
  animation-duration: var(--particle-duration, 15s), 5.8s;
}

.dev-banner-art {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  animation: bannerIconPulse 2.8s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 18px rgba(77, 163, 255, 0.24));
}

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

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

  .particles,
  .background {
    animation: none !important;
  }

  .particle {
    display: none;
  }

  .dev-banner-art {
    animation: none !important;
  }
}