/* ===================================================================
   Typing Effect - Magical Shimmer and Glow Animations
   =================================================================== */

/* Magical shimmer effect when typing completes */
.text-shimmer {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--color-purple-500) 0%,
    var(--color-cyan-300) 50%,
    var(--color-purple-500) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Magical glow effect behind text */
.text-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-purple-500) 0%,
    var(--color-cyan-300) 50%,
    var(--color-purple-500) 100%
  );
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .text-shimmer {
    animation: none;
    background-position: 0% 50%;
    background: var(--color-accent-gradient);
  }

  .text-shimmer::before {
    animation: none;
    opacity: 0.4;
  }
}