/* ============================================
   TEXT GRADIENT FIRE - ЗОЛОТОЙ ОГОНЬ ДЛЯ ТЕКСТА
   ============================================ */

/* Эффект золотого огня для "увеличивают продажи" */
.text-gradient,
span.text-gradient {
    background: linear-gradient(90deg, 
        #FFD700 0%, 
        #FFA500 20%, 
        #FF8C00 40%, 
        #FFA500 60%, 
        #FFD700 80%, 
        #FFA500 100%) !important;
    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: golden-fire-text 4s linear infinite !important;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.5)) 
            drop-shadow(0 4px 8px rgba(255, 140, 0, 0.3)) !important;
    position: relative !important;
    display: inline-block !important;
    font-weight: 700 !important;
}

@keyframes golden-fire-text {
    0% {
        background-position: 0% center;
        filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.5)) 
                drop-shadow(0 4px 8px rgba(255, 140, 0, 0.3));
    }
    25% {
        filter: drop-shadow(0 3px 6px rgba(255, 215, 0, 0.7)) 
                drop-shadow(0 6px 12px rgba(255, 140, 0, 0.5));
    }
    50% {
        filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.9)) 
                drop-shadow(0 8px 16px rgba(255, 140, 0, 0.6));
    }
    75% {
        filter: drop-shadow(0 3px 6px rgba(255, 215, 0, 0.7)) 
                drop-shadow(0 6px 12px rgba(255, 140, 0, 0.5));
    }
    100% {
        background-position: 300% center;
        filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.5)) 
                drop-shadow(0 4px 8px rgba(255, 140, 0, 0.3));
    }
}

/* Добавляем огненные частицы */
.text-gradient::before {
    content: '🔥';
    position: absolute;
    left: -25px;
    top: -5px;
    font-size: 20px;
    animation: fire-particle-left 3s ease-in-out infinite;
}

.text-gradient::after {
    content: '✨';
    position: absolute;
    right: -25px;
    top: -5px;
    font-size: 18px;
    animation: fire-particle-right 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes fire-particle-left {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) rotate(-20deg);
        opacity: 1;
    }
}

@keyframes fire-particle-right {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) rotate(20deg);
        opacity: 1;
    }
}