@charset "utf-8";
/*-- preloader --*/

/* 1. Full-screen wrapper */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

/* 2. The spinning loader element */
#loader {
    display: block;
    position: absolute;
    left: 40%;
    top: 50%;
    width: 100px;
    height: 100px;
    /* This is the modern centering fix that ensures it works on all devices */
    transform: translate(-40%, -40%);
    z-index: 2001; /* Must be higher than the sections */
}

/* 3. The three concentric spinning circles (DRY principle) */
#loader,
#loader:before,
#loader:after {
    border-radius: 50%;
    border: 3px solid transparent;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#loader {
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    animation-duration: 2s;
}

#loader:before,
#loader:after {
    content: "";
    position: absolute;
}

#loader:before {
    top: 5px; /* Corrected for consistent spacing */
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-top-color: #333333;
    border-bottom-color: #666666;
    animation-duration: 3s;
}

#loader:after {
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-top-color: #616161;
    border-bottom-color: #616161;
    animation-duration: 1.5s;
}

/* 4. The single, modern @keyframes rule for the spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 5. The slide-away animation sections */
#loader-wrapper .loader-section {
    position: fixed;
    width: 100%;
    height: 51%; /* 51% prevents a 1px gap on some screens */
    background: #090909;
    z-index: 2000;
    transform: translateY(0);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

#loader-wrapper .loader-section.section-left {
    top: 0;
    left: 0;
}

#loader-wrapper .loader-section.section-right {
    bottom: 0;
    left: 0;
}

/* 6. The "loaded" state triggers all exit animations */
.loaded #loader {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper .loader-section.section-left {
    transform: translateY(-100%);
}

.loaded #loader-wrapper .loader-section.section-right {
    transform: translateY(100%);
}

.loaded #loader-wrapper {
    visibility: hidden;
    transition: all 0.3s 1s ease-out;
    /* The transform below is redundant but harmless, kept from original design */
    transform: translateX(-100%);
}