/*
Laptop: four lines of code type themselves out on the screen, hold, clear, and start again, with a cursor
blinking on the line below.

Each line is a plain <line> normalised with pathLength="100" and covered by a full-length dash, so pulling
stroke-dashoffset from 100 to 0 uncovers it left to right at a constant rate whatever its actual length -
short lines and long lines type at the same speed per character, not per line. Using a dash rather than
scaling the element keeps the round line ends round while it types.

Lines start 0.6s apart on a 4s cycle: typed by 12%, held to 70%, gone by 78%, blank until the next start.
The cursor blinks at 0.8s with step-end so it snaps rather than fades, and 0.8s divides 4s, so the cursor
and the typing close together on 4s.
*/
.loader_box .loader97 {
    display: block;
    width: 220px;
    height: 150px;
    transform: scale(0.8);
}

.loader_box .loader97-lid { fill: #595A5A; }
.loader_box .loader97-screen { fill: url(#loader97-screen-grad); }
.loader_box .loader97-base { fill: url(#loader97-base-grad); }
.loader_box .loader97-hinge { fill: #000000; }

.loader_box .loader97-lines line {
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: loader97-type 4s ease-out infinite;
}

.loader_box .loader97-lines line:nth-child(1) { stroke: #036C91; animation-delay: 0s; }
.loader_box .loader97-lines line:nth-child(2) { stroke: #4452A4; animation-delay: 0.6s; }
.loader_box .loader97-lines line:nth-child(3) { stroke: #41AD49; animation-delay: 1.2s; }
.loader_box .loader97-lines line:nth-child(4) { stroke: #036C91; animation-delay: 1.8s; }

.loader_box .loader97-cursor {
    fill: #FFFFFF;
    animation: loader97-blink 0.8s step-end infinite;
}

@keyframes loader97-type {
    0%         { stroke-dashoffset: 100; }
    12%, 70%   { stroke-dashoffset: 0; }
    78%, 100%  { stroke-dashoffset: 100; }
}

@keyframes loader97-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader97-lines line,
    .loader_box .loader97-cursor { animation: none; }
    .loader_box .loader97-lines line { stroke-dashoffset: 0; }
}