/* Machine drawings (assets/machine-art.js): ink line art on light fills, the GPS dome white, the
   cutting edge picked out in ink. Moves only while on screen (.is-on) and never with the site's
   motion switch held still or reduced motion. */

.machine-art { display: block; width: 100%; aspect-ratio: 16 / 7; }
.machine-art .ma-svg { display: block; width: 100%; height: 100%; overflow: hidden; }

.ma-soil { fill: #f1ebe0; }
.ma-ground { stroke: #8b8172; stroke-width: 2; }
.ma-tick { stroke: #b9ae9c; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.ma-frame { fill: none; stroke: #1a1612; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ma-body { fill: #e9e4da; stroke: #1a1612; stroke-width: 2.4; stroke-linejoin: round; }
.ma-line { fill: none; stroke: #1a1612; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-edge { fill: none; stroke: #1a1612; stroke-width: 4.5; stroke-linecap: round; }
.ma-glass { fill: #fff; stroke: #1a1612; stroke-width: 1.6; }
.ma-tyre { fill: #3a332b; stroke: #1a1612; stroke-width: 2; }
.ma-rim { fill: #e9e4da; stroke: #1a1612; stroke-width: 1.8; }
.ma-tread { fill: none; stroke: #e9e4da; stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.ma-track { fill: none; stroke: #1a1612; stroke-width: 4; stroke-dasharray: 3 5; }
.ma-mast { stroke: #1a1612; stroke-width: 2.6; stroke-linecap: round; }
.ma-rx { fill: #fff; stroke: #1a1612; stroke-width: 2; }
.ma-dirt { fill: #8a6f55; }
.ma-heap { fill: #c9b79c; }
.ma-shank { fill: none; stroke: #1a1612; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ma-tile, .ma-tile-feed { fill: none; stroke: #8b8172; stroke-width: 5; stroke-linecap: round; }
.ma-tile-feed { stroke-dasharray: 7 6; }

/* excavator (DIG): yellow only on the DIG parts, green for the design grade in the trench */
.ma-dig { fill: var(--brand-yellow, #f9a902); stroke: #1a1612; stroke-width: 1.4; }
.ma-grade { fill: none; stroke: var(--brand-green, #288c27); stroke-width: 2.4; stroke-dasharray: 6 4; }
.ma-arm-out { fill: none; stroke: #1a1612; stroke-width: 10; stroke-linecap: round; }
.ma-arm-in { fill: none; stroke: #e9e4da; stroke-width: 5.5; stroke-linecap: round; }
.ma-arm-out.ma-arm--stick { stroke-width: 8; }
.ma-arm-in.ma-arm--stick { stroke-width: 4; }
.ma-edge-fill { fill: #1a1612; }
.ma-dig-load { opacity: 0; }
.ma-dig-arm { transform-box: view-box; transform-origin: 226px 84px; }
.ma-dig-bucket { transform-box: view-box; transform-origin: 114px 100px; }
.ma-dig-gps { transform-box: view-box; transform-origin: 147px 31px; }
/* skid steer: the lift arms rock about their pivot on the rear tower, lifting and dropping the blade */
.ma-lift-arm { transform-box: view-box; transform-origin: 220px 46px; }

/* in a wide photo panel (mode pages, the tiling intro) keep the drawing a readable size, centred,
   with the ground fading out at the sides instead of stopping */
.application__img:has(> .machine-art) { aspect-ratio: auto !important; display: flex; justify-content: center; align-items: center; padding: 10px 0; background: #faf8f3; }
.application__img > .machine-art { width: min(100%, 620px) !important; height: auto !important; aspect-ratio: 16 / 7 !important; }
.hero__visual > .machine-art { padding: 6% 4%; }
.application__img > .machine-art .ma-svg,
.hero__visual > .machine-art .ma-svg { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }

/* Ditch Assist Lite (data-link="wifi"): the receiver's Wi-Fi to the tablet in the cab. Still, it reads as a
   dotted link, waves over the dome and a lit tablet; moving, signals run out to the cab and one comes back,
   and the tablet's screen flashes as each one lands. */
.ma-link { fill: none; stroke: #288c27; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: .1 4; opacity: .75; }
.ma-pkt { fill: none; stroke: #288c27; stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.ma-pkt--back { stroke-width: 3.2; }
.ma-wave { fill: none; stroke: #288c27; stroke-width: 1.6; stroke-linecap: round; }
.ma-tab { fill: #1a1612; stroke: #1a1612; stroke-width: 1; }
.ma-tab-scr { fill: #4cc24a; }
.machine-art.is-on .ma-pkt { animation: ma-pkt 1.8s linear infinite; }
.machine-art.is-on .ma-pkt--2 { animation-delay: -.9s; }
.machine-art.is-on .ma-pkt--back { animation: ma-pkt-back 3.6s linear infinite; animation-delay: -1.3s; }
.machine-art.is-on .ma-wave { animation: ma-wave .9s ease-out infinite; }
.machine-art.is-on .ma-wave--2 { animation-delay: .18s; }
.machine-art.is-on .ma-tab-scr { animation: ma-tab .9s linear infinite; animation-delay: -.12s; }
@keyframes ma-pkt { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
/* back from the cab to the receiver, in the first half of its cycle (dash offset 0 to 100 runs end to start) */
@keyframes ma-pkt-back { 0% { stroke-dashoffset: 0; opacity: 0; } 4% { opacity: .9; } 44% { opacity: .9; } 50%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes ma-wave { 0% { opacity: .2; } 30% { opacity: 1; } 100% { opacity: .2; } }
@keyframes ma-tab { 0%, 100% { opacity: .5; } 12% { opacity: 1; } 40% { opacity: .62; } }

/* motion */
.ma-spin { transform-box: fill-box; transform-origin: 50% 50%; }
.machine-art.is-on .ma-spin { animation: ma-spin 1.8s linear infinite; }
.machine-art.is-on .ma-spin--ccw { animation-direction: reverse; }
.machine-art.is-on .ma-spin--fast { animation-duration: .9s; }
.machine-art.is-on .ma-scroll { animation: ma-scroll .55s linear infinite; }
.machine-art.is-on .ma-bob { animation: ma-bob 3.6s ease-in-out infinite; }
.machine-art.is-on .ma-bob--small { animation-duration: 4.4s; }
.machine-art.is-on .ma-track { animation: ma-track .55s linear infinite; }
.machine-art.is-on .ma-tile-feed { animation: ma-feed .8s linear infinite; }
.machine-art.is-on .ma-spoil .ma-dirt { animation: ma-roll .9s ease-in-out infinite; }
/* ditcher plume: soil and dust puffing up behind the hood (still when motion is held), clumps arcing
   up and away (shown only while it moves) */
.ma-puff { fill: #b4a083; opacity: .5; transform-box: fill-box; transform-origin: center; }
.machine-art.is-on .ma-puff { animation: ma-puff 3.1s ease-out infinite; }
.ma-fly-bit { opacity: 0; stroke: #1a1612; stroke-width: .6; transform-box: fill-box; transform-origin: center; }
.machine-art.is-on .ma-fly-bit { animation: ma-fly 1.1s ease-out infinite; }
.machine-art.is-on .ma-dig-arm { animation: ma-arm 4.2s ease-in-out infinite; }
.machine-art.is-on .ma-dig-gps { animation: ma-arm-back 4.2s ease-in-out infinite; }
.machine-art.is-on .ma-dig-bucket { animation: ma-curl 4.2s ease-in-out infinite; }
.machine-art.is-on .ma-dig-load { animation: ma-load 4.2s ease-in-out infinite; }
.machine-art.is-on .ma-lift-arm { animation: ma-lift 3.6s ease-in-out infinite; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
/* dig cycle: reach out, down into the trench, drag and curl, lift out; the GPS turns back by the same angle so it stays upright */
@keyframes ma-arm { 0%, 100% { transform: rotate(-5deg); } 35% { transform: rotate(4deg); } 60% { transform: rotate(3deg); } 80% { transform: rotate(-7deg); } }
@keyframes ma-arm-back { 0%, 100% { transform: rotate(5deg); } 35% { transform: rotate(-4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(7deg); } }
@keyframes ma-curl { 0%, 100% { transform: rotate(-16deg); } 35% { transform: rotate(0deg); } 60% { transform: rotate(30deg); } 80% { transform: rotate(24deg); } 92% { transform: rotate(-8deg); } }
@keyframes ma-load { 0%, 40% { opacity: 0; } 52%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
/* about 2px of lift at the blade, the same travel as ma-bob */
@keyframes ma-lift { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(1.2deg); } 70% { transform: rotate(-0.7deg); } }
/* the machines drive left, so the ground and the laid tile slide right */
@keyframes ma-scroll { from { transform: translateX(0); } to { transform: translateX(16px); } }
@keyframes ma-bob { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.2px); } 70% { transform: translateY(1.4px); } }
@keyframes ma-track { to { stroke-dashoffset: -16; } }
@keyframes ma-feed { to { stroke-dashoffset: -13; } }
@keyframes ma-roll { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -1.5px); } }
@keyframes ma-fly { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 55% { transform: translate(calc(var(--fx, 0px) * .6), -22px) scale(.8); } 100% { opacity: 0; transform: translate(var(--fx, 0px), -16px) scale(.6); } }
@keyframes ma-puff { 0% { opacity: 0; transform: translate(-6px, 8px) scale(.55); } 25% { opacity: .6; } 100% { opacity: 0; transform: translate(10px, -10px) scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .machine-art.is-on * { animation: none !important; }
  .ma-fly-bit { opacity: 0; }
}
html.da-still .machine-art * { animation: none !important; }