/* Typing effect */
@keyframes typing {
  from { width: 0ch; }
  to { width: 15ch; } /* match the number of characters */
}

@keyframes blink {
  0%, 50%, 100% { border-color: transparent; }
  25%, 75% { border-color: white; }
}
.animate-typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid white;
  animation: typing 3s steps(15, end), blink 1s step-end infinite;
}

/* Wave animation for 👋 */
@keyframes wave {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(20deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(15deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.animate-wave {
  display: inline-block;
  animation: wave 2s infinite;
  transform-origin: 70% 70%;
}

/* Gradient background animation */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.bg-animate {
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

/* LETS COLLABORATE ANIMATION*/

@keyframes pulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(99, 102, 241, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(99, 102, 241, 0.7); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(99, 102, 241, 0.7); }
}

.animate-collab {
  animation: pulseBtn 2s infinite;
}

/* Optional hover enhancement */
#contactBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.9);
}

/*modal animations*/

/* Modal fade + scale animation */

@keyframes modalIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Apply when modal opens */
.modal-show {
  animation: modalIn 0.3s ease forwards;
}

/* Apply when modal closes */
.modal-hide {
  animation: modalOut 0.2s ease forwards;
}