/*preloader start*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #181818;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader--hidden {
    opacity: 0;
    visibility: hidden;
}
.preloader__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px;
}
.preloader__cube {
    width: 25px;
    height: 25px;
    background-color: #2A2A2C;
    border-radius: 3px;
}
.preloader__cube_1 {
    animation: preloader-animation 2s infinite;
}
.preloader__cube_2 {
    animation: preloader-animation 2s infinite 0.5s;
}
.preloader__cube_3 {
    animation: preloader-animation 2s infinite 1s;
}
.preloader__cube_4 {
    animation: preloader-animation 2s infinite 1.5s;
}
@keyframes preloader-animation {
    0% {
        background-color: #2A2A2C;
    }
    25% {
        background-color: #ff1493;
    }
    50% {
        background-color: #2A2A2C;
    }
    100% {
        background-color: #2A2A2C;
    }
}
/*preloader end*/

/*btn pink start*/
.btn_pink {
    position: relative;
    overflow: hidden;
}

.btn_pink::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent);
    animation: white-shine 8s ease-in-out infinite;
}

@keyframes white-shine {
    0% {
        left: -100%;
    }
    20% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/*btn pink end*/

/*select user start*/
.select-user_open .select-user__header:before {
    animation: header-icon-scale 0.3s ease-in;
}
@keyframes header-icon-scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
/*select user end*/

/*Анимация блоков на главной странице start*/

.headline__btn-link:after {
    animation: arrow-right 1s infinite;
}
@keyframes arrow-right {
    0% { transform: translateX(0px); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0px); }
}
/*Анимация блоков на главной странице end*/


/*BALANCE start*/
.volume-balance__ring-animation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    /*background-image: url(../img/effect/effect-ring-pink.svg);*/
    /*background-size: 65%;*/
    /*background-repeat: no-repeat;*/
    /*background-position: 15vw -2vw;*/
    /*z-index: -10;*/
}

.ring-animation__container {
    position: relative;
    width: 336px;
    height: 383px;
    margin: 0 auto;
    background-image: url(../img/effect/effect-balance-ring.svg);
}
.ring-animation__dot {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    background-color: #ff1493;
    border-radius: 100%;
    opacity: 0;
    will-change: transform, opacity;
}
/*BALANCE end*/


/*Анимация в баннере start*/
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 150px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/*ПРОФИЛЬ ГАЛОЧКА (СКОПИРОВАТЬ ССЫЛКУ)*/
.checkmark {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: none;
}
.checkmark.link-copy__checkmark_show {
    display: block;
}

.check {
    transform-origin: 50% 50%;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    stroke-width: 2;
    stroke-miterlimit: 9;
    stroke: #FF1493;
    fill: none;
    animation: check 1s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}

@keyframes circle {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes check {
    100% {
        stroke-dashoffset: 0;
    }
}
/*Анимация*/

/*Анимация создать стиль start*/
.create-style__animation:after {
    position: absolute;
    top: 60%;
    left: 40%;
    animation: star-circle-motion 3s linear infinite;
}

@keyframes star-circle-motion {
    0% {
        top: 50%;
        left: 40%;
        transform: scale(1);
     }
    35% {
        top: 30%;
        left: 30%;
        transform: scale(0.6) rotate(-90deg);
    }
    65% {
        top: 30%;
        left: 50%;
        transform: scale(0.3) rotate(-180deg);
    }
    100% {
        top: 50%;
        left: 40%;
        transform: scale(1) rotate(-360deg);
    }
}
/*Анимация создать стиль end*/

/*Анимация монетки start*/
.invite__header-coin:after {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-image: url(../img/effect/effect-coin-profile.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: coinCircleAnimation 4s infinite linear;
    will-change: transform, filter, opacity;
}

@keyframes coinCircleAnimation {
    0% {
        transform:
                translate(-50%, -50%)
                rotate(0deg)
                translateY(-45px)
                rotate(0deg)
                scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    25% {
        transform:
                translate(-50%, -50%)
                rotate(90deg)
                translateY(-45px)
                rotate(-90deg)
                scale(0.7);
        filter: blur(2px);
        opacity: 0.8;
    }
    50% {
        transform:
                translate(-50%, -50%)
                rotate(180deg)
                translateY(-45px)
                rotate(-180deg)
                scale(1.2);
        filter: blur(0px);
        opacity: 1;
    }
    75% {
        transform:
                translate(-50%, -50%)
                rotate(270deg)
                translateY(-45px)
                rotate(-270deg)
                scale(0.8);
        filter: blur(3px);
        opacity: 0.7;
    }
    100% {
        transform:
                translate(-50%, -50%)
                rotate(360deg)
                translateY(-45px)
                rotate(-360deg)
                scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}


/*Миниатюра в экспертах*/
.miniature {
    animation: miniature-animation 6s infinite;
}

@keyframes miniature-animation {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    5% {
        transform: scale(1.2);
        opacity: 1;
    }
    10% {
        transform: scale(1);
        opacity: 1;
    }
    90% {
        transform: scale(1);
        opacity: 1;
    }
    95% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/*Стрелочка*/
.expert__arrow-svg {
    width: 20vw;
    height: 20vw;
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 7vw;
    left: 9vw;
    transform: rotate(29deg);
}
.expert__arrow-svg .draw-arrow {
    stroke-width: 4;
    stroke: #FF1493;
    fill: none;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation-duration: 6s;
    animation-fill-mode: forwards;
    animation-name: draw;
    animation-iteration-count: infinite;
}
.expert__arrow-svg .draw-arrow.tail-1 {
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-name: draw-tail-1;
}
.expert__arrow-svg .draw-arrow.tail-2 {
    animation-delay: 0.5s;
    animation-timing-function: linear;
    animation-name: draw-tail-2;
}

/* Основная анимация для основной стрелки */
@keyframes draw {
    0% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    10% {
        stroke-dashoffset: 400;
        opacity: 1;
    }
    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    90% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    95% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
}

/* Анимация для tail-1 - мгновенное исчезновение */
@keyframes draw-tail-1 {
    0% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    10% {
        stroke-dashoffset: 400;
        opacity: 1;
    }
    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    86% { /* Мгновенное исчезновение на 90% */
        stroke-dashoffset: 0;
        opacity: 1;
    }
    87% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
}

/* Анимация для tail-2 - мгновенное исчезновение */
@keyframes draw-tail-2 {
    0% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    10% {
        stroke-dashoffset: 400;
        opacity: 1;
    }
    40% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    83% { /* Мгновенное исчезновение на 90% */
        stroke-dashoffset: 0;
        opacity: 1;
    }
    84% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    100% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
}
/*Анимация в баннере эксперты end*/

/*Анимация в балансе*/
.ring-container {
    position: relative;
    width: 336px;
    height: 383px;
}

.dot {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    background-color: #ff1493;
    border-radius: 100%;
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}