/* Typing Animation Styles */

/* Cursor blinking effect */
@keyframes blink-cursor {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Cursor styling */
.cursor {
  display: inline-block;
  color: var(--primary);
  font-weight: bold;
  animation: blink-cursor 0.75s step-end infinite;
  margin-left: 1px;
  position: relative;
  top: -1px;
  white-space: nowrap;
}

/* Hero section typing specific styles */
.hero-content h1,
.hero-content h2,
.hero-content p {
  position: relative;
  white-space: normal;
  overflow: visible;
}

/* Typing text container */
.typing-text {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  width: 100%;
}

/* Gradient text styling for the title */
.gradient-text span {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Fade-in animation for hero content */
.hero-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ensure buttons are hidden initially and fade in after typing */
.hero-buttons {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Add a subtle highlight effect to the text being typed */
@keyframes highlight {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

.typing-highlight {
  background: linear-gradient(
    90deg,
    rgba(var(--primary-rgb), 0.1) 0%,
    rgba(var(--primary-rgb), 0) 50%,
    rgba(var(--primary-rgb), 0.1) 100%
  );
  background-size: 200% 100%;
  animation: highlight 2s ease infinite;
  border-radius: 4px;
  padding: 0 4px;
}