.reveal:not(.education-card) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible:not(.education-card) {
  opacity: 1;
  transform: translateY(0);
}

.education-card.reveal {
  opacity: 0;
  transform: translateX(var(--education-offset, 0));
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.education-card.reveal.visible {
  opacity: 1;
  transform: translateX(0);
}

.education-date.reveal {
  opacity: 0;
  transform: translateY(-50%) translateX(40px); /* Default slide from right */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.education-axis--left .education-date.reveal {
  transform: translateY(-50%) translateX(-40px); /* Slide from left for the left axis */
}

.education-date.reveal.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.typewriter-line {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 0.15em;
  width: 0;
  opacity: 0;
  animation: typewriter-reveal 0s linear var(--tw-delay, 0.3s) forwards,
    typewriter-typing var(--tw-duration, 2.4s)
      steps(var(--tw-steps, 21)) var(--tw-delay, 0.3s) 1 both;
}

.typewriter-line--caret {
  border-right: 2px solid transparent;
  padding-right: 0;
  animation: typewriter-reveal 0s linear var(--tw-delay, 0.3s) forwards,
    typewriter-typing var(--tw-duration, 2.4s)
      steps(var(--tw-steps, 21)) var(--tw-delay, 0.3s) 1 both,
    typewriter-caret calc(var(--tw-duration, 2.4s) + var(--tw-hold, 0s)) linear
      var(--tw-delay, 0.3s) 1 forwards;
}

.typewriter-suffix {
  opacity: 0;
  animation: typewriter-reveal 0s linear var(--tw-delay, 0.3s) forwards;
}

@keyframes typewriter-reveal {
  to {
    opacity: 1;
  }
}

@keyframes typewriter-typing {
  from {
    width: 0;
  }
  to {
    width: calc((var(--tw-steps, 21) - var(--tw-offset, 0)) * 1ch);
  }
}

@keyframes typewriter-caret {
  0%,
  90% {
    border-color: var(--color-ink);
  }
  100% {
    border-color: transparent;
  }
}