@keyframes hero-illustration-alive {
  0%, 100% {
    transform: scale(1.06) translateY(0) translateX(0) rotate(0deg);
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
  }
  25% {
    transform: scale(1.07) translateY(-12px) translateX(4px) rotate(0.6deg);
    filter: drop-shadow(0 28px 52px rgba(37, 99, 235, 0.35));
  }
  50% {
    transform: scale(1.05) translateY(-6px) translateX(-3px) rotate(-0.4deg);
    filter: drop-shadow(0 22px 44px rgba(6, 182, 212, 0.25));
  }
  75% {
    transform: scale(1.065) translateY(-10px) translateX(2px) rotate(0.3deg);
    filter: drop-shadow(0 26px 50px rgba(124, 58, 237, 0.2));
  }
}

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes grid-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 24px); }
}

@keyframes service-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes service-card-glow {
  0%, 100% {
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.35),
      0 0 24px rgba(37, 99, 235, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 6px 28px rgba(0, 0, 0, 0.38),
      0 0 36px rgba(124, 58, 237, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
}

@keyframes service-icon-alive {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: translateY(-2px) scale(1.06);
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.55));
  }
}

@keyframes service-icon-ring {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.08);
  }
}

@keyframes service-shine-sweep {
  0% {
    transform: translateX(-30%) skewX(-16deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateX(320%) skewX(-16deg);
    opacity: 0;
  }
}

@keyframes marquee-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes about-ring-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-50%) scale(1.03);
  }
}

@keyframes about-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes about-node-float {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-10px); opacity: 1; }
}

@keyframes process-energy-flow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes process-energy-flow-vertical {
  0% { background-position: 0 200%; }
  100% { background-position: 0 -200%; }
}

@keyframes process-spark-travel {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 40px); opacity: 0; }
}

@keyframes process-spark-travel-y {
  0% { top: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}

@keyframes process-node-ring {
  0% {
    transform: scale(0.92);
    opacity: 0.65;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@keyframes process-node-glow {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(37, 99, 235, 0.25),
      inset 0 0 12px rgba(6, 182, 212, 0.08);
  }
  50% {
    box-shadow:
      0 0 28px rgba(6, 182, 212, 0.45),
      0 0 48px rgba(124, 58, 237, 0.2),
      inset 0 0 16px rgba(6, 182, 212, 0.15);
  }
}

@keyframes about-line-glow {
  0%, 100% { stroke-opacity: 0.45; stroke-dashoffset: 24; }
  50% { stroke-opacity: 0.85; stroke-dashoffset: 0; }
}

@keyframes depth-glow-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.75;
  }
  33% {
    transform: translate(2%, -3%) scale(1.04);
    opacity: 0.95;
  }
  66% {
    transform: translate(-2%, 2%) scale(0.98);
    opacity: 0.8;
  }
}

@keyframes depth-pattern-drift {
  0% { background-position: 0 0; }
  100% { background-position: 56px 56px; }
}

@keyframes depth-particle-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.15;
  }
  25% {
    opacity: 0.85;
  }
  50% {
    transform: translateY(-18px) translateX(6px);
    opacity: 0.55;
  }
  75% {
    opacity: 0.7;
  }
}

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

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

@keyframes scroll-indicator {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
}

@keyframes data-pulse {
  0% { stroke-dashoffset: 100; opacity: 0; }
  50% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-scale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes timeline-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.animate-float { animation: float var(--duration-float) ease-in-out infinite; }
.animate-float-slow { animation: float-slow 10s ease-in-out infinite; }
.animate-hero-alive { animation: hero-illustration-alive 9s ease-in-out infinite; }
.animate-float-delay-1 { animation-delay: -2s; }
.animate-float-delay-2 { animation-delay: -4s; }
.animate-float-delay-3 { animation-delay: -6s; }

.hero-animate-eyebrow { animation: fade-up 0.6s var(--ease-out) 0.2s both; }
.hero-animate-title { animation: fade-up 0.6s var(--ease-out) 0.4s both; }
.hero-animate-desc { animation: fade-up 0.6s var(--ease-out) 0.6s both; }
.hero-animate-buttons { animation: fade-up 0.6s var(--ease-out) 0.8s both; }
.hero-animate-chips { animation: fade-up 0.6s var(--ease-out) 1s both; }
.hero-animate-illustration { animation: fade-scale 0.8s var(--ease-out) 1.2s both; }

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-float-slow,
  .animate-hero-alive,
  .hero-animate-eyebrow,
  .hero-animate-title,
  .hero-animate-desc,
  .hero-animate-buttons,
  .hero-animate-chips,
  .hero-animate-illustration,
  .service-card,
  .service-card::before,
  .service-card__icon,
  .service-card__icon::before,
  .service-card__icon svg {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .animate-hero-alive {
    transform: scale(1.06);
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
  }

  .hero__visual::before {
    animation: none;
  }

  .about__ring,
  .about__node,
  .about__connection-path,
  .process__line-pulse,
  .process__line-fill--live,
  .process__node::after,
  .depth-glow,
  .depth-pattern--grid-dark,
  .depth-particle {
    animation: none;
  }

  .depth-particle {
    opacity: 0.3;
  }
}