/* ===================================
   Keyframe Animations
   =================================== */

/* Floating/Bobbing Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Gentle Pulse */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Rotating Gears */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

/* Blinking Animation - uses opacity to avoid position issues */
@keyframes blink {
  0%, 90%, 100% {
    opacity: 1;
  }
  95% {
    opacity: 0.1;
  }
}

/* Waving Animation */
@keyframes wave {
  0%, 100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

/* Heart Glow */
@keyframes heart-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px var(--color-accent-green));
  }
  50% {
    filter: drop-shadow(0 0 15px var(--color-accent-green)) drop-shadow(0 0 25px var(--color-accent-green));
  }
}

/* Antenna Blink */
@keyframes antenna-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Circuit Flow */
@keyframes circuit-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* Fade In Up */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Background Element Pulse */
@keyframes pulse-bg {
  0%, 100% {
    transform: scale(1);
    opacity: inherit;
  }
  50% {
    transform: scale(1.15);
    opacity: calc(inherit * 1.3);
  }
}

/* Drift Animation for background elements */
@keyframes drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -10px) rotate(5deg);
  }
  50% {
    transform: translate(0, -20px) rotate(0deg);
  }
  75% {
    transform: translate(-10px, -10px) rotate(-5deg);
  }
}

/* Flicker for electronic elements */
@keyframes flicker {
  0%, 100% {
    opacity: inherit;
  }
  10% {
    opacity: calc(inherit * 0.8);
  }
  20% {
    opacity: inherit;
  }
  30% {
    opacity: calc(inherit * 0.6);
  }
  40% {
    opacity: inherit;
  }
}

/* ===================================
   Robot Dance Animation
   =================================== */
@keyframes dance {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(-10px) translateY(-5px) rotate(-3deg);
  }
  50% {
    transform: translateX(0) translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateX(10px) translateY(-5px) rotate(3deg);
  }
}

/* Arms swing during dance - requires per-robot transform-origin set via JS */
@keyframes dance-arms {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  75% {
    transform: rotate(20deg);
  }
}

/* Robot Walk Animation */
@keyframes walk {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-8px) rotate(-2deg);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes walk-legs {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

/* Robot Build/Work Animation */
@keyframes build {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

/* Arm moves in working motion - requires per-robot transform-origin set via JS */
@keyframes build-arm {
  0%, 100% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(-25deg);
  }
}

/* Robot Excited Animation */
@keyframes excited {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-20px) scale(1.02);
  }
  50% {
    transform: translateY(-5px) scale(1);
  }
  75% {
    transform: translateY(-15px) scale(1.01);
  }
}

/* Arms raise up with excitement - requires per-robot transform-origin set via JS */
@keyframes excited-arms {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(-35deg);
  }
}

@keyframes excited-antenna {
  0%, 50%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px currentColor);
  }
  25%, 75% {
    opacity: 0.6;
    filter: drop-shadow(0 0 15px currentColor);
  }
}

/* ===================================
   Apply Animations
   =================================== */

/* Robot Mascot Floating */
.robot-mascot {
  animation: float 4s ease-in-out infinite;
}

/* Robot Eyes Blinking */
.robot-eyes {
  animation: blink 4s ease-in-out infinite;
  animation-delay: 2s;
}

/* Waving Arm */
.right-arm.waving {
  transform-origin: 175px 150px;
  animation: wave 1s ease-in-out infinite;
}

/* Heart Glow */
.heart-glow {
  animation: heart-glow 2s ease-in-out infinite;
}

/* Antenna Light */
.antenna-light {
  animation: antenna-blink 1.5s ease-in-out infinite;
}

/* Rotating Gears */
.gear-1 {
  animation: spin 20s linear infinite;
}

.gear-2 {
  animation: spin-reverse 15s linear infinite;
}

.gear-3 {
  animation: spin 25s linear infinite;
}

/* Circuit Pattern Flow */
.circuit-pattern {
  animation: circuit-flow 30s linear infinite;
}

/* ===================================
   Particle Effects
   =================================== */

/* Welding Spark - sprays outward and falls */
@keyframes spark-spray {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--spark-x, 20px), var(--spark-y, 30px)) scale(0.3);
    opacity: 0;
  }
}

/* Steam/Smoke - rises and fades */
@keyframes smoke-rise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px) scale(1.5);
    opacity: 0;
  }
}

/* Electric flicker */
@keyframes electric-flicker {
  0%, 100% {
    opacity: 0;
  }
  10%, 30% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
  50%, 70%, 90% {
    opacity: 0.8;
  }
}

/* Motion blur trail */
@keyframes motion-trail {
  0% {
    opacity: 0.6;
    transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg);
  }
}

/* Particle container */
.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Individual particles */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.particle-spark {
  width: 4px;
  height: 4px;
  background: #FFD700;
  box-shadow: 0 0 6px #FF6B4A, 0 0 10px #FFD700;
  animation: spark-spray 0.6s ease-out forwards;
}

.particle-smoke {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, rgba(200,200,200,0.6) 0%, rgba(150,150,150,0) 70%);
  animation: smoke-rise 2s ease-out forwards;
}

.particle-electric {
  width: 3px;
  height: 8px;
  background: #FF4444;
  box-shadow: 0 0 8px #FF0000;
  animation: electric-flicker 0.3s steps(2) infinite;
}

.particle-steam {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(200,200,200,0) 70%);
  animation: smoke-rise 1.5s ease-out forwards;
}

/* ===================================
   Robot Animation Modes
   =================================== */

/* Dancing Robot */
.robot-mascot.animation-dance {
  animation: dance 1.5s ease-in-out infinite;
}

.robot-mascot.animation-dance .right-arm,
.robot-mascot.animation-dance .left-arm {
  animation: dance-arms 0.75s ease-in-out infinite;
}

/* Walking Robot */
.robot-mascot.animation-walk {
  animation: walk 0.8s ease-in-out infinite;
}

/* Building Robot */
.robot-mascot.animation-build {
  animation: build 2s ease-in-out infinite;
}

.robot-mascot.animation-build .right-arm {
  animation: build-arm 1s ease-in-out infinite;
}

/* Excited Robot */
.robot-mascot.animation-excited {
  animation: excited 0.6s ease-in-out infinite;
}

.robot-mascot.animation-excited .right-arm,
.robot-mascot.animation-excited .left-arm {
  animation: excited-arms 0.3s ease-in-out infinite;
}

.robot-mascot.animation-excited .antenna-light {
  animation: excited-antenna 0.2s ease-in-out infinite;
}

/* ===================================
   Hover Animations
   =================================== */

/* Button Glow on Hover */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

/* Card Tilt Effect */
.feature-card,
.connect-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card:hover,
.connect-card:hover {
  transform: translateY(-4px) rotateX(2deg);
}

/* Icon Bounce on Card Hover */
.feature-card:hover .feature-icon,
.connect-card:hover .connect-icon {
  animation: float 0.5s ease-in-out;
}

/* Meeting Card Glow */
.meeting-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--gradient-accent);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-base);
}

.meeting-card {
  position: relative;
}

.meeting-card:hover::before {
  opacity: 0.3;
}

/* ===================================
   Logo Animation
   =================================== */
.logo-icon {
  transition: transform var(--transition-base);
}

.logo:hover .logo-icon {
  transform: rotate(10deg) scale(1.1);
}

/* ===================================
   Nav Link Underline Animation
   =================================== */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base), left var(--transition-base);
}

.nav-links a:hover::after {
  width: 80%;
  left: 10%;
}

/* ===================================
   Footer Robot Hover
   =================================== */
.footer-robot svg {
  transition: transform var(--transition-base);
}

.site-footer:hover .footer-robot svg {
  transform: rotate(-10deg);
}

/* ===================================
   Staggered Animation Delays
   =================================== */
.features-grid .feature-card:nth-child(1) {
  transition-delay: 0ms;
}

.features-grid .feature-card:nth-child(2) {
  transition-delay: 100ms;
}

.features-grid .feature-card:nth-child(3) {
  transition-delay: 200ms;
}

.connect-grid .connect-card:nth-child(1) {
  transition-delay: 0ms;
}

.connect-grid .connect-card:nth-child(2) {
  transition-delay: 100ms;
}

.connect-grid .connect-card:nth-child(3) {
  transition-delay: 200ms;
}

/* ===================================
   Scroll-Triggered Animation States
   =================================== */
.animate-on-scroll.animate-in {
  animation: fade-in-up 0.6s ease forwards;
}