.wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

body.loaded .wrapper {
    opacity: 1;
    visibility: visible;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    gap: 12px;
    text-align: center;

    backdrop-filter: blur(2px);

    /* плавное исчезновение */
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.preloader_wrapper {
    display: flex;
    width: 50vw;
    align-items: center;
    justify-content: center;
}

.preloader.is-hiding {
    opacity: 0;
    visibility: hidden;
}

.preloader__icon {
    display: grid;
    place-items: center;
    margin-right: 20px;

    transform-box: fill-box;
    transform-origin: center;
    transform-style: preserve-3d;
}

.preloader__svg {
    display: block;
    width: 64px;
    height: 64px;
    transform-origin: 50% 50%;
    animation: preloader-spin-pause 4s ease-in-out infinite;
    will-change: transform;
}

@keyframes preloader-spin-pause {
    /* вращение */
    0%   { transform: rotateY(0deg); }
    55%  { transform: rotateY(360deg); }

    /* пауза */
    90%  { transform: rotateY(360deg); }

    /* конец цикла (360 == 0, скачка нет) */
    100% { transform: rotateY(360deg); }
}

@keyframes preloader-spin {
    0%   { transform: rotateY(0deg); }
    65%  { transform: rotateY(360deg); }
    85%  { transform: rotateY(360deg); }
    100% { transform: rotateY(360deg); }
}

/* === Text typing animation (буквы появляются по очереди через JS) === */
.preloader__text {
    font: 600 24px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #a6e440;
    letter-spacing: 0.2px;
    user-select: none;
}

.preloader__text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 180ms ease, visibility 180ms ease
}
.preloader__text .char.is-ready {
    opacity: 1;
}
@keyframes char-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Dots color animation ===
ВАЖНО: это применяется к элементам, которым ты повесишь класс .preloader__dot.
Тогда мы меняем fill с белого на зеленый и обратно (или держим зелёный — на вкус).
*/
.preloader__dot {
    fill: #fff;
    animation: dot-to-green 900ms ease-in-out infinite alternate;
}
.preloader__two,
.preloader__four {
    fill: #fff;
}

@keyframes dot-to-green {
    from { fill: #ffffff; }
    to   { fill: #a6e440; }
}


.preloader__arrowMaskStroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: -1000;
    animation: arrow-reveal 3.5s ease-in-out infinite;
    animation-direction: reverse;
}

@keyframes arrow-reveal {
    to { stroke-dashoffset: 0; }
}