/*
------------------------------------------------------------
    Premium Preloader
    Full-screen intro that tracks real page/image loading,
    then hands off its logo to the actual header logo via a
    measured position/scale tween (no second logo asset,
    no guessed coordinates — it reads the live header rect).

    Default theme is dark because upload/logo.svg is a white-
    fill mark, matching its native appearance on the transparent
    hero navbar used on every page except product-details.php,
    which forces the header logo to black for its solid white
    navbar — that page overrides these variables inline (see its
    own <style> block) to keep the handoff color-matched there too.
------------------------------------------------------------
*/

:root {
    --preloader-bg: #161616;
    --preloader-logo-filter: none;
}

.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--preloader-bg);
}

.site-preloader-logo-wrap {
    position: relative;
}

.site-preloader-logo {
    display: block;
    width: clamp(160px, 20vw, 320px);
    height: auto;
    opacity: 0;
    transform: translateY(14px);
    filter: var(--preloader-logo-filter);
    will-change: transform, opacity;
}

/* keeps the real header logo hidden until the preloader logo lands on top of it */
.logo-img.is-preloading {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .site-preloader-logo {
        transition: none !important;
        animation: none !important;
    }
}