.typing-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 2.5rem;
  color: #1f2937;
}
.type-text {
  color: #3b82f6;
  font-weight: 700;
}
.cursor {
  animation: blink 1s step-end infinite;
  color: #374151;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

const textElement = document.querySelector(".type-text");
const words = ["Developer", "Designer", "Creator", "Freelancer"];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;

const typeEffect = () => {
  const currentWord = words[wordIndex];
  
  if (isDeleting) {
    charIndex--;
    textElement.textContent = currentWord.substring(0, charIndex);
  } else {
    charIndex++;
    textElement.textContent = currentWord.substring(0, charIndex);
  }

  if (!isDeleting && charIndex === currentWord.length) {
    isDeleting = true;
    setTimeout(typeEffect, 2000); // Pause at end
  } else if (isDeleting && charIndex === 0) {
    isDeleting = false;
    wordIndex = (wordIndex + 1) % words.length;
    setTimeout(typeEffect, 500); // Pause before typing new word
  } else {
    setTimeout(typeEffect, isDeleting ? 100 : 200); // Speed
  }
};

typeEffect();