/* Animations */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

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

/* Utility Classes */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Drag and Drop */
.drag-active {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    transform: scale(1.02);
}

/* Upload Progress Ring */
.upload-progress {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.35s;
    transform-origin: 50% 50%;
}

/* Logo Animation */
.ramakrishna-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    animation: pulse 2s ease-in-out infinite;
}

/* Section Cards */
.section-card {
    transition: all 0.3s ease;
}

.section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Gradient Background */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Message Bubble */
.message-bubble {
    animation: fadeIn 0.3s ease-out;
}

/* Speed Indicator */
.speed-indicator {
    font-size: 0.7rem;
    color: #6366f1;
    font-weight: 600;
}