/* ═══════════════════════════════════════════════════════════════
   process-section.css — Process Section Animations
   Same slow animations as Services section - Works both directions
   ═══════════════════════════════════════════════════════════════ */

/* Hide elements BEFORE animation starts (controlled by JS) */
#process-section.before-animation .mb-\[10px\] {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

#process-section.before-animation h2 {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

#process-section.before-animation .process-step {
    opacity: 0 !important;
    transform: translateY(30px) scale(0.95) !important;
}

/* Transitions - Same slow timing as Services section */
#process-section .mb-\[10px\] {
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#process-section h2 {
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-delay: 0.3s !important;
}

#process-section .process-step {
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stagger animation for process steps - slower with longer delays */
#process-section .process-step:nth-child(2) {
    transition-delay: 0.8s !important;
}

#process-section .process-step:nth-child(3) {
    transition-delay: 1.0s !important;
}

#process-section .process-step:nth-child(4) {
    transition-delay: 1.2s !important;
}

#process-section .process-step:nth-child(5) {
    transition-delay: 1.4s !important;
}

#process-section .process-step:nth-child(6) {
    transition-delay: 1.6s !important;
}

/* Animated state - elements return to normal */
#process-section.animate-in .mb-\[10px\] {
    opacity: 1 !important;
    transform: none !important;
}

#process-section.animate-in h2 {
    opacity: 1 !important;
    transform: none !important;
}

#process-section.animate-in .process-step {
    opacity: 1 !important;
    transform: none !important;
}