#preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dee4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
#preloader > .preloader-bg1 {
    position: absolute;
    background: radial-gradient(farthest-side at top right, #fff6e7 0%, #fff6e7 60%, transparent 100%);
    width: 60%;
    height: 60%;
    top: 0;
    right: 0;
    mix-blend-mode: color;
}
#preloader > .preloader-bg2 {
    position: absolute;
    background: radial-gradient(farthest-side at bottom left, #39a8e0 0%, #39a8e0 60%, transparent 100%);
    width: 60%;
    height: 60%;
    bottom: 0;
    left: 0;
    mix-blend-mode: color;
}
#preloader > .preloader-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    max-width: 800px;
}
#preloader .preloader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2%;
    width: 40%;
    min-width: 200px;
    max-width: 300px;
}
#preloader .preloader-image {
    width: 100%;
    margin-bottom: 10px;
}
#preloader .preloader-loader {
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    padding-bottom: 12px;
    width: 100%;
    background: linear-gradient(currentColor 0 0) bottom left/0% 8px no-repeat;
    animation: preloader-animation 2s linear infinite;
}
#preloader #preloader_dynamic_text {
    font-family: 'Ubuntu,sans-serif';
    color: #6c5ce7;
    font-weight: 600;
    font-size: 24px;
    text-align: center;
}
@keyframes preloader-animation {
    to {
        background-size: 100% 8px;
    }
}

/* Auth Preloader */
#auth_preloader {
    display: none;
    position: absolute;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    z-index: 9999;
}

.auth-preloader-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 5% 0%;
    filter: blur(8px) brightness(80%);
    transform: scale(1.06); /* hides blur edges */
    will-change: transform;
    background: #fff;
}

.auth-preloader-content {
    position: absolute;
    top: 25%;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    padding: 2rem;
    z-index: 1;
}
.auth-preloader-image {
    width: 30%;
}

.auth-preloader-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    opacity: 0.9;
    margin: auto;
    width: 50%;
    text-align: center;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-preloader_video {
        display: none;
    }
    .auth-preloader {
        background: #111 url('%PUBLIC_URL%/onboarding_bg.png') center/cover no-repeat;
    }
}