/* Machine animations. Loaded only when switched on in admin → Machine animations. */
.mx{pointer-events:none;line-height:0}
.mx svg{width:100%;height:auto;display:block;overflow:visible}
.mx svg *{transform-box:view-box}
.mx .mx-body{fill:var(--accent)}
.mx .mx-steel{fill:#34363c}
.mx .mx-blade{fill:#7c8088}
.mx .mx-hub{fill:#6b6e75}
.mx .mx-glass{fill:#9fc3d6;opacity:.85}
.mx .mx-shadow{fill:rgba(0,0,0,.35)}
.mx .mx-road{stroke:var(--accent)}
.mx .mx-flow,.mx .mx-spray{stroke:#4fb3e8}
.mx .mx-rain circle,.mx .mx-drops circle,.mx .mx-drops2 circle{fill:#4fb3e8}
.mx .mx-dirt circle{fill:#7d5d33}

/* ---- placement: big machine in page tops (in the normal flow, never over text) ---- */
.mx-hero{width:clamp(200px,22vw,330px);justify-self:end;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));animation:mxIn 1.2s .5s both cubic-bezier(.2,.8,.2,1)}
@keyframes mxIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.hero.has-mx .hero-foot{align-items:end}
@media (min-width:1200px){.hero.has-mx .hero-foot{grid-template-columns:minmax(0,1fr) auto auto;gap:28px}}
@media (min-width:641px) and (max-width:1199px){.hero.has-mx .hero-foot{grid-template-columns:minmax(0,1fr) auto}.hero.has-mx .hero-foot .mx-hero{grid-column:1/-1}}
.ph-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;animation:fade 1s .55s both}
.ph-bottom .mx-hero{margin-left:auto}
@media (max-width:640px){.mx-hero{width:min(64vw,240px)}}

/* ---- small machine on service cards ---- */
.svc-card .mx-card{position:absolute;right:16px;top:76px;width:clamp(96px,30%,140px);opacity:.95;z-index:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.svc-card:hover .mx-card{transform:translateX(-8px) scale(1.06)}
.svc-card h3,.svc-card p{position:relative;z-index:1}
@media (hover:hover){.svc-card .mx-card *{animation-play-state:paused!important}.svc-card:hover .mx-card *{animation-play-state:running!important}}

/* ---- excavator ---- */
.mx-boom{transform-origin:174px 133px;animation:mxBoom 4.2s ease-in-out infinite}
.mx-stick{transform-origin:298px 57px;animation:mxStick 4.2s ease-in-out infinite}
.mx-bucket{transform-origin:312px 158px;animation:mxBucket 4.2s ease-in-out infinite}
.mx-load{animation:mxLoad 4.2s ease-in-out infinite}
.mx-dirt circle{animation:mxDirt 4.2s ease-in infinite;opacity:0}
.mx-dirt circle:nth-child(2){animation-delay:.08s}.mx-dirt circle:nth-child(3){animation-delay:.16s}.mx-dirt circle:nth-child(4){animation-delay:.12s}
@keyframes mxBoom{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}55%{transform:rotate(-12deg)}75%{transform:rotate(-12deg)}}
@keyframes mxStick{0%,100%{transform:rotate(0)}30%{transform:rotate(14deg)}55%{transform:rotate(-6deg)}75%{transform:rotate(-6deg)}}
@keyframes mxBucket{0%,100%{transform:rotate(0)}30%{transform:rotate(30deg)}45%{transform:rotate(-28deg)}75%{transform:rotate(-28deg)}85%{transform:rotate(40deg)}}
@keyframes mxLoad{0%,40%{opacity:0}45%,82%{opacity:1}88%,100%{opacity:0}}
@keyframes mxDirt{0%,82%{opacity:0;transform:translate(-30px,-80px)}86%{opacity:1;transform:translate(-30px,-70px)}100%{opacity:0;transform:translate(-10px,0)}}

/* ---- mulcher ---- */
.mx-drum{transform-origin:288px 194px;animation:mxSpin .5s linear infinite}
.mx-chips rect{animation:mxChip 1.1s ease-out infinite;transform-origin:320px 190px}
.mx-chips rect:nth-child(2){animation-delay:.25s}.mx-chips rect:nth-child(3){animation-delay:.5s}.mx-chips rect:nth-child(4){animation-delay:.75s}
.mx-bush{transform-origin:360px 226px;animation:mxShake .35s ease-in-out infinite alternate}
.mx-mulcher svg>rect:first-of-type,.mx-mulcher .mx-wheels{animation:mxIdle .25s linear infinite alternate}
@keyframes mxSpin{to{transform:rotate(-360deg)}}
@keyframes mxChip{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(46px,-60px) rotate(220deg)}}
@keyframes mxShake{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes mxIdle{from{transform:translateY(0)}to{transform:translateY(1px)}}

/* ---- wrecking ball ---- */
.mx-swing{transform-origin:266px 34px;animation:mxSwing 2.6s ease-in-out infinite alternate}
.mx-wall{transform-origin:330px 224px;animation:mxWall 5.2s ease-in-out infinite}
.mx-bricks rect{opacity:0;animation:mxBrick 5.2s ease-in infinite}
.mx-bricks rect:nth-child(2){animation-delay:.1s}.mx-bricks rect:nth-child(3){animation-delay:.2s}
@keyframes mxSwing{from{transform:rotate(-22deg)}to{transform:rotate(16deg)}}
@keyframes mxWall{0%,46%,60%,100%{transform:none}50%{transform:rotate(1.5deg)}54%{transform:rotate(-1deg)}}
@keyframes mxBrick{0%,48%{opacity:0;transform:none}50%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1;transform:translate(26px,90px) rotate(160deg)}76%,100%{opacity:0;transform:translate(26px,96px) rotate(180deg)}}

/* ---- grader ---- */
.mx-drive{animation:mxDrive 3.2s ease-in-out infinite alternate}
.mx-wheel{animation:mxSpinR 1s linear infinite}
.mx-road{animation:mxDash 1s linear infinite}
@keyframes mxDrive{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
@keyframes mxSpinR{to{transform:rotate(360deg)}}
@keyframes mxDash{to{stroke-dashoffset:-44}}

/* ---- pipe ---- */
.mx-flow{animation:mxFlow .8s linear infinite}
.mx-rain circle{animation:mxRain 1.2s linear infinite}
.mx-rain circle:nth-child(2){animation-delay:.4s}.mx-rain circle:nth-child(3){animation-delay:.8s}
.mx-drops circle{animation:mxDrop 1.2s linear infinite;opacity:0}
.mx-drops circle:nth-child(2){animation-delay:.4s}.mx-drops circle:nth-child(3){animation-delay:.8s}
@keyframes mxFlow{to{stroke-dashoffset:-36}}
@keyframes mxRain{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(100px);opacity:.9}}
@keyframes mxDrop{0%{transform:translateY(-10px);opacity:0}20%{opacity:1}100%{transform:translateY(44px);opacity:0}}

/* ---- tower crane ---- */
.mx-trolley{animation:mxTrolley 6s ease-in-out infinite}
.mx-hoist{animation:mxHoist 6s ease-in-out infinite}
@keyframes mxTrolley{0%,10%{transform:translateX(0)}45%,60%{transform:translateX(140px)}95%,100%{transform:translateX(0)}}
@keyframes mxHoist{0%{transform:translateY(40px)}10%{transform:translateY(0)}45%{transform:translateY(0)}58%{transform:translateY(22px)}70%{transform:translateY(0)}95%,100%{transform:translateY(40px)}}

/* ---- hydrant ---- */
.mx-spray{animation:mxFlow .6s linear infinite}
.mx-drops2 circle{animation:mxSplash .9s ease-out infinite}
.mx-drops2 circle:nth-child(2){animation-delay:.3s}.mx-drops2 circle:nth-child(3){animation-delay:.6s}
@keyframes mxSplash{0%{transform:translate(0,0);opacity:1}100%{transform:translate(8px,-24px);opacity:0}}

/* ---- pipe-laying scroll bar: the machine lays a cyan pipe as visitors scroll ---- */
.mx-track{position:fixed;left:0;right:0;bottom:0;height:calc(30px + env(safe-area-inset-bottom,0px));z-index:45;pointer-events:none;
  background:linear-gradient(#4d6b2e,#4d6b2e) 0 0/100% 4px no-repeat,repeating-radial-gradient(circle at 7px 18px,#7a4527 0 4px,#6a3b22 4px 8px);background-size:100% 4px,16px 22px;box-shadow:0 -6px 18px -8px rgba(0,0,0,.45)}
.mx-track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);
  background:
    repeating-linear-gradient(90deg,transparent 0 112px,var(--accent,#e52636) 112px 120px) 0 9px/100% 14px no-repeat,
    linear-gradient(#ffffff99,#ffffff99) 0 11px/100% 2px no-repeat,
    linear-gradient(var(--accent2,#06d8fe),var(--accent2,#06d8fe)) 0 10px/100% 12px no-repeat,
    linear-gradient(#3b2417,#2a1a10);
  border-top:3px solid #5a3420}
.mx-track::after{content:"";position:absolute;left:0;top:18px;height:2px;width:var(--p,0%);background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 24px);opacity:.85;animation:mxFlowBar 1s linear infinite}
@keyframes mxFlowBar{to{background-position:24px 0}}
.mx-track .mx-dozer{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:calc(var(--p,0%) - 92px);width:100px;transition:left .15s linear;filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));z-index:2}
.mx-track .mx-dozer.moving .mx-wheels{animation:mxIdle .15s linear infinite alternate}
.mx-track .mx-dozer .mx-pipe-hang{transform-origin:112px 14px;animation:mxSwayPipe 2.4s ease-in-out infinite}
.mx-track .mx-dozer.moving .mx-pipe-hang{animation-duration:.6s}
@keyframes mxSwayPipe{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
body.has-track{padding-bottom:30px}
body.has-track .lb,body.has-track #lb,body.has-track #vb{z-index:160}
@media (max-width:640px){.mx-track{height:calc(24px + env(safe-area-inset-bottom,0px))}.mx-track::before{background-size:100% 11px,100% 2px,100% 10px,auto;background-position:0 7px,0 9px,0 8px,0 0}.mx-track::after{top:13px}.mx-track .mx-dozer{width:76px;bottom:calc(9px + env(safe-area-inset-bottom,0px));left:calc(var(--p,0%) - 70px)}body.has-track{padding-bottom:24px}}

/* ---- loading screen ---- */
.mx-loader{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;align-content:center;gap:22px;animation:mxGone .5s 2.2s forwards}
.mx-loader .mx{width:min(64vw,300px)}
.mx-loader .bar{width:min(64vw,300px);height:8px;background:rgba(255,255,255,.08);overflow:hidden}
.mx-loader .bar b{display:block;height:100%;width:100%;background:repeating-linear-gradient(-45deg,var(--accent) 0 10px,#000 10px 20px);transform-origin:left;animation:mxFill 1.6s cubic-bezier(.4,0,.2,1) both}
.mx-loader span{font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}
.mx-loader.done{animation:mxGone .45s forwards}
@keyframes mxFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mxGone{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){.mx *{animation:none!important}.mx-loader{display:none}.mx-track .mx-dozer{transition:none}}