<span class="tv-gradient-text" style="--tv-gradient-text-stops: #F87171 0%, #FBBF24 16%, #FACC15 33%, #4ADE80 50%, #22D3EE 66%, #818CF8 83%, #E879F9 100%; --tv-gradient-text-angle: 90deg; --tv-gradient-text-weight: 800; --tv-gradient-text-spread: 250%; --tv-gradient-text-glow-color: #FFFFFF66; --tv-gradient-text-glow-blur: 4px; --tv-gradient-text-motion: tv-gradient-text-sweep 5s linear infinite; --tv-gradient-text-pulse: tv-gradient-text-soft 3s ease-in-out infinite;">Lost Fantasy</span>

<style>
.tv-gradient-text {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  background-image: linear-gradient(
    var(--tv-gradient-text-angle, 90deg),
    var(--tv-gradient-text-stops, #fdba74 0%, #f97316 50%, #dc2626 100%)
  );
  background-size: var(--tv-gradient-text-spread, 100%) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--tv-gradient-text-weight, 700);
  filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 0px) var(--tv-gradient-text-glow-color, transparent));
  animation: var(--tv-gradient-text-motion, none), var(--tv-gradient-text-pulse, none);
}

@keyframes tv-gradient-text-slide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes tv-gradient-text-sweep {
  to { background-position: var(--tv-gradient-text-spread, 100%) 50%; }
}

@keyframes tv-gradient-text-soft {
  0%, 100% { filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 4px) var(--tv-gradient-text-glow-color, #ffffff66)); }
  50% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 2) var(--tv-gradient-text-glow-color, #ffffff66)); }
}

@keyframes tv-gradient-text-flicker {
  0%, 100% { filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 4px) var(--tv-gradient-text-glow-color, #ef44448c)); }
  45% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 1.75) var(--tv-gradient-text-glow-color, #ef44448c)); }
  70% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 0.75) var(--tv-gradient-text-glow-color, #ef44448c)); }
}

@media (prefers-reduced-motion: reduce) {
  .tv-gradient-text { animation: none; }
}
</style>

.my-gradient-text {
  --tv-gradient-text-stops: #F87171 0%, #FBBF24 16%, #FACC15 33%, #4ADE80 50%, #22D3EE 66%, #818CF8 83%, #E879F9 100%;
  --tv-gradient-text-angle: 90deg;
  --tv-gradient-text-weight: 800;
  --tv-gradient-text-spread: 250%;
  --tv-gradient-text-glow-color: #FFFFFF66;
  --tv-gradient-text-glow-blur: 4px;
  --tv-gradient-text-motion: tv-gradient-text-sweep 5s linear infinite;
  --tv-gradient-text-pulse: tv-gradient-text-soft 3s ease-in-out infinite;
}

.tv-gradient-text {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  background-image: linear-gradient(
    var(--tv-gradient-text-angle, 90deg),
    var(--tv-gradient-text-stops, #fdba74 0%, #f97316 50%, #dc2626 100%)
  );
  background-size: var(--tv-gradient-text-spread, 100%) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--tv-gradient-text-weight, 700);
  filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 0px) var(--tv-gradient-text-glow-color, transparent));
  animation: var(--tv-gradient-text-motion, none), var(--tv-gradient-text-pulse, none);
}

@keyframes tv-gradient-text-slide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes tv-gradient-text-sweep {
  to { background-position: var(--tv-gradient-text-spread, 100%) 50%; }
}

@keyframes tv-gradient-text-soft {
  0%, 100% { filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 4px) var(--tv-gradient-text-glow-color, #ffffff66)); }
  50% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 2) var(--tv-gradient-text-glow-color, #ffffff66)); }
}

@keyframes tv-gradient-text-flicker {
  0%, 100% { filter: drop-shadow(0 0 var(--tv-gradient-text-glow-blur, 4px) var(--tv-gradient-text-glow-color, #ef44448c)); }
  45% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 1.75) var(--tv-gradient-text-glow-color, #ef44448c)); }
  70% { filter: drop-shadow(0 0 calc(var(--tv-gradient-text-glow-blur, 4px) * 0.75) var(--tv-gradient-text-glow-color, #ef44448c)); }
}

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