/* Modern Loading Screen - Glassmorphism Theme */

.container {
    @apply min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50 
    flex items-center justify-center relative overflow-hidden;
}

/* Animated background gradient */
.container::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-br from-purple-400/20 via-blue-400/20 to-indigo-400/20;
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.content {
    @apply flex flex-col items-center p-12 relative z-10
    bg-white/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50
    hover:shadow-2xl hover:scale-105 transition-all duration-700;
}

/* Logo Section */
.logoWrapper {
    @apply flex items-center space-x-4 mb-12;
}

.logoIcon {
    @apply w-16 h-16 text-purple-600 drop-shadow-lg;
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.logoText {
    @apply text-4xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 
    bg-clip-text text-transparent;
}

/* Loading Animation Container */
.loadingContainer {
    @apply flex flex-col items-center mb-8;
}

.loadingText {
    @apply text-3xl font-bold text-gray-800 mt-8;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.message {
    @apply text-lg text-gray-600 font-medium text-center max-w-md;
}

/* Enhanced Loading Animation */
.dots {
    @apply flex space-x-3 relative;
}

.dot {
    @apply w-5 h-5 rounded-full relative;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #6366f1 100%);
    animation: modernPulse 1.8s infinite ease-in-out;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.dot:nth-child(1) {
    animation-delay: -0.4s;
}

.dot:nth-child(2) {
    animation-delay: -0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes modernPulse {
    0%, 80%, 100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.5;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
    }
    40% {
        transform: scale(1.3) translateY(-15px);
        opacity: 1;
        box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
    }
}

/* Spinning Ring Animation */
.spinnerContainer {
    @apply relative w-20 h-20 mb-6;
}

.spinner {
    @apply absolute inset-0 rounded-full border-4 border-transparent;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6, #6366f1, #8b5cf6);
    animation: spin 2s linear infinite;
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), white calc(100% - 4px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), white calc(100% - 4px));
}

.spinnerInner {
    @apply absolute inset-2 rounded-full bg-white/90 backdrop-blur-sm
    flex items-center justify-center;
}

.spinnerIcon {
    @apply w-8 h-8 text-purple-600;
    animation: counterSpin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counterSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Progress Bar */
.progressContainer {
    @apply w-64 h-2 bg-gray-200/50 rounded-full overflow-hidden mb-6;
}

.progressBar {
    @apply h-full bg-gradient-to-r from-purple-600 to-indigo-600 rounded-full;
    animation: progressAnimation 3s ease-in-out infinite;
}

@keyframes progressAnimation {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .content {
        @apply p-8;
    }
    
    .logoIcon {
        @apply w-12 h-12;
    }
    
    .logoText {
        @apply text-3xl;
    }
    
    .loadingText {
        @apply text-2xl;
    }
    
    .message {
        @apply text-base;
    }
}