@keyframes appear {
  0% { opacity: 0; transform: translateY(50px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes build {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideCode {
  0% { transform: translateY(100%); }
  10% { transform: translateY(0); }
  90% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes typeLine {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes gridAnim {
  from { background-position: 0 0; }
  to { background-position: 300px 0; }
}

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

@keyframes rotate {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

@keyframes buildApp {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  25% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
  75% { opacity: 0.5; transform: scale(0.9); }
}

@keyframes fadeInUp {
  0%, 100% { opacity: 0; transform: translateY(20px); }
  25%, 75% { opacity: 1; transform: translateY(0); }
}

@keyframes buildDesktopApp {
  to {
    opacity: 1;
    transform: rotateY(10deg) translateZ(0);
  }
}

@keyframes buildComponent {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseShield {
  0% {
    box-shadow: 0 0 25px var(--neon-blue);
  }
  100% {
    box-shadow: 0 0 40px var(--neon-blue);
  }
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}