/* Loading Screen Styles */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Lighter semi-transparent background */
    backdrop-filter: blur(8px); /* Stronger blur effect to blur everything behind */
    -webkit-backdrop-filter: blur(8px); /* For Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10050 !important; /* Highest z-index to appear above modals (10001) and alerts (10000) */
    transition: all 0.3s ease-in-out; /* Faster transition */
    animation: bg-color-change 1s ease-in-out forwards; /* Faster background color animation */
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out; /* Faster fade-out */
}

.loading-logo-container {
    position: relative;
    width: 100px; /* Even smaller size */
    height: 100px; /* Even smaller size */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-logo-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: visible;
}

.loading-logo-color {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: contain;
}

.loading-logo-gray-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-image: url('../images/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
    clip-path: inset(0 0 0 0); /* Start with full overlay */
    animation: remove-from-bottom 2s ease-in-out forwards; /* Faster animation */
    z-index: 2;
}

.loading-spinner {
    position: absolute;
    width: 110%; /* Slightly smaller relative to logo */
    height: 110%; /* Slightly smaller relative to logo */
    border: 2px solid transparent; /* Thinner border */
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 15px; /* Less margin */
    font-size: 1rem; /* Smaller text */
    color: var(--primary-color);
    font-weight: 500;
    opacity: 0;
    animation: fade-in 0.5s ease-in-out 0.5s forwards;
}

/* Bottom-to-top reveal animation using clip-path */
@keyframes remove-from-bottom {
    0% {
        clip-path: inset(0 0 0 0); /* Full grayscale overlay */
    }
    5% {
        clip-path: inset(0 0 5% 0); /* Remove 5% from bottom */
    }
    10% {
        clip-path: inset(0 0 10% 0);
    }
    15% {
        clip-path: inset(0 0 15% 0);
    }
    20% {
        clip-path: inset(0 0 20% 0);
    }
    25% {
        clip-path: inset(0 0 25% 0);
    }
    30% {
        clip-path: inset(0 0 30% 0);
    }
    35% {
        clip-path: inset(0 0 35% 0);
    }
    40% {
        clip-path: inset(0 0 40% 0);
    }
    45% {
        clip-path: inset(0 0 45% 0);
    }
    50% {
        clip-path: inset(0 0 50% 0);
    }
    55% {
        clip-path: inset(0 0 55% 0);
    }
    60% {
        clip-path: inset(0 0 60% 0);
    }
    65% {
        clip-path: inset(0 0 65% 0);
    }
    70% {
        clip-path: inset(0 0 70% 0);
    }
    75% {
        clip-path: inset(0 0 75% 0);
    }
    80% {
        clip-path: inset(0 0 80% 0);
    }
    85% {
        clip-path: inset(0 0 85% 0);
    }
    90% {
        clip-path: inset(0 0 90% 0);
    }
    95% {
        clip-path: inset(0 0 95% 0);
    }
    100% {
        clip-path: inset(0 0 100% 0); /* Completely remove grayscale overlay */
    }
}

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

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Progress bar animation */
.loading-progress {
    width: 150px; /* Smaller progress bar */
    height: 5px; /* Slightly thicker for better visibility */
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
    border-radius: 3px;
    margin-top: 15px; /* Less margin */
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.loading-progress-bar {
    height: 100%;
    width: 0;
    background-color: #FFD700; /* Sunny yellow color */
    border-radius: 2px;
    animation: progress 4s ease-in-out forwards; /* Match with the logo animation time */
}

@keyframes progress {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Alerts should be in normal document flow, not overlaying other elements */
.alert {
    position: relative;
    z-index: 1; /* Normal stacking order */
}

.alert-dismissible {
    z-index: 1; /* Normal stacking order */
}

/* Bootstrap modals - lower than loading screen so loading screen appears on top */
.modal {
    z-index: 10001 !important; /* Lower than loading screen (10050) */
}

.modal.show {
    z-index: 10001 !important; /* Ensure even when shown, modal is below loading screen */
}

.modal-backdrop {
    z-index: 10000 !important; /* Lower than loading screen (10050) */
}

.modal-backdrop.show {
    z-index: 10000 !important; /* Ensure backdrop is below loading screen */
}

/* Specific modals - ensure they're behind loading screen */
#rejectModal,
#rejectSplitModal {
    z-index: 10001 !important; /* Lower than loading screen */
}

#rejectModal.show,
#rejectSplitModal.show {
    z-index: 10001 !important; /* Even when shown, stay below loading screen */
}

/* Ensure loading screen content is above everything */
.loading-logo-container,
.loading-text,
.loading-progress {
    position: relative;
    z-index: 10051 !important; /* Even higher than loading screen container */
}

/* Background color transition animation - synchronized with fill animation */
@keyframes bg-color-change {
    0% {
        background-color: rgba(0, 0, 0, 0.7);
    }
    10% {
        background-color: rgba(0, 0, 0, 0.7);
    }
    20% {
        background-color: rgba(10, 10, 5, 0.7);
    }
    30% {
        background-color: rgba(20, 20, 10, 0.7);
    }
    40% {
        background-color: rgba(30, 25, 10, 0.7);
    }
    50% {
        background-color: rgba(40, 35, 10, 0.7);
    }
    60% {
        background-color: rgba(50, 40, 12, 0.65);
    }
    70% {
        background-color: rgba(60, 50, 15, 0.6);
    }
    80% {
        background-color: rgba(70, 60, 18, 0.55);
    }
    90% {
        background-color: rgba(80, 70, 20, 0.5);
    }
    95% {
        background-color: rgba(100, 85, 20, 0.45);
    }
    100% {
        background-color: rgba(120, 100, 20, 0.4); /* Subtle golden/yellow with transparency */
    }
}