/* Onboarding Hero Styles */
.welcome-area {
    background: rgb(247 247 247 / 64%) !important;
}

/* 
 * Base styles for progress steps using the --step-index variable 
 * You can use the variable for staggered animations in CSS
 * 
 */

.progress-step {
    transition: transform 0.3s ease;
    transition-delay: calc(var(--step-index) * 50ms);
}

.progress-fill {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hidden {
    display: none !important;
}

/* Animation classes used by JS */
.animating-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}
.animating-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease;
}