@keyframes preloader-safe-hide {
  0%, 88% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes pixel-pop {
  0% { transform: scale(0.65); opacity: 0; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes reveal-pop {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pixel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes status-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.45; }
}

@keyframes red-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.reveal,
.reveal-left,
.reveal-right {
  opacity: 1;
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
  animation: reveal-pop 420ms cubic-bezier(.2,.8,.2,1) both;
}

.animate-float {
  animation: pixel-float 3s steps(6, end) infinite;
}

.animate-glow-pulse,
.animate-text-glow {
  animation: red-pulse 1.8s steps(4, end) infinite;
}

.delay-100.active { animation-delay: 80ms; }
.delay-200.active { animation-delay: 140ms; }
.delay-300.active { animation-delay: 200ms; }
.delay-400.active { animation-delay: 260ms; }
.delay-500.active { animation-delay: 320ms; }

@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-canvas {
    display: none;
  }
}