/* =========================================================
   LOGO LOADER & PAGE TRANSITION — site-wide
   ========================================================= */
html.loader-active,
html.loader-active body {
    overflow: hidden;
}

/* Set by a tiny head script on initial load or page transitions.
   Keep page content from painting until loader.js has finished taking over. */
html.loader-pending,
html.loader-pending body,
html.loader-initial,
html.loader-initial body {
    background: #000 !important;
}

/* The page may be briefly translated down during the curtain-wipe reveal;
   paint the exposed strip black so nothing light ever flashes through. */
html {
    background-color: #000;
}

html.loader-pending body > :not(#logo-loader),
html.loader-initial body > :not(#logo-loader) {
    visibility: hidden !important;
}

#logo-loader {
    position: fixed;
    inset: 0;
    z-index: 100000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    visibility: hidden;
    overflow: hidden;
    font-family: "Bitcount Single", system-ui;
    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Cover the current page as soon as navigation starts or on initial load. */
html.loader-active #logo-loader,
html.loader-initial #logo-loader {
    visibility: visible;
    transform: translateY(0);
    transition: none;
}

.loader-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.loader-logo-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-logo {
    width: 125px;
    height: 125px;
    object-fit: contain;
    filter: drop-shadow(0 0 22px rgba(125, 70, 255, 0.7));
    animation: loader-pop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both,
        loader-breathe 1.6s ease-in-out 0.9s infinite;
}

.loader-ring {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(125, 70, 255, 0.35);
    border-radius: 50%;
    animation: loader-spin 7s linear infinite;
}

.loader-ring::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #7d46ff;
    box-shadow: 0 0 14px #7d46ff;
}

.loader-track {
    width: 220px;
    height: 3px;
    background: rgba(125, 70, 255, 0.15);
    overflow: hidden;
}

.loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #7d46ff, #b794ff);
    box-shadow: 0 0 12px rgba(125, 70, 255, 0.8);
    transition: width 0.15s linear;
}

.loader-percent {
    color: #dacbff;
    font-size: 1.15rem;
    letter-spacing: 3px;
}

/* exit */
#logo-loader.loader-done {
    transform: translateY(-100%);
    pointer-events: none;
}

#logo-loader.loader-done .loader-center {
    opacity: 0;
    transform: scale(1.15);
}

/* Curtain-wipe reveal (first load only): the moment the loader hits 100% the
   whole page rises with the curtain using the same duration and easing, so
   the content never just pops into view. */
html.page-reveal body {
    animation: loader-page-rise 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes loader-page-rise {
    from {
        transform: translateY(9vh);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes loader-pop {
    0% {
        opacity: 0;
        transform: scale(0.55) rotate(-8deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.08) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes loader-breathe {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.07);
    }
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #logo-loader {
        display: none;
    }
}