.page-preloader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #352962 0%, #2e2760 50%, #241f4e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000005;
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}

body:has(.page-section) .page-preloader,
body:has(.error-page) .page-preloader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.page-preloader.hide {
    opacity: 0;
    pointer-events: none;
}

.page-preloader .preloader-logo {
    position: relative;
    width: 160px;
    line-height: 0;
    animation: preloader-pulse 1.2s ease-in-out infinite;
}

.page-preloader .preloader-logo>.preloader-pulse {
    display: block;
    width: 100%;
    height: auto;
}

.page-preloader>.preloader-pulse {
    width: 160px;
    height: auto;
    animation: preloader-pulse 1.2s ease-in-out infinite;
}

.page-preloader .preloader-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    contain: paint;
    -webkit-mask: url("../img/Logo/Logo_silver.webp") center / contain no-repeat;
    mask: url("../img/Logo/Logo_silver.webp") center / contain no-repeat;
}

.page-preloader .preloader-shimmer::before {
    content: "";
    position: absolute;
    top: -65%;
    left: -68%;
    width: 56%;
    height: 220%;
    opacity: 0;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, .72) 0%,
            rgba(255, 255, 255, .46) 18%,
            rgba(255, 255, 255, .2) 36%,
            rgba(255, 255, 255, .06) 54%,
            transparent 72%);
    transform: translate3d(-40%, -8%, 0) rotate(-24deg);
    will-change: transform, opacity;
    animation: preloader-logo-shimmer 2.2s ease-in-out infinite;
}

@keyframes preloader-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes preloader-logo-shimmer {
    0%, 8% {
        opacity: 0;
        transform: translate3d(-40%, -8%, 0) rotate(-24deg);
    }

    24% {
        opacity: .34;
    }

    42%, 52% {
        opacity: .64;
    }

    70% {
        opacity: .3;
    }

    84%, 100% {
        opacity: 0;
        transform: translate3d(520%, 26%, 0) rotate(-24deg);
    }
}

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