/* ========================================================================
   SHAHEAD HOME LOADER — QUICK CONTROLS
   ======================================================================== */
:root {
    --shhl-background: #000;
    --shhl-text: #e7e4da;
    --shhl-accent: #444;
    --shhl-loading-start: #555;
    --shhl-loading-end: #ddd;
    --shhl-loading-sweep-duration: 3.4s;
    --shhl-fade-duration: 260ms;
    --shhl-layer: 2147483000;
}

html.shhl-pending,
html.shhl-pending body {
    overflow: hidden !important;
}

.shhl-loader {
    position: fixed;
    inset: 0;
    z-index: var(--shhl-layer);
    display: grid;
    overflow: hidden;
    background: var(--shhl-background);
    color: var(--shhl-text);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    place-items: center;
    transition:
        opacity var(--shhl-fade-duration) ease,
        visibility var(--shhl-fade-duration) ease;
    animation: shhl-failsafe-hide 1ms linear 6.5s forwards;
    isolation: isolate;
}

.shhl-loader.is-complete {
    display: none !important;
}

.shhl-loader.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
}

.shhl-loader__content {
    display: grid;
    min-width: 130px;
    justify-items: center;
    transform: translateY(-2vh);
}

.shhl-loader__label {
    color: transparent;
    font-family: inherit;
    font-size: clamp(11px, 0.82vw, 14px);
    font-weight: 500;
    letter-spacing: 0.38em;
    line-height: 1;
    background: linear-gradient(
        90deg,
        var(--shhl-loading-start) 0%,
        var(--shhl-loading-start) 34%,
        var(--shhl-loading-end) 50%,
        var(--shhl-loading-start) 66%,
        var(--shhl-loading-start) 100%
    );
    background-position: 100% 50%;
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shhl-loading-sweep var(--shhl-loading-sweep-duration) linear infinite;
}

.shhl-loader__countdown {
    position: relative;
    width: 54px;
    height: 66px;
    margin-top: 26px;
}

.shhl-loader__number {
    position: absolute;
    inset: 0;
    display: grid;
    color: var(--shhl-accent);
    font-family: inherit;
    font-size: clamp(36px, 3.1vw, 54px);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0;
    transform: translateY(7px) scale(0.98);
    place-items: center;
}

.shhl-loader__number--4 {
    animation: shhl-number 0.78s ease-in-out 0.14s both;
}

.shhl-loader__number--3 {
    animation: shhl-number 0.78s ease-in-out 1.05s both;
}

.shhl-loader__number--2 {
    animation: shhl-number 0.78s ease-in-out 1.96s both;
}

.shhl-loader__number--1 {
    animation: shhl-number 0.78s ease-in-out 2.87s both;
}

@keyframes shhl-loading-sweep {
    from {
        background-position: 100% 50%;
    }

    to {
        background-position: -160% 50%;
    }
}

@keyframes shhl-number {
    0% {
        opacity: 0;
        transform: translateY(7px) scale(0.98);
    }

    28%,
    66% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-6px) scale(1.015);
    }
}

@keyframes shhl-failsafe-hide {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes shhl-failsafe-unlock {
    to {
        overflow: auto;
    }
}

html.shhl-pending,
html.shhl-pending body {
    animation: shhl-failsafe-unlock 1ms linear 6.5s forwards;
}

@media (max-width: 767px) {
    .shhl-loader__content {
        transform: translateY(-1vh);
    }

    .shhl-loader__label {
        font-size: 11px;
        letter-spacing: 0.31em;
    }

    .shhl-loader__countdown {
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shhl-loader,
    .shhl-loader__label,
    .shhl-loader__number {
        transition-duration: 1ms !important;
    }

    .shhl-loader__label {
        color: var(--shhl-loading-end);
        background: none;
        -webkit-text-fill-color: currentColor;
        animation: none !important;
    }

    .shhl-loader__number {
        transform: none;
    }

    @keyframes shhl-number {
        0%,
        100% {
            opacity: 0;
            transform: none;
        }

        28%,
        66% {
            opacity: 1;
            transform: none;
        }
    }
}