/* animaciones de shimmer, fuego, pulsar, etc. */

/* Gold Shimmer Text Effect */
.gold-shimmer {
    background: linear-gradient(-45deg,
            var(--color-gold) 40%,
            #fff 50%,
            var(--color-gold) 60%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: goldShimmer 3s infinite linear;
    display: inline-block;
}

@keyframes goldShimmer {
    to {
        background-position: 200% center;
    }
}

/* Pulsing Glow Border */
.pulse-glow {
    animation: pulseBorder 2s infinite alternate;
}

@keyframes pulseBorder {
    from {
        box-shadow: 0 0 10px rgba(201, 168, 76, 0.3), inset 0 0 10px rgba(201, 168, 76, 0.1);
    }

    to {
        box-shadow: 0 0 25px rgba(201, 168, 76, 0.8), inset 0 0 15px rgba(201, 168, 76, 0.3);
    }
}

/* Dramatic Text Reveal (Letra a letra / slide up) */
.dramatic-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: revealLetter 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes revealLetter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fire particles canvas/div layer simplificado con CSS - MEJORADO */
.fire-particles {
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
    height: 300px;
    /* Más alto el gradiente */
    background: radial-gradient(ellipse at bottom center, rgba(230, 60, 20, 0.7) 0%, rgba(139, 26, 42, 0.5) 40%, transparent 80%);
    opacity: 0.8;
    filter: blur(25px);
    mix-blend-mode: color-dodge;
    /* Un blend más intenso *bright* */
    animation: fireFlicker 2s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 1;
    /* Estar sobre el background pero detrás del texto */
}

@keyframes fireFlicker {
    0% {
        transform: scaleY(1) translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: scaleY(1.1) translateY(-10px);
        opacity: 0.9;
    }

    100% {
        transform: scaleY(0.95) translateY(15px);
        opacity: 0.6;
    }
}

/* Spin animation for vinyl record */
@keyframes spinRecord {
    from { transform: translateX(100px) rotate(0deg); }
    to { transform: translateX(100px) rotate(360deg); }
}

@media (max-width: 900px) {
    @keyframes spinRecord {
        from { transform: translateY(80px) rotate(0deg); }
        to { transform: translateY(80px) rotate(360deg); }
    }
}

/* Animación de flip para el contador */
.flip-animate {
    animation: flipDown 0.5s ease-in-out;
}

@keyframes flipDown {
    0% {
        transform: rotateX(-90deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

/* Fire Sparks Text Effect */
.fire-sparks {
    position: relative;
    color: #fff;
    text-shadow:
        0 0 10px #ff9e00,
        0 0 20px #ff8800,
        0 0 30px #ff6600,
        0 0 40px #ff3300,
        0 0 60px #cc0000;
    animation: fireFlickerText 1.5s infinite alternate ease-in-out;
}

@keyframes fireFlickerText {
    0% {
        text-shadow: 0 0 10px #ff9e00, 0 0 20px #ff8800, 0 0 30px #ff6600, 0 0 40px #ff3300, 0 0 60px #cc0000;
        transform: scale(1);
    }

    50% {
        text-shadow: 0 0 15px #ffb347, 0 0 25px #ff9e00, 0 0 35px #ff8800, 0 0 50px #ff4500, 0 0 70px #cc0000, 0 -10px 20px rgba(255, 100, 0, 0.5);
        transform: scale(1.02);
    }

    100% {
        text-shadow: 0 0 10px #ff9e00, 0 0 15px #ff8800, 0 0 25px #ff6600, 0 0 35px #ff3300, 0 0 50px #b30000;
        transform: scale(0.98);
    }
}

/* Fade in UP + Glow */
.fade-in-up {
    animation: fadeInUpGlow 2s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeInUpGlow {
    0% {
        opacity: 0;
        transform: translateY(30px);
        text-shadow: 0 0 0px transparent;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: 0 0 15px rgba(201, 168, 76, 0.6);
    }
}