/* ==========================================================
   COMPONENT 012
   PREMIUM PRELOADER
   Version: 1.1
   TechnoMarket Premium UI
========================================================== */

:root{

    --preloader-bg:#ffffff;

    --preloader-primary:#0B5ED7;

    --preloader-shadow:
        0 10px 35px rgba(11,94,215,.18);

}

/* ----------------------------------------------------------
   Overlay
---------------------------------------------------------- */

#tm-preloader{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--preloader-bg);

    transition:
        opacity .45s ease,
        visibility .45s ease;

}

/* скрытие */

#tm-preloader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* ----------------------------------------------------------
   Container
---------------------------------------------------------- */

.tm-preloader-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:26px;

}

/* ----------------------------------------------------------
   Logo
---------------------------------------------------------- */

.tm-preloader-logo{

    position:relative;

    width:120px;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    animation:
        tmLogoFloat 3.8s ease-in-out infinite;

}

.tm-preloader-logo img{

    width:100%;

    height:100%;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    filter:drop-shadow(var(--preloader-shadow));

}

/* ----------------------------------------------------------
   Loader Ring
---------------------------------------------------------- */

.tm-loader-ring{

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:3px solid rgba(11,94,215,.10);

    border-top-color:var(--preloader-primary);

    animation:

        tmRotate 1s linear infinite;

}

/* ----------------------------------------------------------
   Text
---------------------------------------------------------- */

.tm-preloader-text{

    font-size:15px;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#4d4d4d;

    opacity:.82;

}

/* ----------------------------------------------------------
   Fade Animation
---------------------------------------------------------- */

body.tm-page-ready .tm-preloader-logo{

    animation:none;

    transform:scale(1.05);

    transition:transform .35s ease;

}

/* ----------------------------------------------------------
   Keyframes
---------------------------------------------------------- */

@keyframes tmRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes tmLogoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}