.gs-construction-scene {
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
    pointer-events: none;
}

.gs-construction-scene svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.gs-construction-scene .gs-build-working-arm {
    transform-origin: 171px 195px;
    animation: gs-build-tighten 3.8s ease-in-out infinite;
}

.gs-construction-scene .gs-build-screwdriver {
    transform-origin: 238px 184px;
    animation: gs-build-tool 3.8s ease-in-out infinite;
}

.gs-construction-scene .gs-build-progress {
    stroke-dasharray: 178;
    animation: gs-build-load 7.6s ease-in-out infinite;
}

.gs-construction-scene .gs-build-screen-panel {
    animation: gs-build-panel 7.6s ease-in-out infinite;
}

.gs-construction-scene .gs-build-check {
    transform-origin: 492px 113px;
    animation: gs-build-ready 7.6s ease-in-out infinite;
}

@keyframes gs-build-tighten {
    0%, 18%, 52%, 100% { transform: rotate(0deg); }
    27%, 43% { transform: rotate(-2deg); }
    35% { transform: rotate(1deg); }
}

@keyframes gs-build-tool {
    0%, 18%, 52%, 100% { transform: rotate(0deg); }
    27%, 43% { transform: rotate(-7deg); }
    35% { transform: rotate(5deg); }
}

@keyframes gs-build-load {
    0%, 12% { stroke-dashoffset: 130; }
    35% { stroke-dashoffset: 82; }
    65%, 88% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 130; }
}

@keyframes gs-build-panel {
    0%, 12%, 100% { opacity: .68; }
    42%, 88% { opacity: 1; }
}

@keyframes gs-build-ready {
    0%, 40%, 100% { opacity: 0; transform: scale(.85); }
    52%, 88% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gs-construction-scene .gs-build-working-arm,
    .gs-construction-scene .gs-build-screwdriver,
    .gs-construction-scene .gs-build-progress,
    .gs-construction-scene .gs-build-screen-panel,
    .gs-construction-scene .gs-build-check {
        animation: none;
    }
}
