/* ==========================================================================
   NEXO MARKETING — ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* Neon Dot Pulse */
@keyframes pulseNeonDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px var(--color-neon-green);
  }
  50% {
    transform: scale(1.4);
    opacity: 0.7;
    box-shadow: 0 0 16px var(--color-neon-green), 0 0 24px var(--color-electric-green);
  }
}

/* WhatsApp Pulse Ring */
@keyframes pulseWaRing {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Infinite Marquee */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Gentle Floating Card */
@keyframes cyberFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: cyberFloat 5s ease-in-out infinite;
}

/* Shimmer scan line */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(1000%);
  }
}

.has-scanline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-neon-green), transparent);
  opacity: 0.4;
  animation: scanline 6s linear infinite;
  pointer-events: none;
}

/* Toast In Animation */
@keyframes slideToastIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Scroll Reveal States */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay classes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Interactive Hover Glow utility */
.hover-neon-glow {
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hover-neon-glow:hover {
  border-color: var(--color-neon-green);
  box-shadow: 0 0 25px rgba(102, 255, 0, 0.3);
}

/* Particle Canvas Layer */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.65;
}