/* Inline service illustrations. Every cycle starts and ends as a complete model.
   Only the visible motion-card contract starts playback; a plain SVG stays still. */
.service-illustration{--i-motion:1}
.service-illustration .i-part{
    transform-box:view-box;
    transform-origin:0 0;
    animation-duration:5.8s;
    animation-timing-function:cubic-bezier(.45,0,.25,1);
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-play-state:paused;
}
html:not(.motion-paused) .motion-card.is-in-view .service-illustration .i-part{animation-play-state:running}
html:not(.motion-paused) .motion-card:is(:hover,:focus-within) .service-illustration{--i-motion:1.16}

/* A roof settles onto the fixed walls. The whole roof retains its tile lines. */
.service-illustration .i-build-roof{animation-name:i-build-roof;animation-duration:5.8s}
@keyframes i-build-roof{
    0%,14%,64%,100%{transform:translateY(0)}
    28%,37%{transform:translateY(calc(-6px * var(--i-motion)))}
    50%{transform:translateY(calc(.6px * var(--i-motion)))}
    56%{transform:translateY(0)}
}

/* The top crossbeam is lowered onto the standing truss, rather than rocking it. */
.service-illustration .i-steel-beam{animation-name:i-steel-beam;animation-duration:6s}
@keyframes i-steel-beam{
    0%,15%,65%,100%{transform:translateY(0)}
    29%,38%{transform:translateY(calc(-4.5px * var(--i-motion)))}
    51%{transform:translateY(calc(.4px * var(--i-motion)))}
    57%{transform:translateY(0)}
}

/* Two nested joints: the boom pivots at the cab, the stick at its own hinge. */
.service-illustration .i-digger-boom{animation-name:i-digger-boom;animation-duration:5.6s;transform-origin:84px 78px}
.service-illustration .i-digger-stick{animation-name:i-digger-stick;animation-duration:5.6s;transform-origin:111px 70px}
@keyframes i-digger-boom{
    0%,12%,80%,100%{transform:rotate(0deg)}
    30%,48%{transform:rotate(calc(-5deg * var(--i-motion)))}
    65%{transform:rotate(calc(1deg * var(--i-motion)))}
    76%{transform:rotate(0deg)}
}
@keyframes i-digger-stick{
    0%,15%,80%,100%{transform:rotate(0deg)}
    33%,41%{transform:rotate(calc(7deg * var(--i-motion)))}
    54%{transform:rotate(calc(2deg * var(--i-motion)))}
    65%{transform:rotate(calc(-2deg * var(--i-motion)))}
    76%{transform:rotate(0deg)}
}

/* Faces, edge outlines and outer joints move together along the isometric axis. */
.service-illustration .i-facade-inner{animation-name:i-facade-inner;animation-duration:6s}
.service-illustration .i-facade-outer{animation-name:i-facade-outer;animation-duration:6s}
@keyframes i-facade-inner{
    0%,16%,68%,100%{transform:translate(0,0)}
    31%,43%{transform:translate(calc(2px * var(--i-motion)),calc(-1px * var(--i-motion)))}
    57%{transform:translate(0,0)}
}
@keyframes i-facade-outer{
    0%,19%,68%,100%{transform:translate(0,0)}
    34%,44%{transform:translate(calc(5px * var(--i-motion)),calc(-2.5px * var(--i-motion)))}
    59%{transform:translate(0,0)}
}

/* Tile planes, gutter and pipes remain one assembly; the highlight follows a tile. */
.service-illustration .i-roof-assembly{animation-name:i-roof-assembly;animation-duration:6s}
.service-illustration .i-roof-sheen{animation-name:i-roof-sheen;animation-duration:6s;stroke-dasharray:12 112}
@keyframes i-roof-assembly{
    0%,15%,65%,100%{transform:translateY(0)}
    29%,38%{transform:translateY(calc(-3.5px * var(--i-motion)))}
    52%{transform:translateY(0)}
}
@keyframes i-roof-sheen{
    0%,20%{stroke-dashoffset:0}
    52%,100%{stroke-dashoffset:-124}
}

/* The hanging load rises 7 units; a 34-unit cable shortens by exactly that amount. */
.service-illustration .i-crane-load{animation-name:i-crane-load;animation-duration:5.8s}
.service-illustration .i-crane-cable{animation-name:i-crane-cable;animation-duration:5.8s;transform-origin:118px 26px}
@keyframes i-crane-load{
    0%,13%,78%,100%{transform:translateY(0)}
    35%,47%{transform:translateY(calc(-7px * var(--i-motion)))}
    68%{transform:translateY(0)}
}
@keyframes i-crane-cable{
    0%,13%,78%,100%{transform:scaleY(1)}
    35%,47%{transform:scaleY(calc(1 - .205882353 * var(--i-motion)))}
    68%{transform:scaleY(1)}
}

/* The cable and ball swing from the fixed support, followed by a small rubble shift. */
.service-illustration .i-demo-pendulum{animation-name:i-demo-pendulum;animation-duration:5.7s;transform-origin:46px 39px}
.service-illustration .i-rubble-one{animation-name:i-rubble-one;animation-duration:5.7s}
.service-illustration .i-rubble-two{animation-name:i-rubble-two;animation-duration:5.7s}
@keyframes i-demo-pendulum{
    0%,12%,76%,100%{transform:rotate(0deg)}
    27%{transform:rotate(calc(3deg * var(--i-motion)))}
    42%{transform:rotate(calc(-4deg * var(--i-motion)))}
    59%{transform:rotate(calc(1deg * var(--i-motion)))}
    71%{transform:rotate(0deg)}
}
@keyframes i-rubble-one{
    0%,38%,64%,100%{transform:translate(0,0)}
    46%{transform:translate(calc(-1px * var(--i-motion)),calc(-1.5px * var(--i-motion)))}
    55%{transform:translate(0,0)}
}
@keyframes i-rubble-two{
    0%,41%,68%,100%{transform:translate(0,0)}
    49%{transform:translate(calc(1px * var(--i-motion)),calc(-1px * var(--i-motion)))}
    59%{transform:translate(0,0)}
}

/* The truck moves across the fixed pad. Only hub spokes rotate inside the tires. */
.service-illustration .i-truck-body{animation-name:i-truck-travel;animation-duration:6s}
.service-illustration .i-truck-wheel{animation-name:i-truck-wheel;animation-duration:6s;transform-box:fill-box;transform-origin:center}
@keyframes i-truck-travel{
    0%,14%,82%,100%{transform:translate(0,0)}
    38%,48%{transform:translate(calc(3px * var(--i-motion)),calc(-1.7px * var(--i-motion)))}
    73%{transform:translate(0,0)}
}
@keyframes i-truck-wheel{
    0%,14%,82%,100%{transform:rotate(0deg)}
    38%,48%{transform:rotate(calc(75deg * var(--i-motion)))}
    73%{transform:rotate(0deg)}
}

/* Individual paving units settle in sequence, then the loose slab is placed. */
.service-illustration .i-paver-first{animation-name:i-paver-first;animation-duration:5.8s}
.service-illustration .i-paver-second{animation-name:i-paver-second;animation-duration:5.8s}
.service-illustration .i-paving-slab{animation-name:i-paving-slab;animation-duration:5.8s}
@keyframes i-paver-first{
    0%,12%,49%,100%{transform:translateY(0)}
    24%{transform:translateY(calc(-3px * var(--i-motion)))}
    37%{transform:translateY(0)}
}
@keyframes i-paver-second{
    0%,24%,63%,100%{transform:translateY(0)}
    37%{transform:translateY(calc(-3px * var(--i-motion)))}
    50%{transform:translateY(0)}
}
@keyframes i-paving-slab{
    0%,36%,80%,100%{transform:translateY(0)}
    50%,55%{transform:translateY(calc(-4px * var(--i-motion)))}
    69%{transform:translateY(0)}
}

/* Complete brick courses and complete sheet-metal faces retain their own outlines. */
.service-illustration .i-material-stack{animation-name:i-material-stack;animation-duration:5.5s}
.service-illustration .i-material-sheets{animation-name:i-material-sheets;animation-duration:5.5s}
@keyframes i-material-stack{
    0%,15%,66%,100%{transform:translateY(0)}
    29%,37%{transform:translateY(calc(-5px * var(--i-motion)))}
    51%{transform:translateY(0)}
}
@keyframes i-material-sheets{
    0%,31%,76%,100%{transform:translate(0,0)}
    46%,51%{transform:translate(calc(2px * var(--i-motion)),calc(-1px * var(--i-motion)))}
    65%{transform:translate(0,0)}
}

/* Small offsets keep the six models from moving in lockstep. */
.service-illustration .i-steel-beam{animation-delay:.18s}
.service-illustration :is(.i-digger-boom,.i-digger-stick){animation-delay:.36s}
.service-illustration :is(.i-facade-inner,.i-facade-outer){animation-delay:.54s}
.service-illustration :is(.i-roof-assembly,.i-roof-sheen){animation-delay:.72s}
.service-illustration :is(.i-crane-load,.i-crane-cable){animation-delay:.9s}
.service-illustration :is(.i-demo-pendulum,.i-rubble-one,.i-rubble-two){animation-delay:.27s}
.service-illustration :is(.i-truck-body,.i-truck-wheel){animation-delay:.45s}
.service-illustration :is(.i-paver-first,.i-paver-second,.i-paving-slab){animation-delay:.63s}
.service-illustration :is(.i-material-stack,.i-material-sheets){animation-delay:.81s}

@media(prefers-reduced-motion:reduce){
    .service-illustration .i-part{
        animation:none!important;
        animation-play-state:paused!important;
        transform:none!important;
        opacity:1!important;
    }
}