/* === Typed text blinking cursor effect === */
#typed-text::after {
  content: '|';
  animation: blink 1s steps(1) infinite;
  margin-left: 3px;
  color: var(--primary-color);
  will-change: opacity; /* Optimize blinking animation */
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* === Smooth scroll for anchor links === */
html {
  scroll-behavior: smooth;
}

/* === Fade-in animation on scroll === */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.3s;
  will-change: opacity, transform;
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  #typed-text::after,
  button:focus-visible {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Back to top button fade behavior === */
#back-to-top {
  opacity: 0;
  pointer-events: none; /* Prevent clicks when hidden */
  transition: opacity 0.3s ease;
}

#back-to-top.show {
  opacity: 1;
  pointer-events: auto; /* Enable clicks when visible */
}

/* === Button pulse on keyboard focus === */
button:hover {
  animation-play-state: paused; /* Disable for mouse users */
}

button:focus-visible {
  animation: pulse 1.2s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(168, 156, 255, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 8px 6px rgba(168, 156, 255, 0.4);
  }
}