/* css/text-animations.css — Title text animations for section headings */

@keyframes gradient-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow-pulse-text {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(51, 204, 255, 0.3),
      0 0 20px rgba(51, 204, 255, 0.1);
  }
  50% {
    text-shadow:
      0 0 16px rgba(51, 204, 255, 0.6),
      0 0 40px rgba(102, 255, 153, 0.2),
      0 0 60px rgba(51, 204, 255, 0.1);
  }
}

@keyframes letter-breathe {
  0%, 100% { letter-spacing: 0.04em; }
  50%      { letter-spacing: 0.10em; }
}

.title-gradient {
  background: linear-gradient(
    270deg,
    var(--accent-2), var(--accent-3),
    var(--accent-4), var(--accent-2)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-sweep 6s ease infinite;
}

.title-glow {
  animation: glow-pulse-text 4s ease-in-out infinite;
}

.title-breathe {
  animation: letter-breathe 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .title-gradient,
  .title-glow,
  .title-breathe {
    animation: none;
  }
  .title-gradient {
    -webkit-text-fill-color: var(--accent-2);
    background: none;
  }
}