:root {
    --bg: #ffffff;
    --ink: #000;
    --dirt: #121212;
    --tread1: #fd6816;
    --tread2: #e68957;
}

.preloader .inner {
    min-height: 100vh;
    background-color: var(--bg);
    justify-items: center;
    align-content: center;
    display: grid;
    gap: 18px;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.preloader .holder {
    justify-items: center;
    align-content: center;
    display: grid;
    gap: 18px;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* rotate only the #020202 wheel */
.icon svg .spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin 2s linear infinite;
}

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

/* Dirt particles */
.dirt {
    fill: var(--dirt);
    opacity: var(--o, 0.8);
    transform-box: fill-box;
    transform-origin: center;
    animation: dirt-fly var(--dur, 1.2s) ease-out forwards;
    filter: url(#grain);
    pointer-events: none;
}

@keyframes dirt-fly {
    to {
        transform: translate(var(--tx, -120px), var(--ty, -60px)) scale(0.4);
        opacity: 0;
    }
}

/* ========= Loader ========= */
.loader {
    display: grid;
    gap: 10px;
    place-items: center;
    width: clamp(240px, 60vw, 520px);
    margin-top: 6px;
}

.progress {
    --value: 0;
    /* 0 -> 100 */
    --h: 14px;
    position: relative;
    height: var(--h);
    width: 100%;
    border-radius: 999px;
    background:
        linear-gradient(#111 0 0) padding-box;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, .25) inset,
        0 6px 14px rgba(0, 0, 0, .08);
    outline: 1px solid rgba(0, 0, 0, .35);
    overflow: hidden;
    isolation: isolate;
}

/* “road” center dashed line */
.progress::before {
    content: "";
    position: absolute;
    inset: calc(var(--h)/2 - 1px) 0 auto 0;
    height: 2px;
    background:
        repeating-linear-gradient(to right,
            rgba(255, 255, 255, .55) 0 24px,
            transparent 24px 42px);
    opacity: .3;
    pointer-events: none;
}

/* filled tread */
.progress .fill {
    position: absolute;
    inset: 0;
    width: calc(var(--value) * 1%);
    background:
        linear-gradient(90deg, var(--tread1), var(--tread2)),
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, .35) 0 10px,
            rgba(0, 0, 0, .08) 10px 20px);
    background-size: 100% 100%, 26px 26px;
    animation: tread-slide 1s linear infinite;
    border-radius: inherit;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .15) inset,
        0 6px 10px rgba(184, 151, 90, .25);
}

@keyframes tread-slide {
    to {
        background-position: 0 0, 26px 26px;
    }
}

/* subtle glow cap at the head */
.progress .glow {
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: calc(max(6px, min(100%, var(--value) * 1%)) - 12px);
    width: 46px;
    background: radial-gradient(ellipse at 55% 50%, rgba(255, 255, 255, .45), transparent 60%);
    filter: blur(8px);
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Loading label */
.loading-label {
    --shine: rgba(0, 0, 0, .25);
    font-variant: all-small-caps;
    letter-spacing: .28em;
    position: relative;
    user-select: none;
    font-weight: 700;
    color: #2a2a2a;
}

/* animated dots */
.dots {
    display: inline-grid;
    grid-auto-flow: column;
    gap: .2em;
    margin-left: .4em;
    transform: translateY(-1px);
}

.dot {
    width: .28em;
    height: .28em;
    border-radius: 50%;
    background: #2a2a2a;
    opacity: .25;
    animation: bounce 1.2s ease-in-out infinite;
}

.dot:nth-child(2) {
    animation-delay: .15s;
}

.dot:nth-child(3) {
    animation-delay: .3s;
}

@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .25;
    }

    30% {
        transform: translateY(-4px);
        opacity: .6;
    }
}