/* ============================================
   Agent IQ — Animation Keyframes & Classes
   ============================================ */

/* ---- Keyframes ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(79, 142, 247, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(79, 142, 247, 0.4);
  }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes scroll-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(10px);
    opacity: 0.5;
  }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes cursor-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.1;
  }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Animation Classes (used by GSAP and CSS) ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s var(--ease-out);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s var(--ease-out);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
  transition: all 0.8s var(--ease-out);
}

/* Stagger delays for children */
.stagger-1 { transition-delay: 0.1s !important; }
.stagger-2 { transition-delay: 0.2s !important; }
.stagger-3 { transition-delay: 0.3s !important; }
.stagger-4 { transition-delay: 0.4s !important; }
.stagger-5 { transition-delay: 0.5s !important; }
.stagger-6 { transition-delay: 0.6s !important; }

/* ---- Floating / Ambient Animations ---- */
.float {
  animation: float 6s ease-in-out infinite;
}

.float--delay-1 { animation-delay: -1s; }
.float--delay-2 { animation-delay: -2s; }
.float--delay-3 { animation-delay: -3s; }

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* ---- Scroll Indicator ---- */
.scroll-indicator {
  animation: scroll-bounce 2s ease-in-out infinite;
}

/* ---- Logo Marquee ---- */
.marquee {
  animation: marquee 30s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

/* ---- Page Load Animations ---- */
.hero-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s var(--ease-out) forwards;
}

.hero-animate--1 { animation-delay: 0.2s; }
.hero-animate--2 { animation-delay: 0.4s; }
.hero-animate--3 { animation-delay: 0.6s; }
.hero-animate--4 { animation-delay: 0.8s; }
.hero-animate--5 { animation-delay: 1.0s; }

/* ---- Magnetic Effect (applied by JS) ---- */
.magnetic {
  transition: transform 0.3s var(--ease-out);
}

/* ---- Glow Ring (decorative) ---- */
.glow-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(79, 142, 247, 0.1);
  pointer-events: none;
}

.glow-ring--1 {
  width: 400px;
  height: 400px;
  animation: spin-slow 30s linear infinite;
}

.glow-ring--2 {
  width: 600px;
  height: 600px;
  animation: spin-slow 45s linear infinite reverse;
}