/* CARA KERJA SECTION ANIMATIONS */

/* Initial state - semua hidden */
.step-item-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-item-animate.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Sequential delays untuk step 1-5 */
.step-item-animate.step-1 {
    transition-delay: 0s;
}

.step-item-animate.step-2 {
    transition-delay: 0.2s;
}

.step-item-animate.step-3 {
    transition-delay: 0.4s;
}

.step-item-animate.step-4 {
    transition-delay: 0.6s;
}

.step-item-animate.step-5 {
    transition-delay: 0.8s;
}

/* Animasi untuk icon bounce saat muncul */
.step-icon-bounce {
    opacity: 1;
    transform: scale(1);
}

.step-icon-bounce.animate {
    animation: iconBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes iconBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animasi untuk panah - grow dari kiri ke kanan */
.arrow-animate {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-animate.revealed {
    opacity: 1;
    transform: scaleX(1);
}

/* Sequential delays untuk panah (muncul setelah step sebelumnya) */
.arrow-animate.arrow-1 {
    transition-delay: 0.3s;
}

.arrow-animate.arrow-2 {
    transition-delay: 0.5s;
}

.arrow-animate.arrow-3 {
    transition-delay: 0.7s;
}

.arrow-animate.arrow-4 {
    transition-delay: 0.9s;
}

/* Animasi untuk connecting line */
.flow-line-animate {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.1s;
}

.flow-line-animate.revealed {
    opacity: 1;
    transform: scaleX(1);
}

/* Animasi untuk step number circle */
.step-number-animate {
    animation: numberPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes numberPulse {
    0% {
        transform: scale(0);
        box-shadow: 0 0 0 rgba(255, 212, 0, 0);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(255, 212, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(255, 212, 0, 0.4);
    }
}

/* Enhanced hover effects */
.step-item-animate:hover .step-icon-bounce {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Disable conflicting float animation during reveal */
.step-item-animate:not(.revealed) .float-animation {
    animation: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .step-item-animate {
        transform: translateY(20px);
    }
    
    .arrow-animate {
        display: none; /* Hide arrows on mobile */
    }
}