/* ==========================
   Loading Screen - Professional & Elegant Design
   ========================== */

:root {
    /* Loading Screen Colors */
    --loading-bg-primary: rgba(10, 10, 15, 0.98);
    --loading-bg-secondary: rgba(26, 26, 46, 0.95);
    --loading-accent-purple: #9333ea;
    --loading-accent-blue: #3b82f6;
    --loading-accent-cyan: #06b6d4;
    --loading-text-primary: #ffffff;
    --loading-text-secondary: rgba(255, 255, 255, 0.8);
    --loading-progress-bg: rgba(255, 255, 255, 0.1);
    --loading-progress-fill: linear-gradient(90deg, var(--loading-accent-purple), var(--loading-accent-blue), var(--loading-accent-cyan));
}

/* ==========================
   Loading Screen Container
   ========================== */

.loading-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;

    /* Background with Glass Effect */
    background: linear-gradient(135deg,
        var(--loading-bg-primary) 0%,
        var(--loading-bg-secondary) 50%,
        var(--loading-bg-primary) 100%
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;

    /* Animation */
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Loading Screen Hide State */
.loading-screen.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================
   Loading Logo Container
   ========================== */

.loading-logo {
    position: relative !important;
    z-index: 10 !important;
}

.loading-logo-wrapper {
    width: 120px !important;
    height: 120px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Glass Effect Background */
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;

    /* Animated Border */
    background-image: conic-gradient(
        from 0deg,
        var(--loading-accent-purple),
        var(--loading-accent-blue),
        var(--loading-accent-cyan),
        var(--loading-accent-purple)
    ) !important;
    background-size: 100% 100% !important;
    background-position: center !important;

    /* Shadow Effects */
    box-shadow:
        0 0 40px rgba(147, 51, 234, 0.4),
        0 0 80px rgba(59, 130, 246, 0.3),
        0 0 120px rgba(6, 182, 212, 0.2),
        inset 0 0 30px rgba(255, 255, 255, 0.1) !important;

    /* Animation */
    animation:
        logoGlow 3s ease-in-out infinite,
        logoRotate 8s linear infinite !important;
}

.loading-logo-inner {
    width: calc(100% - 6px) !important;
    height: calc(100% - 6px) !important;
    background: var(--loading-bg-primary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.loading-logo img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    filter: brightness(1.2) contrast(1.1) !important;
    z-index: 2 !important;
    position: relative !important;
    animation: logoFloat 2s ease-in-out infinite alternate !important;
}

/* ==========================
   Loading Text
   ========================== */

.loading-text {
    font-family: 'Orbitron', 'Inter', monospace !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--loading-text-primary) !important;
    text-align: center !important;
    margin-top: 1rem !important;

    /* Text Effects */
    background: linear-gradient(45deg,
        var(--loading-accent-purple),
        var(--loading-accent-blue),
        var(--loading-accent-cyan)
    ) !important;
    background-size: 200% 200% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* Shadow */
    filter: drop-shadow(0 0 10px rgba(147, 51, 234, 0.5)) !important;

    /* Animation */
    animation:
        textGradient 3s ease-in-out infinite,
        textPulse 2s ease-in-out infinite alternate !important;
}

/* ==========================
   Loading Progress Bar
   ========================== */

.loading-progress {
    width: 300px !important;
    height: 6px !important;
    background: var(--loading-progress-bg) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    margin-top: 1rem !important;

    /* Glass Effect */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    /* Shadow */
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.loading-progress-fill {
    height: 100% !important;
    width: 0% !important;
    background: var(--loading-progress-fill) !important;
    background-size: 200% 100% !important;
    border-radius: 10px !important;
    position: relative !important;

    /* Animation */
    transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    animation: progressShimmer 2s linear infinite !important;

    /* Glow Effect */
    box-shadow:
        0 0 20px rgba(147, 51, 234, 0.6),
        0 0 40px rgba(59, 130, 246, 0.4) !important;
}

.loading-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 30px !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    ) !important;
    animation: progressGlow 1.5s ease-in-out infinite !important;
}

/* ==========================
   Loading Percentage
   ========================== */

.loading-percentage {
    font-family: 'Orbitron', 'Inter', monospace !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--loading-text-secondary) !important;
    margin-top: 0.5rem !important;
    min-width: 60px !important;
    text-align: center !important;

    /* Animation */
    animation: percentageFlicker 1s ease-in-out infinite alternate !important;
}

/* ==========================
   Background Particles (Optional)
   ========================== */

.loading-screen::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(6, 182, 212, 0.08) 0%, transparent 50%) !important;
    animation: particlesFloat 20s linear infinite !important;
    pointer-events: none !important;
}

/* ==========================
   Animations
   ========================== */

@keyframes logoGlow {
    0%, 100% {
        box-shadow:
            0 0 40px rgba(147, 51, 234, 0.4),
            0 0 80px rgba(59, 130, 246, 0.3),
            0 0 120px rgba(6, 182, 212, 0.2),
            inset 0 0 30px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            0 0 60px rgba(147, 51, 234, 0.6),
            0 0 100px rgba(59, 130, 246, 0.5),
            0 0 140px rgba(6, 182, 212, 0.4),
            inset 0 0 40px rgba(255, 255, 255, 0.2);
    }
}

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

@keyframes logoFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

@keyframes textGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes textPulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes progressShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes progressGlow {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
}

@keyframes percentageFlicker {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes particlesFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

/* ==========================
   Responsive Design
   ========================== */

/* Mobile Phones */
@media (max-width: 480px) {
    .loading-logo-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    .loading-logo img {
        width: 56px !important;
        height: 56px !important;
    }

    .loading-text {
        font-size: 1.25rem !important;
    }

    .loading-progress {
        width: 250px !important;
    }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .loading-logo-wrapper {
        width: 110px !important;
        height: 110px !important;
    }

    .loading-logo img {
        width: 60px !important;
        height: 60px !important;
    }

    .loading-text {
        font-size: 1.375rem !important;
    }

    .loading-progress {
        width: 280px !important;
    }
}

/* ==========================
   High Contrast Mode Support
   ========================== */

@media (prefers-contrast: high) {
    .loading-screen {
        background: #000000 !important;
    }

    .loading-text {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .loading-progress {
        border: 2px solid #ffffff !important;
    }
}

/* ==========================
   Reduced Motion Support
   ========================== */

@media (prefers-reduced-motion: reduce) {
    .loading-logo-wrapper,
    .loading-logo img,
    .loading-text,
    .loading-progress-fill,
    .loading-percentage,
    .loading-screen::before {
        animation: none !important;
    }

    .loading-logo-wrapper {
        transform: none !important;
    }
}

/* ==========================
   Print Style (Hide Loading)
   ========================== */

@media print {
    .loading-screen {
        display: none !important;
    }
}