/* =========================================================
   PAGE LOADER
   ========================================================= */

#custom-page-loader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 999999;

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

    overflow: hidden;

    opacity: 1;
    visibility: visible;

    pointer-events: all;

    transition:
        opacity 1000ms ease,
        visibility 1000ms ease;
}
#custom-page-loader:before{
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 00ms ease,
        visibility 00ms ease;
}
#custom-page-loader.removebg:before{
    opacity: 1;
    visibility: hidden;
}

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

.loader-logo-wrapper {
    position: relative;

    width: 320px;
    height: 320px;

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


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

#loader-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    opacity: 0;

    transform: scale(0.85);

    animation:
        loaderLogoAppear
        900ms
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/* Logo entrance */

@keyframes loaderLogoAppear {

    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   PARTICLES
   ========================================================= */

.loader-particle {

    position: absolute;

    width: var(--particle-size);
    height: var(--particle-size);

    left: var(--left);
    top: var(--top);

    pointer-events: none;

    background-image: var(--logo-image);

    background-repeat: no-repeat;

    background-size:
        var(--logo-width)
        var(--logo-height);

    background-position:
        var(--background-x)
        var(--background-y);

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);

    animation:
        particleExplosion
        var(--duration)
        cubic-bezier(.15, .8, .25, 1)
        forwards;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   PARTICLE EXPLOSION
   ========================================================= */

@keyframes particleExplosion {

    0% {

        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }


    25% {

        opacity: 1;

        transform:
            translate3d(
                calc(var(--move-x) * 0.15),
                calc(var(--move-y) * 0.15),
                0
            )
            rotate(calc(var(--rotation) * 0.2))
            scale(1.05);
    }


    65% {

        opacity: 0.75;

        transform:
            translate3d(
                calc(var(--move-x) * 0.65),
                calc(var(--move-y) * 0.65),
                0
            )
            rotate(calc(var(--rotation) * 0.65))
            scale(0.65);
    }


    100% {

        opacity: 0;

        transform:
            translate3d(
                var(--move-x),
                var(--move-y),
                0
            )
            rotate(var(--rotation))
            scale(var(--final-scale));
    }
}


/* =========================================================
   LOADER EXIT
   ========================================================= */

#custom-page-loader.loader-complete {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


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

@media (max-width: 767px) {

    .loader-logo-wrapper {
        width: 170px;
        height: 170px;
    }

}


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

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

    #loader-logo {
        animation: none;

        opacity: 1;
        transform: none;
    }

    .loader-particle {
        animation: none;
        opacity: 0;
    }

    #custom-page-loader {
        transition: none;
    }

}