.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes fadeIn {
    0% {
        transform: scale(0.6);
        opacity: 0.0;
        filter: blur(10px)
    }
    50% {
        transform: scale(1.04);
        filter: blur(1px);
    }
    70% {
        transform: scale(0.97);
        opacity: 1;
        filter: blur(0.4px)
    }
    90% {
        transform: scale(1.01);
        opacity: 1;
        filter: blur(0px)
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0.6);
        opacity: 0.0;
        -webkit-filter: blur(10px);
    }
    60% {
        -webkit-transform: scale(1.04);
        -webkit-filter: blur(1px);
    }
    80% {
        -webkit-transform: scale(0.97);
        opacity: 1;
        -webkit-filter: blur(0.4px);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
        -webkit-filter: blur(0px);
    }
}



@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.circle-element {
    animation: spin 90s linear infinite;
}


/* btn wave */
.wave {
    background: rgba(255, 255, 255, .4);
    border-radius: 50%;
    transform: scale(0);
    animation: wave .5s linear;
    pointer-events: none;
    position: absolute;
}

.wave.orange{
    background: var(--wave-orange-bg);
}
@keyframes wave {
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* sticker blick */
.sticker::after {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    background: var(--sticker-after-bg);
    width: 150%; height: 150%;
    transform: rotate(45deg);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 30px 30px var(--sticker-after-box-shadow);
    pointer-events: none;
    transition: opacity 0.5s;
}

.sticker:hover::after {
    opacity: 1;
    animation: blink-animation 1.3s linear forwards;
}

@keyframes blink-animation {
    0% {
        transform: translateX(0) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Пульсация стрелки главной кнопки.
   Кольцо расходится ВНУТРИ кружка: у .mbtn стоит overflow:hidden ради ripple (.wave),
   поэтому эффект наружу обрезался бы краем кнопки.
   Только .mbtn.orange — на карточках «Положення» таких кружков четыре,
   пульсация на всех превратилась бы в рябь. */
.mbtn.orange .white-circle {
    position: relative;
}

.mbtn.orange .white-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--mbtn-orange-white-circle-after-border);
    opacity: 0;
    pointer-events: none;
    animation: arrow-pulse 4s ease-out infinite;
}

@keyframes arrow-pulse {
    0%   { transform: scale(.5); opacity: 0; }
    10%  { opacity: .85; }
    40%  { transform: scale(1); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .mbtn.orange .white-circle::after {
        animation: none;
    }
    .circle-element {
        animation: none;
    }
}