/* Sector motion proposals — "Building the next layer of energy infrastructure"
   Lightweight CSS/SVG overlays registered to the photographs. No sparks, no invented equipment.
   Static photograph is the fallback (no JS, prefers-reduced-motion); animation pauses off-screen. */
html body .future-flow article .fm{position:absolute!important;inset:0 0 auto 0;height:var(--fh);z-index:0!important;overflow:hidden;container-type:size;pointer-events:none;transition:transform .8s ease;transform:scale(1.01)}
html body .future-flow article:hover .fm{transform:scale(1.04)}
html body .future-flow article .fm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,24,0) 62%,rgba(8,45,45,.55) 100%);z-index:3}
.fm-i{position:absolute;--r:2;width:max(100cqw,calc(100cqh * var(--r)));height:max(100cqh,calc(100cqw / var(--r)));left:calc((100cqw - max(100cqw,calc(100cqh * var(--r)))) * .5);top:calc((100cqh - max(100cqh,calc(100cqw / var(--r)))) * .62)}
.fm-i.ev{--r:1.7778}
.fm-i svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fm-i .ly{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.fm.paused *{animation-play-state:paused!important}
.fm .scr{mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){html body .future-flow article .fm{display:none!important}}

/* EV — light travelling along the canopy LED runs; charger display breathing */
.fm .ev-run{fill:none;stroke:#ffe6b0;stroke-width:6;stroke-linecap:round;filter:url(#fm-b2);stroke-dasharray:36 164;opacity:.95;animation:fm-run 4.8s linear infinite}
@keyframes fm-run{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.fm .ev-base{fill:none;stroke:#ffd98f;stroke-width:5;stroke-linecap:round;filter:url(#fm-b3);animation:fm-breath 4.8s ease-in-out infinite}
@keyframes fm-breath{0%,100%{opacity:.18}50%{opacity:.42}}
.fm .ev-chg{fill:#b9f46a;filter:url(#fm-b6);animation:fm-chg 3.4s ease-in-out infinite}
@keyframes fm-chg{0%,100%{opacity:.12}50%{opacity:.7}}

/* Data centre — power-flow pulse from line to substation to hall; slow facade light sweep */
.fm .dc-flow{fill:none;stroke:#ffd596;stroke-width:4;stroke-linecap:round;filter:url(#fm-b2);stroke-dasharray:70 930;animation:fm-flow 9s linear infinite;opacity:.7}
@keyframes fm-flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.fm .dc-sub{fill:url(#fm-gsub);animation:fm-sub 5s ease-in-out infinite}
@keyframes fm-sub{0%,100%{opacity:0}50%{opacity:.55}}
.fm .dc-sweep{animation:fm-sweep 11s ease-in-out infinite}
@keyframes fm-sweep{0%{transform:translateX(-380px)}100%{transform:translateX(1560px)}}

/* PEM hydrogen — soft light along existing pipework; gentle cloud-light drift in the sky */
.fm .pem-run{fill:none;stroke:#e4f5ff;stroke-width:7;stroke-linecap:round;filter:url(#fm-b2);stroke-dasharray:70 530;opacity:1;animation:fm-pem 7s linear infinite}
@keyframes fm-pem{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.fm .pem-glow{fill:url(#fm-gpem);animation:fm-pemg 7s ease-in-out infinite}
@keyframes fm-pemg{0%,100%{opacity:0}50%{opacity:.5}}
.fm .sky{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,transparent 42%),linear-gradient(90deg,transparent 27%,#000 38%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0,#000 30%,transparent 42%),linear-gradient(90deg,transparent 27%,#000 38%);mask-composite:intersect;animation:fm-sky 46s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes fm-sky{from{transform:translateX(-1.2%) scale(1.03)}to{transform:translateX(1.2%) scale(1.03)}}
.fm .skylight{background:linear-gradient(100deg,transparent 35%,rgba(255,235,200,.20) 50%,transparent 65%);background-size:260% 100%;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,transparent 42%),linear-gradient(90deg,transparent 27%,#000 38%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0,#000 30%,transparent 42%),linear-gradient(90deg,transparent 27%,#000 38%);mask-composite:intersect;mix-blend-mode:screen;animation:fm-skyl 26s ease-in-out infinite alternate}
@keyframes fm-skyl{from{background-position:100% 0}to{background-position:0 0}}

/* Agrivoltaics — slow crop sway, sunlight drifting over the panels, low-sun breathing */
.fm .crop-a,.fm .crop-b{transform-origin:50% 100%}
.fm .crop-a{-webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 60%),linear-gradient(90deg,transparent 28%,#000 36%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 50%,#000 60%),linear-gradient(90deg,transparent 28%,#000 36%);mask-composite:intersect;animation:fm-sway-a 7s ease-in-out infinite alternate}
.fm .crop-b{-webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 60%),linear-gradient(90deg,#000 24%,transparent 34%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 50%,#000 60%),linear-gradient(90deg,#000 24%,transparent 34%);mask-composite:intersect;animation:fm-sway-b 9s ease-in-out infinite alternate}
@keyframes fm-sway-a{from{transform:translateX(-.18%) skewX(.35deg) scale(1.012)}to{transform:translateX(.18%) skewX(-.35deg) scale(1.012)}}
@keyframes fm-sway-b{from{transform:translateX(.2%) skewX(-.5deg) scale(1.012)}to{transform:translateX(-.2%) skewX(.5deg) scale(1.012)}}
.fm .panel-light{-webkit-mask-image:radial-gradient(ellipse 52% 36% at 76% 20%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 52% 36% at 76% 20%,#000 20%,transparent 100%);background:linear-gradient(105deg,transparent 40%,rgba(255,244,214,.26) 50%,transparent 60%);background-size:300% 100%;mix-blend-mode:screen;animation:fm-panel 14s ease-in-out infinite alternate}
@keyframes fm-panel{from{background-position:100% 0}to{background-position:0 0}}
.fm .sun-glow{fill:url(#fm-gsun);animation:fm-sun 9s ease-in-out infinite alternate}
@keyframes fm-sun{from{opacity:.2}to{opacity:.65}}
html body .future-flow article:before{background-image:var(--future-image)!important}
html body .future-flow article .fm::after{background:linear-gradient(180deg,rgba(2,22,24,0) 62%,rgba(8,45,45,.55) 100%)}

/* v2 — stronger, still photographic: no invented equipment */
.fm .dc-flow{stroke-width:7;stroke-dasharray:130 370;opacity:.95;animation-duration:6s}
.fm .dc-sub{animation-duration:3.2s}
@keyframes fm-sub{0%,100%{opacity:.05}50%{opacity:.95}}
.fm .dc-sweep{fill:rgba(255,226,170,.42);animation-duration:7s}
.fm .pem-run{stroke-width:10;stroke-dasharray:120 480;animation-duration:4.6s}
@keyframes fm-pemg{0%,100%{opacity:.05}50%{opacity:.9}}
.fm .pem-glow{animation-duration:4.6s}
.fm .sky{animation-duration:28s}
@keyframes fm-sky{from{transform:translateX(-2.6%) scale(1.05)}to{transform:translateX(2.6%) scale(1.05)}}
.fm .skylight{background:linear-gradient(100deg,transparent 30%,rgba(255,235,200,.38) 50%,transparent 70%);background-size:260% 100%;animation-duration:16s}
.fm .crop-a{animation-duration:4.2s}
.fm .crop-b{animation-duration:5.4s}
@keyframes fm-sway-a{from{transform:translateX(-.55%) skewX(1deg) scale(1.02)}to{transform:translateX(.55%) skewX(-1deg) scale(1.02)}}
@keyframes fm-sway-b{from{transform:translateX(.6%) skewX(-1.3deg) scale(1.02)}to{transform:translateX(-.6%) skewX(1.3deg) scale(1.02)}}
.fm .panel-light{background:linear-gradient(105deg,transparent 38%,rgba(255,244,214,.5) 50%,transparent 62%);background-size:300% 100%;animation-duration:8s}
@keyframes fm-sun{from{opacity:.25}to{opacity:.95}}
.fm .sun-glow{animation-duration:5s}

/* EV Charging — supplied Solar Wifi Eco Bin clip (muted loop); poster is the static fallback */
.fm-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
@media (prefers-reduced-motion:reduce){html body .future-flow article .fm.fm-video{display:block!important}}