/* Custom styles for Beauty App */

/* Smooth transitions for all interactive elements */
* {
    transition: all 0.3s ease;
}

/* Custom gradient backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* Enhance upload area */
.upload-area {
    border: 3px dashed #d1d5db;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #ec4899;
    background-color: #fdf2f8;
    transform: translateY(-2px);
}

/* Beauty button animations */
.beauty-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.beauty-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.beauty-btn:hover:before {
    left: 100%;
}

.beauty-btn:active {
    transform: scale(0.98);
}

/* Loading animation enhancements */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

/* Image preview styling */
.image-preview {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

/* Comparison container */
.comparison-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* Result image effects */
.result-image {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    border-radius: 12px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #db2777, #7c3aed);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .beauty-btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .grid-cols-2 {
        gap: 0.5rem;
    }
}

/* Footer enhancement */
footer {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 12px;
    padding: 1rem;
}

/* Add some sparkle effects */
.sparkle {
    position: relative;
    overflow: hidden;
}

.sparkle:before {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    animation: twinkle 2s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
}

/* Disabled state for beauty buttons */
.beauty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.beauty-btn:disabled:hover:before {
    left: -100% !important;
}

/* Success state styling */
.success-state {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 2px solid #10b981;
}

/* Error state styling */
.error-state {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 2px solid #ef4444;
}

/* Processing state styling */
.processing-state {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 2px solid #3b82f6;
}

/* Enhance the main title */
.main-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}