/**
 * Identifier | Modals, drag overlay, result display
 */

#resultImage { transition: all 0.3s ease; border: 2px solid transparent; }
#resultImage:hover { transform: scale(1.05); border-color: var(--bs-primary); box-shadow: 0 8px 24px rgba(142, 68, 173, 0.3); }

.modal.fade .modal-dialog { transform: scale(0.8) translateY(-50px); opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal.show .modal-dialog { transform: scale(1) translateY(0); opacity: 1; }
.modal.fade:not(.show) .modal-dialog { transform: scale(0.8) translateY(-50px) !important; opacity: 0 !important; }

#loadingModal .modal-dialog { animation: pulse 2s infinite; }

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

#resultModal .modal-dialog { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity; }
#resultModal.show .modal-dialog { animation: modalGrowOptimized 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

@keyframes modalGrowOptimized {
    0% { transform: scale(0.5) translateZ(0); opacity: 0; }
    60% { transform: scale(1.02) translateZ(0); opacity: 1; }
    100% { transform: scale(1) translateZ(0); opacity: 1; }
}

.modal-transition-grow { animation: transitionGrowOptimized 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; }

@keyframes transitionGrowOptimized {
    0% { transform: scale(0.9) translateZ(0); }
    50% { transform: scale(1.03) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

.spinner-border { animation: spin 1s linear infinite, rainbow 3s linear infinite; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rainbow {
    0% { border-top-color: #ff0000; }
    16% { border-top-color: #ff8000; }
    33% { border-top-color: #ffff00; }
    50% { border-top-color: #00ff00; }
    66% { border-top-color: #0080ff; }
    83% { border-top-color: #8000ff; }
    100% { border-top-color: #ff0000; }
}

#loading-text { animation: loadingPulse 1.5s ease-in-out infinite; }

@keyframes loadingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.drag-overlay { background: rgba(0, 0, 0, 0.9) !important; backdrop-filter: blur(20px); transition: all 0.3s ease; }
.drag-overlay.visible { display: flex !important; animation: fadeInScale 0.3s ease; }

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.drag-overlay i { animation: bounce 2s infinite; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}