/* =========================================================
   MODERN WEBSITE LOADER
   LOGO ONLY
========================================================= */

.website-loader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(59, 130, 246, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 20%,
            rgba(56, 189, 248, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(139, 92, 246, 0.08),
            transparent 30%
        ),
        #ffffff;

    z-index: 9999999;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.8s ease;
}


/* =========================================================
   SOFT LIGHT BEHIND LOGO
========================================================= */

.website-loader::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.14) 0%,
            rgba(59, 130, 246, 0.06) 35%,
            transparent 70%
        );

    filter: blur(8px);

    animation: loaderGlow 3s ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   LOADER CONTENT
========================================================= */

.loader-content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    z-index: 2;
}


/* =========================================================
   LOGO
========================================================= */

.loader-logo {
    display: block;

    width: 150px;
    height: auto;

    object-fit: contain;

    position: relative;
    z-index: 3;

    opacity: 0;

    filter:
        drop-shadow(0 0 0 rgba(59, 130, 246, 0));

    animation:
        logoReveal 1.2s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards,

        logoFloat 3s
        ease-in-out
        1.2s
        infinite;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   LOGO ENTER ANIMATION
========================================================= */

@keyframes logoReveal {

    0% {
        opacity: 0;

        transform:
            scale(0.72)
            translateY(12px);

        filter:
            blur(10px)
            drop-shadow(
                0 0 0
                rgba(59, 130, 246, 0)
            );
    }

    55% {
        opacity: 1;

        transform:
            scale(1.06)
            translateY(-2px);

        filter:
            blur(0)
            drop-shadow(
                0 12px 30px
                rgba(59, 130, 246, 0.12)
            );
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0)
            drop-shadow(
                0 10px 25px
                rgba(59, 130, 246, 0.10)
            );
    }
}


/* =========================================================
   VERY SUBTLE FLOAT
========================================================= */

@keyframes logoFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-6px)
            scale(1.015);
    }
}


/* =========================================================
   BACKGROUND GLOW ANIMATION
========================================================= */

@keyframes loaderGlow {

    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}


/* =========================================================
   HIDE LOADER
========================================================= */

.website-loader.loader-hidden {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .loader-logo {
        width: 125px;
    }

    .website-loader::before {
        width: 220px;
        height: 220px;
    }
}


@media (max-width: 480px) {

    .loader-logo {
        width: 105px;
    }

    .website-loader::before {
        width: 190px;
        height: 190px;
    }
}


@media (max-width: 360px) {

    .loader-logo {
        width: 95px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .loader-logo,
    .website-loader::before {
        animation: none;
    }

    .loader-logo {
        opacity: 1;

        transform: none;

        filter: none;
    }

    .website-loader {
        transition: none;
    }
}