html:has(.preloader:not([style*="display: none"])),
body:has(.preloader:not([style*="display: none"])) {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

.preloader {
    --preloader-teal: #00897b;
    --preloader-gold: #d4af37;
    --card-pad: clamp(1.1rem, 4.2vw, 1.7rem);
    --logo-box: clamp(4.25rem, 22vw, 5.5rem);
    --logo-size: clamp(2.15rem, 11vw, 2.85rem);
    --bar-width: clamp(4.6rem, 24vw, 6.25rem);
    --glow-size: min(88vmin, 700px);
    --ring-inset: -7px;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    touch-action: none;
    background-color: #192b4a;
}

.preloader *,
.preloader *::before,
.preloader *::after {
    box-sizing: border-box;
}

.preloader::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--glow-size);
    height: var(--glow-size);
    margin: auto;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(212, 175, 55, 0.16) 0%, transparent 32%),
        radial-gradient(circle at center, rgba(0, 137, 123, 0.28) 0%, rgba(0, 137, 123, 0.08) 46%, transparent 70%);
    animation: preloader-glow 2.8s ease-in-out infinite;
}

.preloader .box_section {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(0.7rem, 2.4vw, 0.95rem);
    max-width: calc(100% - 2rem);
    padding: var(--card-pad);
    background: rgba(25, 43, 74, 0.78);
    border: 1px solid rgba(212, 175, 55, 0.26);
    border-radius: clamp(16px, 4vw, 22px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
    animation: preloader-in 0.32s ease-out both;
}

.preloader .image_box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--logo-box);
    height: var(--logo-box);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.preloader .image_box::before,
.preloader .image_box::after {
    content: "";
    position: absolute;
    inset: var(--ring-inset);
    border-radius: 50%;
    pointer-events: none;
}

.preloader .image_box::before {
    border: 2px solid rgba(0, 137, 123, 0.18);
}

.preloader .image_box::after {
    border: 2px solid transparent;
    border-top-color: var(--preloader-gold);
    border-right-color: var(--preloader-teal);
    animation: preloader-spin 0.85s linear infinite;
}

.preloader .site_logo {
    display: block;
    width: var(--logo-size);
    max-width: 62%;
    height: auto;
    object-fit: contain;
}

.preloader .img_filter {
    position: relative;
    width: var(--bar-width);
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 137, 123, 0.22);
}

.preloader .img_filter::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--preloader-teal), var(--preloader-gold));
    animation: preloader-shine 1.15s ease-in-out infinite;
}

@keyframes preloader-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes preloader-glow {
    0%,
    100% {
        opacity: 0.75;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

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

@keyframes preloader-shine {
    from {
        transform: translateX(-130%);
    }
    to {
        transform: translateX(250%);
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .preloader {
        --card-pad: 0.7rem 0.95rem;
        --logo-box: 3.4rem;
        --logo-size: 1.85rem;
        --bar-width: 4.2rem;
        --glow-size: min(70vmin, 420px);
        --ring-inset: -5px;
    }

    .preloader .box_section {
        flex-direction: row;
        gap: 0.5rem;
    }

    .preloader .img_filter {
        height: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preloader::before,
    .preloader .box_section {
        animation: none;
    }

    .preloader .image_box::after,
    .preloader .img_filter::after {
        animation-duration: 2.2s;
    }
}