/* ============================================
   ANIMATIONS
   ============================================ */

/* Slide In Up */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Section Fade In */
@keyframes sectionFadeIn {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

/* Robot Entrance */
@keyframes robotEntrance {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Robot Float */
@keyframes robot-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Slide In Right */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Fade Out */
@keyframes fadeOut {
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

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

/* Section Visible Class */
.section-visible {
  animation: sectionFadeIn 0.8s ease-out forwards;
}

/* Animated Elements */
.animated {
  opacity: 1;
}

/* Robot Animation */
.robot-anim.animated {
  animation-name: robot-float, robotEntrance;
  animation-duration: 3.2s, 0.8s;
  animation-timing-function: ease-in-out, ease-out;
  animation-iteration-count: infinite, 1;
  animation-direction: alternate, normal;
}

/* Mobile Animations */
@media (max-width: 768px) {
  @keyframes slideInRight {
    from {
      transform: translateY(-100px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    to {
      transform: translateY(-100px);
      opacity: 0;
    }
  }
}