.step-fill {
        transform: scaleY(0);
        transform-origin: top;
    }

    .h-8.w-8 .step-fill {
        background-color: #16a34a; /* tailwind green-600 */
    }

    .step-number {
        position: relative;
        z-index: 10;
        color: #ffffff;
    }

    .animate-step-1 {
        animation: step1 5s linear infinite;
    }

    .animate-step-2 {
        animation: step2 5s linear infinite;
    }

    .animate-step-3 {
        animation: step3 5s linear infinite;
    }

    .animate-step-4 {
        animation: step4 5s linear infinite;
    }

    @keyframes step1 {
        0% {
            transform: scaleY(0);
        }
        20% {
            transform: scaleY(1);
        }
        100% {
            transform: scaleY(1);
        }
    }

    @keyframes step2 {
        0% {
            transform: scaleY(0);
        }
        20% {
            transform: scaleY(0);
        }
        40% {
            transform: scaleY(1);
        }
        100% {
            transform: scaleY(1);
        }
    }

    @keyframes step3 {
        0% {
            transform: scaleY(0);
        }
        40% {
            transform: scaleY(0);
        }
        60% {
            transform: scaleY(1);
        }
        100% {
            transform: scaleY(1);
        }
    }

    @keyframes step4 {
        0% {
            transform: scaleY(0);
        }
        60% {
            transform: scaleY(0);
        }
        80% {
            transform: scaleY(1);
        }
        100% {
            transform: scaleY(1);
        }
    }

    /* Optional celebrate animation */
    .animate-celebrate {
        animation: celebrate 1s ease-in-out infinite;
    }

    @keyframes celebrate {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
    }