.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: #0a0c0e;
    background: var(--grain), repeating-linear-gradient(90deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .015) 0 1px, transparent 1px 3px), linear-gradient(160deg, #fffdf9 0%, #f7f2e7 100%);
    background-size: 120px 120px, auto, auto, auto;
    background-blend-mode: multiply, normal, normal, normal;
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s;
}

    .preloader::before {
        content: "";
        position: absolute;
        inset: 7px;
        border: 1.5px dashed rgba(120, 80, 35, .45);
        border-radius: calc(var(--radius) - 2px);
        pointer-events: none;
        z-index: 3;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .65));
        opacity: .85;
        transition: opacity .4s ease, border-color .4s ease;
    }

    .preloader.is-done {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.preloader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
    border-radius: 20px;
    text-align: center;
    /* Dark leather plate — same recipe as .countdown-box */
    background-color: #0f0f0f;
    background-image: var(--grain), radial-gradient(circle at 18% 24%, rgba(0, 0, 0, .55) 0 1px, transparent 1.6px), radial-gradient(circle at 72% 58%, rgba(0, 0, 0, .5) 0 1px, transparent 1.6px), radial-gradient(circle at 38% 82%, rgba(0, 0, 0, .45) 0 1px, transparent 1.6px), radial-gradient(130% 90% at 50% 0%, rgba(120, 120, 120, .12), transparent 60%), radial-gradient(130% 100% at 50% 100%, rgba(0, 0, 0, .8), transparent 60%);
    background-size: 140px 140px, 5px 5px, 7px 7px, 6px 6px, auto, auto;
    background-blend-mode: multiply, normal, normal, normal, normal, normal;
    border: 1px solid rgba(255, 235, 200, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 10px rgba(0, 0, 0, .7), 0 14px 30px -18px rgba(0, 0, 0, .9);
    /* exit micro-motion */
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
    corner-shape: scoop;
}

    .preloader-inner::before {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1.5px dashed rgba(255, 235, 200, .3);
        border-radius: 14px;
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
    }

    /* Stitched seam around the plate — same as countdown-box */
    .preloader-inner::before {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1.5px dashed rgba(255, 235, 200, .3);
        border-radius: 14px;
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
    }

.preloader.is-done .preloader-inner {
    transform: translateY(-12px);
    opacity: 0;
}

.preloader-mono {
    display: flex;
    gap: 10px;
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    color: #f5f2ea;
    margin-left: .18em;
}

    .preloader-mono img {
        height: 100px;
        width: auto;
        filter: brightness(0) invert(1);
    }

    .preloader-mono span {
        display: inline-block;
        opacity: 0;
        transform: translateY(14px);
        animation: pl-rise .7s cubic-bezier(.16, 1, .3, 1) forwards;
    }

        .preloader-mono span:nth-child(1) {
            animation-delay: .05s
        }

        .preloader-mono span:nth-child(2) {
            animation-delay: .13s
        }

        .preloader-mono span:nth-child(3) {
            animation-delay: .21s
        }

        .preloader-mono span:nth-child(4) {
            animation-delay: .29s
        }

        .preloader-mono span:nth-child(5) {
            animation-delay: .37s
        }

@keyframes pl-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preloader-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    opacity: 0;
    animation: pl-fade .6s ease .55s forwards;
}

    .preloader-rule::before,
    .preloader-rule::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(245, 242, 234, .28);
    }

    .preloader-rule i {
        width: 5px;
        height: 5px;
        transform: rotate(45deg);
        background: #d4af73;
    }

.preloader-tagline {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(245, 242, 234, .45);
    padding-left: .32em;
    max-width: 90vw;
    opacity: 0;
    animation: pl-fade .6s ease .7s forwards;
}

.preloader-bar {
    width: min(220px, 60vw);
    height: 5px;
    background: rgba(245, 242, 234, .12);
    border-radius: 1px;
    overflow: hidden;
    opacity: 0;
    animation: pl-fade .3s ease .25s forwards;
}

    .preloader-bar i {
        display: block;
        height: 100%;
        width: 40%;
        background: linear-gradient(90deg, transparent, #d4af73, transparent);
        animation: pl-slide 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
    }

@keyframes pl-slide {
    0% {
        transform: translateX(-120%)
    }

    100% {
        transform: translateX(320%)
    }
}

.preloader-year {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .4em;
    color: rgba(212, 175, 115, .7);
    padding-left: .4em;
    opacity: 0;
    animation: pl-fade .6s ease 1s forwards;
}

@keyframes pl-fade {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .preloader-mono span,
    .preloader-rule,
    .preloader-tagline,
    .preloader-bar,
    .preloader-bar i,
    .preloader-year {
        animation-duration: .01s !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
    }
}