/*==================================================
  LOADER
  Zen Spa Home
==================================================*/

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

.loader {

    will-change: opacity;

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: var(--color-background, #090909);

}

/*==============================================
  HIDE / INACTIVE
==============================================*/

.loader.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    display: none;

}

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

.loader-logo {

    will-change: transform, opacity;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    pointer-events: none;

}

.loader-logo img {

    display: block;

    width: 220px;

    max-width: 70vw;

    height: auto;

    user-select: none;

    pointer-events: none;

}

/*==============================================
  PROGRESS
==============================================*/

.loader-progress {

    will-change: width;

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0%; /* GSAP lo animará de 0% a 100% */

    height: 2px;

    background: linear-gradient(

        90deg,

        var(--color-primary, #B9915D),

        #f4d3a4,

        var(--color-primary, #B9915D)

    );

    box-shadow: 0 0 18px rgba(185, 145, 93, .45);

}

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

.loader::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(

            circle at center,

            rgba(185, 145, 93, .10),

            transparent 70%

        );

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

    pointer-events: none;

}

/*==============================================
  NOISE
==============================================*/

.loader::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .025;

    mix-blend-mode: soft-light;

    background-image:

        radial-gradient(circle, #fff 1px, transparent 1px);

    background-size: 8px 8px;

    pointer-events: none;

}

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

.loader-logo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            115deg,

            transparent,

            rgba(255, 255, 255, .30),

            transparent

        );

    transform: translateX(-180%);

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

    pointer-events: none;

}

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

@keyframes loaderGlow {

    0%, 100% {

        opacity: .35;

    }

    50% {

        opacity: .8;

    }

}

@keyframes loaderShine {

    0% {

        transform: translateX(-180%);

    }

    100% {

        transform: translateX(180%);

    }

}

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

@media (max-width: 768px) {

    .loader-logo img {

        width: 170px;

    }

}