/* ════════════════════════════════════════════════════════
   ShinyText — vanilla CSS port (original: React + Motion)
   Uso: <span class="shiny-text">Texto</span>
   Variantes de velocidad: .shiny-text--slow / --fast
   Variante sobre fondo oscuro: .shiny-text--dark
   ════════════════════════════════════════════════════════ */

.shiny-text {
    display: inline-block;
    background-image: linear-gradient(
        120deg,
        var(--shiny-base, var(--gold, #D9A441)) 0%,
        var(--shiny-base, var(--gold, #D9A441)) 35%,
        var(--shiny-shine, var(--sun-neon, #FFE27A)) 50%,
        var(--shiny-base, var(--gold, #D9A441)) 65%,
        var(--shiny-base, var(--gold, #D9A441)) 100%
    );
    background-size: 200% auto;
    background-position: 150% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shinySweep 2.2s ease-in-out infinite;
    animation-delay: 0s;
}

/* Sobre fondos oscuros (nav, footer, hero) — más contraste con el sand/sun */
.shiny-text--dark {
    --shiny-base: var(--sand, #FDF8F0);
    --shiny-shine: var(--sun-neon, #FFE27A);
}

/* Sobre el botón dorado del nav (.nav-cta): base oscura para que el brillo se note */
.shiny-text--onbutton {
    --shiny-base: var(--sea-deep, #031815);
    --shiny-shine: var(--sand, #FDF8F0);
}

.shiny-text--slow { animation-duration: 3.6s; }
.shiny-text--fast { animation-duration: 1.4s; }

/* Pausa en hover — útil en botones/CTAs para no competir con el hover state */
.shiny-text--pause-hover:hover {
    animation-play-state: paused;
}

/* El barrido ocupa el 65% del ciclo y el resto queda "apagado" (shine fuera de vista),
   replicando la fase de pausa (delay) que el original maneja con RAF + progress motion value. */
@keyframes shinySweep {
    0%   { background-position: 150% center; }
    65%  { background-position: -50% center; }
    100% { background-position: -50% center; }
}

@media (prefers-reduced-motion: reduce) {
    .shiny-text {
        animation: none;
        background-position: 50% center;
    }
}