/* make sure gradient keyframes exist (copy if missing) */

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

/* core gradient look — apply once */

.rotating-gradient-text {
  background: linear-gradient(90deg, #3F00FF 0%, #F6B025 50%, #3F00FF 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  will-change: background-position;
  transform: translateZ(0);
}

/* combine the entrance animation + the infinite gradient.
   adjust the slideSoftDown timing to match your existing rule (4s here). */

.animate-fade.run.rotating-gradient-text {
  animation:  slideSoftDown 10s var(--d,0s) cubic-bezier(.19,1,.22,1) forwards, gradientShift var(--gradient-duration,6s) linear infinite;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ensure the gradient never pauses (some scripts or :hover rules pause animations) */

.rotating-gradient-text, .rotating-gradient-text * {
  animation-play-state: running !important;
}

/* reduced motion respect */

@media (prefers-reduced-motion: reduce) {
  .animate-fade.run.rotating-gradient-text {
    animation: slideSoftDown 10s var(--d,0s) cubic-bezier(.19,1,.22,1) forwards;
    background-position: 50% 50% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotating-gradient-text {
    animation: none !important;
  }
}