/* ============================================
   ANIMATIONS FOR 444 SYSTEM
   ============================================ */

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

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

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

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

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

@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(45, 80, 22, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(45, 80, 22, 0.5));
  }
}

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

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

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

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

@keyframes scanlines {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes neon-flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(45, 80, 22, 0.4), 0 0 30px rgba(45, 80, 22, 0.2);
  }
  20%,
  24%,
  55% {
    text-shadow: 0 0 5px rgba(45, 80, 22, 0.3);
  }
}

@keyframes backgroundShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes glowPulse {
  0%,
  100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
      0 0 40px rgba(45, 80, 22, 0.2), 0 0 60px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8),
      0 0 50px rgba(45, 80, 22, 0.3), 0 0 80px rgba(255, 255, 255, 0.4);
  }
}

@keyframes makeHeart {
  0% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-20px) scale(1);
  }
  60% {
    transform: translateY(-20px) scale(1.1);
  }
  80% {
    transform: translateY(-15px) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes leftFingerHeart {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  25% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(-25deg) translateX(-10px);
  }
  75% {
    transform: rotate(-25deg) translateX(-10px);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}

@keyframes rightFingerHeart {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  25% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(25deg) translateX(10px);
  }
  75% {
    transform: rotate(25deg) translateX(10px);
  }
  100% {
    transform: rotate(0deg) translateX(0);
  }
}

@keyframes fingerGlow {
  0%,
  100% {
    opacity: 0.4;
    filter: drop-shadow(0 0 5px currentColor);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 15px currentColor);
  }
}

/* Smooth transitions */
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Specific animation triggers */
.fade-in {
  animation: fadeInUp 1s ease forwards;
}

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

.pulse-glow {
  animation: glow 2s ease-in-out infinite;
}

@keyframes robotHeartBeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes robotHeartBeatFast {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glowIntense {
  0%,
  100% {
    filter: drop-shadow(0 0 15px rgba(45, 80, 22, 0.6))
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(45, 80, 22, 0.8))
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
  }
}