/* ========================================
   PRELOADER ANIMATION - COPY PASTABLE CSS
   ======================================== */

/* CSS Variables for customization */
:root {
    --preloader-bg: #301447;
    --preloader-secondary-bg: #562677;
    --preloader-accent-bg: #dcd5fd;
    --preloader-text-color: #301447;
    --preloader-text-opacity: 0.15;
    --preloader-font-family: "Roboto", sans-serif;
    --preloader-transition-duration: 500ms;
    --preloader-transition-timing: cubic-bezier(0.86, 0, 0.07, 1);
}

/* Main Preloader Container */
.preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    background: var(--preloader-accent-bg);
    /* background: linear-gradient(135deg, var(preloader-accent-bg) 0%, var(--preloader-secondary-bg) 50%, var(--preloader-bg) 100%); */
    opacity: 1;
    transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -webkit-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -moz-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    overflow: hidden;
}

.loaderlogo {
    position: absolute;
    z-index: 2;
}

.preloader-title {
    color: #2e1b46;
    font-size: 3rem;
    font-weight: 700;
    font-family: "Playfair Display", sans-serif;
    margin: 0;
    text-align: center;
    letter-spacing: 2px;
}

/* Preloader Background Effects */
.preloader::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80%;
    z-index: -1;
    background: linear-gradient(180deg, #d9d2fa 0%, #d9d2fa 50%, #d9d2fa 100%);
    transition: 1.1s;
    -webkit-transition: 1.1s;
}

.preloader::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80%;
    z-index: -1;
    background: linear-gradient(180deg, #d9d2fa 0%, #7b618c88 100%);
    transition: 1.1s;
    -webkit-transition: 1.1s;
    /* -webkit-clip-path: ellipse(85% 100% at 50% 100%); */
    /* clip-path: ellipse(85% 100% at 50% 100%); */
}

/* Preloader Inner Text (Percentage) */
.preloader_inner {
    width: 100%;
    font-size: 25vh;
    line-height: 1;
    font-weight: 900;
    color: var(--preloader-text-color);
    opacity: var(--preloader-text-opacity);
    font-family: var(--preloader-font-family);
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -webkit-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -moz-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    transition-delay: 0.1s;
    text-shadow: 0 0 20px rgba(202, 191, 253, 0.3);
    filter: drop-shadow(0 0 10px rgba(202, 191, 253, 0.2));
}

/* Preloader Logo */
.loaderlogo {
    height: 50px;
    animation: zoomIn ease 0.6s;
    transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -webkit-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -moz-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
}

/* Preloader Div Elements */
.preloader div {
    transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -webkit-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    -moz-transition: all var(--preloader-transition-duration) var(--preloader-transition-timing);
    transition-delay: 0.1s;
}

/* ========================================
   ANIMATION KEYFRAMES
   ======================================== */

/* Zoom In Animation */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}

/* ========================================
   LOADED STATE ANIMATIONS
   ======================================== */

/* When page is loaded - hide preloader */
.preloader.page-loaded {
    visibility: hidden;
    opacity: 0;
}

/* Hide background effects when loaded */
.preloader.page-loaded::after,
.preloader.page-loaded::before {
    height: 0;
    opacity: 0;
    -webkit-clip-path: ellipse(85% 100% at 50% 100%);
    clip-path: ellipse(85% 100% at 50% 100%);
}

/* Animate logo out when loaded */
.page-loaded .loaderlogo {
    transform: translateY(-350px);
    opacity: 0;
}

/* Animate percentage text out when loaded */
.page-loaded .preloader_inner {
    transform: translateY(400px);
    opacity: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
    .preloader_inner {
        font-size: 20vh;
    }

    .loaderlogo {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .preloader_inner {
        font-size: 15vh;
    }

    .loaderlogo {
        height: 30px;
    }
}

/* ========================================
   USAGE INSTRUCTIONS
   ======================================== */

/*
HTML Structure:
<div class="preloader">
    <div class="preloader_inner">0%</div>
    <div class="loaderlogo">
        <img src="your-logo.svg" alt="logo" />
    </div>
</div>

JavaScript to trigger loaded state:
document.querySelector('.preloader').classList.add('page-loaded');

Optional: Add 'horizontal-slide' class for horizontal exit animations:
document.querySelector('.preloader_inner').classList.add('horizontal-slide');
document.querySelector('.loaderlogo').classList.add('horizontal-slide');
*/