/* ==========================================================================
   Animations: Keyframes, Transitions, Hover Effects
   ========================================================================== */

/* ── Fade variants ── */

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

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

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

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

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

/* ── Floating (orbs) ── */

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(15px, -20px) scale(1.02); }
  50% { transform: translate(-10px, -35px) scale(0.98); }
  75% { transform: translate(20px, -15px) scale(1.01); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-20px, 15px) scale(0.98); }
  50% { transform: translate(15px, 25px) scale(1.03); }
  75% { transform: translate(-10px, 10px) scale(0.99); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -10px) scale(1.01); }
  66% { transform: translate(-15px, 20px) scale(0.97); }
}

/* ── Pulse ── */

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 223, 176, 0.2); }
  50% { box-shadow: 0 0 20px 5px rgba(91, 223, 176, 0.1); }
}

/* ── Scanline (AI section) ── */

@keyframes scanline {
  0% { top: 0; opacity: 1; }
  50% { opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}

/* ── Radar chart draw ── */

@keyframes radarDraw {
  from {
    stroke-dashoffset: 1000;
    fill-opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

/* ── Bar chart grow ── */

@keyframes barGrow {
  from { height: 0; }
  to { height: var(--h); }
}

/* ── Rotate subtle ── */

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Scale in ── */

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

/* ── Slide in stagger helper ── */

.stagger > * {
  opacity: 0;
}

.stagger.animated > * {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.stagger.animated > *:nth-child(1) { animation-delay: 0ms; }
.stagger.animated > *:nth-child(2) { animation-delay: 80ms; }
.stagger.animated > *:nth-child(3) { animation-delay: 160ms; }
.stagger.animated > *:nth-child(4) { animation-delay: 240ms; }
.stagger.animated > *:nth-child(5) { animation-delay: 320ms; }
.stagger.animated > *:nth-child(6) { animation-delay: 400ms; }
.stagger.animated > *:nth-child(7) { animation-delay: 480ms; }
.stagger.animated > *:nth-child(8) { animation-delay: 560ms; }

/* ── GSAP initial states ── */

.gsap-reveal {
  opacity: 0;
  transform: translateY(40px);
}

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

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

.gsap-scale {
  opacity: 0;
  transform: scale(0.92);
}

/* ── Hover tilt (3D) ── */

.tilt-3d {
  transition: transform var(--duration-base) var(--ease-out);
  transform-style: preserve-3d;
}

.tilt-3d:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
}