/* ==========================================================================
   BACKGROUND DECOR — the busy working-site scenery.
   Cranes, a mine skyline, stencilled spray marks, stakes and a survey drone.
   All decorative, behind content, low contrast, and gently animated.
   ========================================================================== */

.site-light .section, .site-light .hero { position: relative; overflow: clip; }
.site-light .section > .container, .site-light .hero > .container { position: relative; z-index: 1; }

.decor { position: absolute; pointer-events: none; z-index: 0; }
.decor * { vector-effect: none; }

/* --- skyline along the bottom of the hero -------------------------------- */
.decor-skyline { left: 0; right: 0; bottom: 0; width: 100%; height: clamp(150px, 20vw, 260px); color: var(--color-tertiary); opacity: .13; }
.decor-skyline--footer { bottom: calc(100% - 22px); height: clamp(110px, 14vw, 190px); color: #2a2118; opacity: 1; z-index: 0; }

/* --- cranes ----------------------------------------------------------------- */
.decor-crane { width: clamp(180px, 22vw, 320px); color: var(--color-tertiary); opacity: .14; }
.bedrock .decor-crane { color: #fefefe; opacity: .1; }

.wheel { transform-box: fill-box; transform-origin: center; animation: decorSpin 16s linear infinite; }
.wheel-b { animation-duration: 20s; animation-direction: reverse; }
.decor-skyline .jib { transform-origin: 1198px 36px; animation: slew 18s ease-in-out infinite alternate; }
.decor-crane .jib { transform-origin: 155px 46px; animation: slew 20s ease-in-out infinite alternate; }
.hook, .load { animation: hookBob 6s ease-in-out infinite alternate; }
.decor-crane .load { animation: loadSwing 7s ease-in-out infinite alternate, hookBob 9s ease-in-out infinite alternate; }
.boom { animation: boomDig 9s ease-in-out infinite alternate; }
@keyframes decorSpin { to { transform: rotate(360deg); } }
@keyframes slew { from { transform: scaleX(.93); } to { transform: scaleX(1); } }
@keyframes hookBob { from { translate: 0 0; } to { translate: 0 8px; } }
@keyframes loadSwing { from { rotate: -3deg; } to { rotate: 3.5deg; } }
@keyframes boomDig { from { rotate: -3deg; } to { rotate: 2.5deg; } }

/* --- spray marks ------------------------------------------------------------ */
.decor-spray { width: clamp(260px, 30vw, 440px); opacity: .55; mix-blend-mode: multiply; }
.bedrock .decor-spray { mix-blend-mode: normal; opacity: .38; }
.decor-spray .s-text { opacity: 1; }
.drip { transform-box: fill-box; transform-origin: top center; }

/* paint "sprays on" the first time it scrolls into view */
.js-reveal .decor-spray .s-draw { stroke-dasharray: 800; stroke-dashoffset: 800; }
.js-reveal .decor-spray .s-text { opacity: 0; }
.js-reveal .decor-spray .drip { transform: scaleY(0); }
.js-reveal .decor-spray.in .s-draw { animation: sprayDraw 1.7s cubic-bezier(.4, 0, .2, 1) forwards; }
.js-reveal .decor-spray.in .s-text { animation: sprayFade .9s ease-out .5s forwards; }
.js-reveal .decor-spray.in .drip { animation: dripRun 3.2s cubic-bezier(.5, 0, .9, .6) 1.1s forwards; }
@keyframes sprayDraw { to { stroke-dashoffset: 0; } }
@keyframes sprayFade { to { opacity: 1; } }
@keyframes dripRun { to { transform: scaleY(1); } }

/* --- stakes and flagging tape ---------------------------------------------- */
.decor-stakes { width: clamp(90px, 10vw, 150px); color: var(--color-tertiary); opacity: .55; }
.flag { transform-box: fill-box; transform-origin: left center; animation: flutter 2.8s ease-in-out infinite alternate; }
.flag-b { animation-duration: 2.1s; animation-delay: -.8s; }
@keyframes flutter { from { transform: skewY(-7deg) scaleX(1); } to { transform: skewY(6deg) scaleX(.92); } }

/* --- survey drone on a dotted flight path ------------------------------------ */
.decor-drone { width: 700px; height: 160px; color: var(--color-tertiary); opacity: .3; }
.bedrock .decor-drone, .decor-drone--light { color: #fefefe; opacity: .35; }
.decor-drone .drone-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.decor-drone .drone {
  position: absolute; left: 0; top: 0; width: 56px;
  offset-path: path("M10 130 C120 20 220 150 340 70 S580 20 690 110");
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  animation: droneFly 26s ease-in-out infinite alternate;
}
.decor-drone .rot { transform-box: fill-box; transform-origin: center; animation: rotorBlur .14s linear infinite alternate; }
@keyframes droneFly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes rotorBlur { from { transform: scaleX(1); } to { transform: scaleX(.78); } }

/* --- phones: keep it busy but never cramped ---------------------------------- */
@media (max-width: 760px) {
  .decor-drone, .decor-crane { display: none; }
  .decor-spray { width: 220px; opacity: .4; }
  .decor-stakes { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel, .jib, .hook, .load, .boom, .flag, .drone, .rot { animation: none !important; }
  .js-reveal .decor-spray .s-draw { stroke-dashoffset: 0; }
  .js-reveal .decor-spray .s-text { opacity: 1; }
  .js-reveal .decor-spray .drip { transform: none; }
}

/* ==========================================================================
   Placement (tuned per section)
   ========================================================================== */
/* hero */
.hero .decor-spray--hero { right: 2%; top: 300px; transform: rotate(6deg); width: clamp(220px, 26vw, 380px); }
.hero .decor-stakes--hero { left: 1%; bottom: clamp(120px, 16vw, 210px); }

/* the range */
#range .decor-crane { right: -2%; top: 40px; }
#range .decor-spray--a { left: -3%; bottom: 14%; transform: rotate(-5deg); }
#range .decor-spray--b { right: -2%; bottom: 3%; transform: rotate(4deg); }
#range .decor-stakes { right: 6%; top: 160px; }

/* where we supply (dark) */
#sectors .decor-crane { left: -3%; bottom: 1%; transform: scaleX(-1); }
#sectors .decor-spray--a { right: -2%; top: 4%; transform: rotate(5deg); }
#sectors .decor-spray--b { left: 28%; bottom: 0; transform: rotate(-3deg); }
#sectors .decor-drone { right: 4%; top: 6%; }

/* why vision ai */
#why-us .decor-spray--c { right: -3%; bottom: 2%; transform: rotate(-4deg); }
#why-us .decor-stakes { left: 2%; bottom: 2%; }

/* beyond the kit */
#beyond .decor-drone { left: 18%; top: 4px; }
#beyond .decor-spray--b { left: -3%; bottom: 0; transform: rotate(-4deg); }

/* request a quote */
#quote .decor-spray--a { left: -3%; top: 2%; transform: rotate(-3deg); }
#quote .decor-stakes { right: 3%; bottom: 10px; }