/**
 * animations.css
 * ---------------------------------------------------------------------------
 * Keyframes used by hero backgrounds, decorative motion, and ambient effects.
 * All animations are disabled by the global prefers-reduced-motion rule in
 * global.css, so they are safe to use freely.
 */

/* Slowly drift radial-gradient stops for the hero mesh background. */
@keyframes gradient-shift {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      50% 100%;
  }
  50% {
    background-position:
      100% 100%,
      0% 100%,
      50% 0%;
  }
  100% {
    background-position:
      0% 0%,
      100% 0%,
      50% 100%;
  }
}

/* Soft vertical float for decorative shapes / icons. */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Slow rotation for ambient rings. */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulsing glow for accent dots / status indicators. */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Nav backdrop blur is handled via class toggle, but the entry of the nav uses
 * a fade-down so it doesn't pop on first paint. */
@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility classes bound to the keyframes above. */
.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 18s var(--ease-in-out-soft, ease-in-out) infinite;
}
.animate-float {
  animation: float 6s var(--ease-in-out-soft, ease-in-out) infinite;
}
.animate-spin-slow {
  animation: spin-slow 40s linear infinite;
}
.animate-pulse-glow {
  animation: pulse-glow 4s var(--ease-in-out-soft, ease-in-out) infinite;
}
.animate-fade-down {
  animation: fade-down 0.5s var(--ease-out-soft, ease-out) both;
}