svg { isolation: isolate; }
.logo {  color: #10b981;}
.logo.down {
    color: #ef4444 !important;
    transform: rotate(180deg);
    transform-origin: center;
}

#result-spinner svg.logo {
    /*animation: spinColor 1.2s linear infinite;*/
    /*animation: colorPulse 1.4s ease-in-out infinite;*/
    animation: pulseFlip 1.6s ease-in-out infinite;
}


@keyframes pulseFlip {
    0% {
        transform: rotate(0deg) scale(1);
        color: #10b981; /* green */
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        color: #ef4444; /* red when flipped */
    }

    100% {
        transform: rotate(360deg) scale(1);
        color: #10b981; /* back to green */
    }
}
@keyframes spinColor {
    0% {
        transform: rotate(0deg);
        color: #10b981;
    }

    50% {
        transform: rotate(180deg);
        color: #ef4444;
    }

    100% {
        transform: rotate(360deg);
        color: #10b981;
    }
}

@keyframes colorPulse {
    0%   { color: #10b981; }
    50%  { color: #ef4444; }
    100% { color: #10b981; }
}