/* Special Animation for Social Impressions Ticker (10M+) */
#social-impressions-ticker {
    position: relative;
    overflow: visible;
}

/* Blast-off scale effect */
@keyframes blastOff {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Special styling for 10M+ ticker */
#social-impressions-ticker .brand-counter-number {
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Explosion particles effect */
#social-impressions-ticker::before,
#social-impressions-ticker::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

@keyframes particleExplosion1 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50px, -50px) scale(0);
    }
}

@keyframes particleExplosion2 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(50px, -50px) scale(0);
    }
}

/* Counting explosion effect when reaching 10M */
#social-impressions-ticker.exploding::before {
    animation: particleExplosion1 0.8s ease-out;
}

#social-impressions-ticker.exploding::after {
    animation: particleExplosion2 0.8s ease-out;
}

/* Enhanced number animation for 10M+ */
#social-impressions-ticker .brand-counter-number.counting-millions {
    animation: blastOff 0.8s ease-out;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 123, 0, 0.8),
                 0 0 40px rgba(4, 102, 200, 0.6),
                 0 2px 12px rgba(4,102,200,0.18), 
                 0 1px 0 #222;
}

/* Particle system for explosion effect */
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-orange);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
}

@keyframes particleFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    @keyframes blastOff {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
        100% {
            transform: scale(1);
        }
    }
}

/* Fixed width for numbers to prevent layout shift during counting */
.brand-counter-number {
    font-variant-numeric: tabular-nums; /* Use monospace numbers if available */
    min-width: 4em; /* Reserve space for the widest number */
    display: inline-block;
}

/* Specific width for 10M+ ticker */
#social-impressions-ticker .brand-counter-number {
    min-width: 5em; /* Slightly wider for "10M+" */
}