/* TYPEWRITER */

@keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width:8ch;
    }
  }
  
  @keyframes blink {
    from, to {
      border-color: transparent;
    }
    50% {
      border-color: var(--mainColor);
    }
  }
  
  #hero h1{
    font-family: "JetBrains Mono", monospace;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--mainColor); /* Define el caret */
    width: 0; /* Comienza desde 0 */
    animation: typewriter 3s steps(12) 1s forwards, blink 0.75s step-end infinite;
  }
  
  #hero h1::after {
    content: "";
    border-right: 2px solid var(--mainColor); /* El caret */
    display: inline-block;
    animation: blink 0.75s step-end infinite; /* Parpadeo continuo */
  }

/* FADE IN */
.hero {
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* BOUNCE */
  @keyframes bounce {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(15px);
    }
}