/*
Calculator: keys press in one after another and digits land on the display as they go.

The keypad is a 4x4 grid in row-major order, and only eight of the sixteen keys are animated - the eight
are scattered rather than sequential so the run reads as somebody entering a sum rather than a wave
crossing the pad. The nth-child numbers below are therefore the press order, not the grid order; the
comment beside each gives its row and column.

A press is 0.3s apart from the next and lasts 22% of the cycle (0.53s), so a key is still on its way back
up as the next goes down. Each key keeps its resting colour in --key, which lets the fourth column sit a
shade darker as operator keys while still returning to the right colour after a press.

Four digits arrive 0.6s apart - one every second press - so the display fills across the cycle. Presses
(0.3s), digits (0.6s) and the 2.4s cycle all divide evenly, so the whole thing closes on 2.4s.
*/
.loader_box .loader99 {
    display: block;
    width: 140px;
    height: 190px;
    transform: scale(0.6);
}

.loader_box .loader99-body { fill: url(#loader99-body-grad); }
.loader_box .loader99-screen { fill: #CDCDCD; }

.loader_box .loader99-digits rect {
    fill: #595A5A;
    opacity: 0.05;
    animation: loader99-digit 2.4s ease-out infinite;
}

.loader_box .loader99-digits rect:nth-child(1) { animation-delay: 0s; }
.loader_box .loader99-digits rect:nth-child(2) { animation-delay: 0.6s; }
.loader_box .loader99-digits rect:nth-child(3) { animation-delay: 1.2s; }
.loader_box .loader99-digits rect:nth-child(4) { animation-delay: 1.8s; }

.loader_box .loader99-keys rect {
    --key: #A5CE3A;
    fill: var(--key);
}

/* fourth column reads as operator keys */
.loader_box .loader99-keys rect:nth-child(4n) { --key: #49ABCB; }

.loader_box .loader99-keys rect:nth-child(6)  { animation: loader99-press 2.4s ease-out 0s    infinite; } /* r2 c2 */
.loader_box .loader99-keys rect:nth-child(3)  { animation: loader99-press 2.4s ease-out 0.3s  infinite; } /* r1 c3 */
.loader_box .loader99-keys rect:nth-child(11) { animation: loader99-press 2.4s ease-out 0.6s  infinite; } /* r3 c3 */
.loader_box .loader99-keys rect:nth-child(8)  { animation: loader99-press 2.4s ease-out 0.9s  infinite; } /* r2 c4 */
.loader_box .loader99-keys rect:nth-child(14) { animation: loader99-press 2.4s ease-out 1.2s  infinite; } /* r4 c2 */
.loader_box .loader99-keys rect:nth-child(2)  { animation: loader99-press 2.4s ease-out 1.5s  infinite; } /* r1 c2 */
.loader_box .loader99-keys rect:nth-child(9)  { animation: loader99-press 2.4s ease-out 1.8s  infinite; } /* r3 c1 */
.loader_box .loader99-keys rect:nth-child(16) { animation: loader99-press 2.4s ease-out 2.1s  infinite; } /* r4 c4 */

@keyframes loader99-press {
    0%        { fill: var(--key); transform: translateY(0); }
    6%, 14%   { fill: #41AD49;   transform: translateY(2.5px); }
    22%, 100% { fill: var(--key); transform: translateY(0); }
}

@keyframes loader99-digit {
    0%        { opacity: 0.18; }
    8%, 78%   { opacity: 1; }
    88%, 100% { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader99-keys rect,
    .loader_box .loader99-digits rect { animation: none; }
    .loader_box .loader99-digits rect { opacity: 1; }
}