/* =========================================
   AMAN KYRGYZ HONEY PRELOADER
========================================= */

#aman-preloader {
    --aman-green: #062b27;
    --aman-green-light: #0b4039;
    --aman-gold: #fdbd06;

    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #0b4039 0%,
            #062b27 45%,
            #021c19 100%
        );

    font-family: 'Montserrat', sans-serif;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

#aman-preloader.aman-preloader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================
   CENTER CONTENT
========================================= */

.aman-preloader-center {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* =========================================
   CIRCLE
========================================= */

.aman-loader-circle {
    position: relative;

    width: 320px;
    height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 34px;
}


/* =========================================
   GOLD RING
========================================= */

.aman-loader-ring {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            rgba(253,189,6,.05) 0deg,
            rgba(253,189,6,.15) 70deg,
            #fdbd06 210deg,
            #ffe28a 280deg,
            rgba(253,189,6,.15) 330deg,
            rgba(253,189,6,.05) 360deg
        );

    animation: amanRingRotate 3.3s linear infinite;

    filter:
        drop-shadow(0 0 5px rgba(253,189,6,.20));
}


/* сделать кольцо тонким */

.aman-loader-ring::before {
    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #099686 0%,
            #05655b 72%
        );
}


/* =========================================
   LIGHT POINT
========================================= */

.aman-loader-light {
    position: absolute;

    top: -3px;
    left: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #ffd85c;

    box-shadow:
        0 0 8px #fdbd06,
        0 0 16px rgba(253,189,6,.8),
        0 0 30px rgba(253,189,6,.45);

    transform: translateX(-50%);
}


/* =========================================
   LOGO
========================================= */

.aman-loader-logo {
    position: relative;

    z-index: 5;

    width: 205px;

    display: flex;
    align-items: center;
    justify-content: center;

    animation:
        amanLogoIn 1.3s ease forwards,
        amanLogoFloat 3s ease-in-out 1.3s infinite;
}


.aman-loader-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================
   LOADING TEXT
========================================= */

.aman-preloader-text {
    color: rgba(255,255,255,.86);

    font-size: 18px;
    line-height: 1.5;

    font-weight: 300;

    letter-spacing: .5px;

    margin-bottom: 22px;

    opacity: 0;

    animation: amanTextIn .8s ease .6s forwards;
}

/* =========================================
   BOTTOM TEXT
========================================= */

.aman-preloader-bottom {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 26px;

    color: var(--aman-gold);

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 4px;

    opacity: .9;
}


.aman-preloader-bottom i {
    font-style: normal;

    font-size: 11px;

    opacity: .8;
}


/* =========================================
   DECOR
========================================= */

.aman-preloader-decor {
    position: absolute;

    width: 520px;
    height: 520px;

    background-image: url("../../images/bee.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: .3;

    z-index: 1;

    pointer-events: none;
}

.aman-preloader-decor-left {
    top: 3%;
    left: -170px;

    transform: rotate(-20deg);
}

.aman-preloader-decor-right {
    right: -170px;
    bottom: -50px;

    transform: rotate(18deg);
}

.aman-preloader-center {
    position: relative;
    z-index: 2;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes amanRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes amanLogoIn {

    0% {
        opacity: 0;
        transform: scale(.85);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes amanLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


@keyframes amanTextIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes amanDot {

    0%,
    100% {
        opacity: .35;

        transform: scale(.85);

        box-shadow: none;
    }

    50% {
        opacity: 1;

        transform: scale(1.35);

        background: #ffd257;

        box-shadow:
            0 0 10px rgba(253,189,6,.7);
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .aman-loader-circle {
        width: 285px;
        height: 285px;
    }


    .aman-loader-logo {
        width: 185px;
    }


    .aman-preloader-bottom {
        font-size: 11px;

        letter-spacing: 3px;

        gap: 18px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .aman-loader-circle {
        width: 235px;
        height: 235px;

        margin-bottom: 28px;
    }


    .aman-loader-logo {
        width: 150px;
    }


    .aman-preloader-text {
        font-size: 15px;

        margin-bottom: 19px;
    }


    .aman-preloader-dots {
        margin-bottom: 45px;

        gap: 14px;
    }


    .aman-preloader-dots span {
        width: 8px;
        height: 8px;
    }


    .aman-preloader-bottom {
        max-width: 320px;

        gap: 10px 15px;

        font-size: 9px;

        line-height: 1.8;

        letter-spacing: 2px;
    }


    .aman-preloader-decor {
        background-image: url("../../images/bee.png");
        opacity: .07;
    }


    .aman-preloader-decor-left {
        left: -130px;
    }


    .aman-preloader-decor-right {
        right: -130px;
    }

}


/* =========================================
   SMALL PHONE
========================================= */

@media (max-width: 430px) {

    .aman-loader-circle {
        width: 205px;
        height: 205px;
    }


    .aman-loader-logo {
        width: 132px;
    }


    .aman-preloader-text {
        font-size: 14px;
    }


    .aman-preloader-bottom {
        max-width: 280px;

        font-size: 8px;

        letter-spacing: 1.8px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .aman-loader-ring,
    .aman-loader-logo,
    .aman-preloader-dots span {
        animation: none;
    }

}