.loader_box .pendulum-wave {
    width: 160px;
    height: 160px;
}

.loader_box .pendulum-wave__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.loader_box .pendulum-wave__rail {
    stroke: #595A5A;
    stroke-width: 6;
    stroke-linecap: round;
}

.loader_box .pendulum-wave__pendulum {
    transform-box: view-box;
    transform-origin: var(--pendulum-x) 27px;
    animation: pendulum-wave-swing 1.8s ease-in-out infinite alternate;
}

.loader_box .pendulum-wave__pendulum line {
    stroke: #595A5A;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.5;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(1) {
    --pendulum-x: 32px;
    animation-duration: 1.64s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(2) {
    --pendulum-x: 48px;
    animation-duration: 1.72s;
    animation-delay: -0.28s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(3) {
    --pendulum-x: 64px;
    animation-duration: 1.8s;
    animation-delay: -0.56s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(4) {
    --pendulum-x: 80px;
    animation-duration: 1.88s;
    animation-delay: -0.84s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(5) {
    --pendulum-x: 96px;
    animation-duration: 1.96s;
    animation-delay: -1.12s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(6) {
    --pendulum-x: 112px;
    animation-duration: 2.04s;
    animation-delay: -1.4s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(7) {
    --pendulum-x: 128px;
    animation-duration: 2.12s;
    animation-delay: -1.68s;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(1) circle,
.loader_box .pendulum-wave__pendulum:nth-of-type(6) circle {
    fill: url(#pend1-grad);
    stroke: url(#pend1-grad);
    stroke-width: 2;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(2) circle,
.loader_box .pendulum-wave__pendulum:nth-of-type(7) circle {
    fill: url(#pend2-grad);
    stroke: url(#pend2-grad);
    stroke-width: 2;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(3) circle {
    fill: url(#pend5-grad);
    stroke: url(#pend5-grad);
    stroke-width: 2;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(4) circle {
    fill: url(#pend3-grad);
    stroke: url(#pend3-grad);
    stroke-width: 2;
}

.loader_box .pendulum-wave__pendulum:nth-of-type(5) circle {
    fill: url(#pend4-grad);
    stroke: url(#pend4-grad);
    stroke-width: 2;
}

@keyframes pendulum-wave-swing {
    from { transform: rotate(-9deg); }
    to { transform: rotate(9deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .pendulum-wave__pendulum {
        animation: none;
        transform: none;
    }
}