/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep essential animations but reduce intensity */
    .progress-step.active .progress-step-circle {
        animation: none;
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
    }
    
    .amount-card:hover {
        transform: translateY(-4px);
    }
    
    .btn:hover {
        transform: none;
    }
    
    /* Disable confetti for reduced motion */
    #confettiCanvas {
        display: none !important;
    }
    
    /* Disable particle effects */
    .particles {
        display: none !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Use GPU acceleration for animated elements */
.amount-card,
.btn,
.progress-step-circle,
.input-wrapper input {
    will-change: transform;
}

.progress-fill {
    will-change: width;
}

/* Remove will-change after animation completes */
.amount-card:not(:hover),
.btn:not(:hover),
.input-wrapper input:not(:focus) {
    will-change: auto;
}