/*
Chip handshake: twelve pins around a die light in a clockwise chase while the core beats underneath.
The chase is 1.8s and the pins are spaced 0.15s apart (1.8 / 12), so the lit band travels the ring exactly
once per cycle. Each pin holds its colour for 22% of the cycle, which keeps two or three lit at a time and
reads as a band rather than a single blinking dot. The core runs at 0.9s - half the chase - so it beats
twice a lap and the two close together on 1.8s.

Pin order in the markup is clockwise from the top left, so the nth-child delays below are the chase order,
not the geometric order. Moving a pin in the markup moves it in the chase.
*/
.loader_box .loader98 {
    display: block;
    width: 160px;
    height: 160px;
    transform: scale(0.9);
}

.loader_box .loader98-die { fill: #036C91; }
.loader_box .loader98-inner { fill: none; stroke: #49ABCB; stroke-width: 2; }
.loader_box .loader98-notch { fill: #A5CE3A; }

.loader_box .loader98-pins rect {
    fill: #4452A4;
    animation: loader98-pin-lit 1.8s linear infinite;
}

.loader_box .loader98-pins rect:nth-child(1)  { animation-delay: 0s; }
.loader_box .loader98-pins rect:nth-child(2)  { animation-delay: -0.15s; }
.loader_box .loader98-pins rect:nth-child(3)  { animation-delay: -0.30s; }
.loader_box .loader98-pins rect:nth-child(4)  { animation-delay: -0.45s; }
.loader_box .loader98-pins rect:nth-child(5)  { animation-delay: -0.60s; }
.loader_box .loader98-pins rect:nth-child(6)  { animation-delay: -0.75s; }
.loader_box .loader98-pins rect:nth-child(7)  { animation-delay: -0.90s; }
.loader_box .loader98-pins rect:nth-child(8)  { animation-delay: -1.05s; }
.loader_box .loader98-pins rect:nth-child(9)  { animation-delay: -1.20s; }
.loader_box .loader98-pins rect:nth-child(10) { animation-delay: -1.35s; }
.loader_box .loader98-pins rect:nth-child(11) { animation-delay: -1.50s; }
.loader_box .loader98-pins rect:nth-child(12) { animation-delay: -1.65s; }

.loader_box .loader98-core {
    fill: #41AD49;
    transform-box: fill-box;
    transform-origin: center;
    animation: loader98-core-beat 0.9s ease-in-out infinite;
}

@keyframes loader98-pin-lit {
    0%, 10%   { fill: #A5CE3A; }
    22%, 100% { fill: #4452A4; }
}

@keyframes loader98-core-beat {
    0%, 100% { fill: #A5CE3A; transform: scale(0.85); }
    50%      { fill: #49ABCB; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader98-pins rect,
    .loader_box .loader98-core { animation: none; }
    .loader_box .loader98-core { transform: scale(1); }
}