/* John Cox & Son motion backgrounds
   Reusable decorative layers that move on their own (no hover, no pointer needed).
   Layers are created by motion-backgrounds.js from data-mb attributes and configured with --mb-* variables:
   --mb-color (r,g,b) · --mb-intensity (0-1 alpha) · --mb-opacity · --mb-speed (multiplier) · --mb-dur (base seconds)
   --mb-angle / --mb-gx / --mb-gy (direction) · --mb-z (stacking) · --mb-mask (edge fade)
   Time-based parts only run while their section is on screen and the tab is visible (.on), and stop for reduced motion. */

.mb{position:absolute;inset:var(--mb-inset,0);z-index:var(--mb-z,-1);pointer-events:none;overflow:hidden;opacity:var(--mb-opacity,1);contain:layout paint style;-webkit-mask-image:var(--mb-mask,none);mask-image:var(--mb-mask,none);mix-blend-mode:var(--mb-blend,normal)}
.mb:not(.on) .t,.mb:not(.on)::before,.mb:not(.on)::after,.mb-kb:not(.on){animation-play-state:paused!important}

/* ambient light: soft radial sources drifting on long eased paths */
.mb-light .t{position:absolute;left:var(--x,30%);top:var(--y,40%);width:var(--size,55%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--mb-color,238,85,96),var(--mb-intensity,.3)),rgba(var(--mb-color,238,85,96),calc(var(--mb-intensity,.3) * .35)) 45%,rgba(var(--mb-color,238,85,96),0));will-change:transform;animation:mbDrift calc(var(--d,var(--mb-dur,18s)) / var(--mb-speed,1)) ease-in-out var(--dl,0s) infinite alternate}
@keyframes mbDrift{0%{transform:translate(0,0) scale(1)}35%{transform:translate(var(--dx1,20%),var(--dy1,-10%)) scale(1.14)}70%{transform:translate(var(--dx2,-15%),var(--dy2,12%)) scale(.9)}100%{transform:translate(var(--dx3,30%),var(--dy3,6%)) scale(1.06)}}

/* light sweep: a reflection band crosses the layer, then rests until the next pass */
.mb-sweep::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--mb-angle,105deg),rgba(var(--mb-color,255,255,255),0) 40%,rgba(var(--mb-color,255,255,255),var(--mb-intensity,.1)) 47%,rgba(var(--mb-color,255,255,255),calc(var(--mb-intensity,.1) * 2.2)) 50%,rgba(var(--mb-color,255,255,255),var(--mb-intensity,.1)) 53%,rgba(var(--mb-color,255,255,255),0) 60%);transform:translateX(-100%);will-change:transform;animation:mbSweep calc(var(--mb-dur,12s) / var(--mb-speed,1)) cubic-bezier(.45,.05,.3,1) var(--mb-delay,0s) infinite}
@keyframes mbSweep{0%{transform:translateX(-100%)}32%,100%{transform:translateX(100%)}}

/* scan: a thin line with a soft trail travels down the layer on a loop */
.mb-scan::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--mb-color,238,85,96),0) 70%,rgba(var(--mb-color,238,85,96),calc(var(--mb-intensity,.5) * .25)) 96%,rgba(var(--mb-color,238,85,96),var(--mb-intensity,.5)) 99.6%,rgba(var(--mb-color,238,85,96),0) 100%);transform:translateY(-100%);will-change:transform;animation:mbScan calc(var(--mb-dur,6s) / var(--mb-speed,1)) cubic-bezier(.5,0,.5,1) var(--mb-delay,0s) infinite}
@keyframes mbScan{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* technical grid: fine lines and precision markers drifting in one direction */
.mb-grid::before{content:"";position:absolute;inset:calc(var(--mb-cell,44px) * -4);background-image:var(--mb-markers,none),linear-gradient(rgba(var(--mb-color,255,255,255),var(--mb-intensity,.06)) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--mb-color,255,255,255),var(--mb-intensity,.06)) 1px,transparent 1px);background-size:calc(var(--mb-cell,44px) * 4) calc(var(--mb-cell,44px) * 4),var(--mb-cell,44px) var(--mb-cell,44px),var(--mb-cell,44px) var(--mb-cell,44px);will-change:transform;animation:mbGrid calc(var(--mb-dur,40s) / var(--mb-speed,1)) linear infinite}
@keyframes mbGrid{to{transform:translate(calc(var(--mb-cell,44px) * 4 * var(--mb-gx,1)),calc(var(--mb-cell,44px) * 4 * var(--mb-gy,0)))}}

/* traces: generated SVG circuit lines; a light pulse runs each path, end nodes breathe */
.mb-traces svg,.mb-schematic svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mb-traces .b{fill:none;stroke:rgba(var(--mb-color,238,85,96),calc(var(--mb-intensity,.5) * .32));stroke-width:1}
.mb-traces .p{fill:none;stroke:rgba(var(--mb-color,238,85,96),var(--mb-intensity,.5));stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--seg,12) 300;stroke-dashoffset:var(--seg,12);animation:mbPulse calc(var(--d,4s) / var(--mb-speed,1)) linear var(--dl,0s) infinite}
.mb-traces .n{fill:rgba(var(--mb-color,238,85,96),var(--mb-intensity,.5));transform-box:fill-box;transform-origin:center;animation:mbNode calc(var(--d,4s) / var(--mb-speed,1)) ease-in-out var(--dl,0s) infinite}
@keyframes mbPulse{0%{stroke-dashoffset:var(--seg,12)}62%,100%{stroke-dashoffset:-100}}
@keyframes mbNode{0%,55%{opacity:.35;transform:scale(1)}64%{opacity:1;transform:scale(1.6)}80%,100%{opacity:.35;transform:scale(1)}}

/* schematic: abstract linked-corner hydraulic sketch, fluid dashes flowing between nodes (decorative, not a technical diagram) */
.mb-schematic .l{fill:none;stroke:rgba(var(--mb-color,255,255,255),calc(var(--mb-intensity,.4) * .45));stroke-width:1.2}
.mb-schematic .f{fill:none;stroke:rgba(var(--mb-color2,238,85,96),var(--mb-intensity,.4));stroke-width:2;stroke-dasharray:6 14;animation:mbFlow calc(var(--d,3s) / var(--mb-speed,1)) linear infinite}
.mb-schematic .f.r{animation-direction:reverse}
.mb-schematic .k{fill:none;stroke:rgba(var(--mb-color,255,255,255),calc(var(--mb-intensity,.4) * .7));stroke-width:1.2}
.mb-schematic .v{fill:rgba(var(--mb-color2,238,85,96),calc(var(--mb-intensity,.4) * .9));transform-box:fill-box;transform-origin:center;animation:mbValve calc(6s / var(--mb-speed,1)) ease-in-out infinite}
@keyframes mbFlow{to{stroke-dashoffset:-40}}
@keyframes mbValve{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* slow photographic push: scale breathes around a per-image origin (composes with scroll parallax) */
.mb-kb{transform-origin:var(--kb-origin,50% 50%);animation:mbKb calc(var(--kb-dur,24s) / var(--mb-speed,1)) ease-in-out infinite alternate}
@keyframes mbKb{from{scale:1}to{scale:var(--kb-scale,1.08)}}

/* WebGL flowing light (enquiry); CSS light sources stand in when WebGL is off */
.mb-flow canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* scroll-linked: layers fade and shift with the section's position in the viewport */
@supports (animation-timeline:view()){
  .mb-scroll{animation:mbScrollIn linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .mb-traces svg,.mb-schematic svg{animation:mbScrollShift linear both;animation-timeline:view(block);animation-range:cover 0% cover 100%}
  @keyframes mbScrollIn{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:var(--mb-opacity,1);clip-path:inset(0)}}
  @keyframes mbScrollShift{from{transform:translateY(var(--mb-shift,36px))}to{transform:translateY(calc(var(--mb-shift,36px) * -1))}}
}

@media (prefers-reduced-motion:reduce){
  .mb .t,.mb::before,.mb::after,.mb-kb,.mb-traces .p,.mb-traces .n,.mb-schematic .f,.mb-schematic .v{animation:none!important}
  .mb-traces .p{stroke-dashoffset:-100}
  .mb-scroll,.mb-traces svg,.mb-schematic svg{animation:none!important;opacity:var(--mb-opacity,1);clip-path:none}
}