@keyframes ecoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes ecoShimmer {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(140%);
    }
}

@keyframes ecoGrow {
    from {
        transform: scaleX(0.3);
        opacity: 0.4;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes ecoPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ecoPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.22);
    }

    60% {
        box-shadow: 0 0 0 12px rgba(46, 125, 50, 0);
    }
}

.eco-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--eco-shadow-sm);
}

.eco-loading-icon,
.eco-loading-star,
.eco-loading-trophy {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    animation: ecoFloat 1.8s infinite ease-in-out;
}

.eco-loading-icon {
    background: linear-gradient(135deg, var(--eco-highlight), var(--eco-primary-soft));
}

.eco-loading-star {
    background: linear-gradient(135deg, #fff6b2, var(--eco-coin));
    animation-delay: 0.15s;
}

.eco-loading-trophy {
    background: linear-gradient(135deg, #ffd180, var(--eco-accent));
    animation-delay: 0.3s;
}

.progress span,
.eco-progress-fill {
    transform-origin: left center;
    animation: ecoGrow 0.7s ease;
}