/* ---------------------------------
   3D FLOATING ANIMATIONS
   --------------------------------- */
@keyframes floatY {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes float3D-1 {
  0% {
    transform: translateZ(20px) translateY(0px);
  }
  50% {
    transform: translateZ(20px) translateY(-8px);
  }
  100% {
    transform: translateZ(20px) translateY(0px);
  }
}

@keyframes float3D-2 {
  0% {
    transform: translateZ(40px) translateY(0px);
  }
  50% {
    transform: translateZ(40px) translateY(-12px);
  }
  100% {
    transform: translateZ(40px) translateY(0px);
  }
}

@keyframes float3D-3 {
  0% {
    transform: translateZ(60px) translateY(0px);
  }
  50% {
    transform: translateZ(60px) translateY(-6px);
  }
  100% {
    transform: translateZ(60px) translateY(0px);
  }
}

.float-y {
  animation: floatY 6s ease-in-out infinite;
}

.float-3d-1 {
  animation: float3D-1 5s ease-in-out infinite;
}

.float-3d-2 {
  animation: float3D-2 7s ease-in-out infinite;
}

.float-3d-3 {
  animation: float3D-3 6s ease-in-out infinite;
}

/* ---------------------------------
   PULSING DATA FLOW ALONG SVG LINES
   --------------------------------- */
@keyframes flowLine {
  to {
    stroke-dashoffset: -40;
  }
}

.pulse-flow-line {
  stroke-dasharray: 8, 12;
  animation: flowLine 2s linear infinite;
}

/* ---------------------------------
   SCROLL FADE-IN ANIMATION
   --------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers */
.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; }

/* ---------------------------------
   TIMELINE DOT PULSE
   --------------------------------- */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.timeline-dot-pulse {
  animation: pulseGlow 2s infinite;
}

/* Gradient text anim */
@keyframes textGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-text-animated {
  background: linear-gradient(90deg, #2563eb, #3b82f6, #06b6d4, #2563eb);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradient 6s ease infinite;
}