/* HOGIAF homepage hero scene (network orb + harbour). Loaded only on / and /home-english/. */
/* ---------- Netwerk orb (standalone brain, top layer) ---------- */
.net-orb{position:absolute;top:var(--orb-top);right:clamp(20px,2.4vw,52px);width:max(240px,min(clamp(300px,21vw,410px),calc(var(--orb-room)/1.1)));z-index:0;pointer-events:none;opacity:.97;transform-origin:center;will-change:transform}
.net-orb svg{width:100%;height:auto;display:block;overflow:visible}
.net-orb .orbwrap{animation:orbFloat 9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.net-orb .chip{transition:opacity .22s ease}
@keyframes orbFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(1.2deg)}}
.net-orb .chip.alt rect{fill:#1b2557;stroke:none}
.net-orb .chip.alt text{fill:#f7f2e9}
.net-orb .chip.alt .dot{fill:#ffb377}
@media (max-width:1100px){.net-orb{top:68px;right:clamp(10px,1.6vw,26px);width:min(clamp(300px,34vw,420px),calc(var(--orb-room)/1.1))}.hero-cine .lede{max-width:38ch}}
@media (prefers-reduced-motion:reduce){.net-orb .ne,.net-orb .nn{animation:none!important}.net-orb .chip{display:none}}

/* ---------- De Sluis hero scene ---------- */
.sluis-scene .plane{will-change:transform}
.sluis-scene .pl1{animation:planeLand 26s linear infinite;will-change:transform}
.sluis-scene .pl2{animation:planeUp 34s linear 9s infinite;transform:translate(1020px,64px) rotate(9deg)}
.sluis-scene .pl3{animation:planeClimb 18s linear 13s infinite;opacity:0;transform:translate(690px,132px) rotate(-24deg)}
.sluis-scene .pl4{animation:planeCruise 31s linear -7s infinite;opacity:0;transform:translate(-160px,22px) rotate(0deg)}
.sluis-scene .pl5{animation:planeApproach 28s linear -15s infinite;opacity:0;transform:translate(-150px,-26px) rotate(5deg)}
.sluis-scene .cloud-back,.sluis-scene .cloud-front{transform-box:fill-box;transform-origin:center;will-change:transform}
.sluis-scene .cloud-back{animation:cloudDrift 18s ease-in-out infinite}
.sluis-scene .cloud-front{animation:cloudDriftFront 13s ease-in-out infinite alternate}
@keyframes cloudDrift{0%,100%{transform:translateX(-5px)}50%{transform:translateX(16px)}}
@keyframes cloudDriftFront{from{transform:translateX(4px)}to{transform:translateX(18px)}}
.sluis-scene .wind-rotor{animation:windTurn 13s linear infinite;transform-box:fill-box;transform-origin:center;will-change:transform}
.sluis-scene .windmill-rotor{animation-duration:16s}
.sluis-scene .turbine-a .wind-rotor{animation-duration:15s}
.sluis-scene .turbine-b .wind-rotor{animation-duration:11s;animation-direction:reverse}
.sluis-scene .turbine-c .wind-rotor{animation-duration:17s}
.sluis-scene .turbine-d .wind-rotor{animation-duration:13s;animation-direction:reverse}
.sluis-scene .turbine-e .wind-rotor{animation-duration:18s}
@keyframes windTurn{to{transform:rotate(360deg)}}
@keyframes planeClimb{0%{opacity:0;transform:translate(690px,132px) rotate(-24deg)}10%{opacity:.9}88%{opacity:.9}100%{opacity:0;transform:translate(1080px,-64px) rotate(-24deg)}}
@keyframes planeCruise{0%{opacity:0;transform:translate(-160px,22px) rotate(0deg)}9%{opacity:.8}90%{opacity:.8}100%{opacity:0;transform:translate(1080px,22px) rotate(0deg)}}
@keyframes planeApproach{0%{opacity:0;transform:translate(-150px,-26px) rotate(5deg)}9%{opacity:.86}90%{opacity:.86}100%{opacity:0;transform:translate(1080px,74px) rotate(5deg)}}
@keyframes planeLand{0%{transform:translate(-90px,6px) rotate(3deg)}100%{transform:translate(1010px,58px) rotate(3deg)}}
@keyframes planeUp{0%{transform:translate(1020px,64px) rotate(9deg)}100%{transform:translate(-110px,-4px) rotate(9deg)}}
.sluis-scene .hookbox,.sluis-scene .truckbox{transition:opacity .4s var(--ease)}
.sluis-scene .dockhook,.sluis-scene .hook-cable,.sluis-scene .hook-head{will-change:transform}
.sluis-scene .hook-cable{transform-box:fill-box;transform-origin:center top}
.sluis-scene .truck2{animation:truckHaul 13s linear 6.5s infinite;transform:translate(715px,140px)}
.sluis-scene .parkTruck{will-change:transform}
.sluis-scene .wheel2{transform-box:fill-box;transform-origin:center}
.sluis-scene .parkTruck.go .wheel2{animation:wheelSpin 1s linear infinite}
.sluis-scene .cross{animation:crossBeat 2.8s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes crossBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sluis-scene .wink{animation:winkGlow 4.5s steps(1) infinite}
.sluis-scene .wink.w1{animation-delay:.7s}
.sluis-scene .wink.w3{animation-delay:3.4s}
@keyframes winkGlow{0%,100%{fill:#f7f2e9;opacity:.5}42%,70%{fill:#ffb377;opacity:.95}}
.net-orb .ne{opacity:.3;animation:synapse 7s var(--ease) infinite}
.sluis-scene{position:absolute;right:0;bottom:57px;width:var(--scene-w);z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.sluis-scene svg{width:100%;height:auto;display:block;overflow:visible}
.hero-cine .hero-body,.hero-foot{position:relative;z-index:1}
.sluis-scene .wave{animation:waveDrift 5.5s linear infinite}
.sluis-scene .wB{animation-duration:7s}
.sluis-scene .wC{animation-duration:4.6s}
@keyframes waveDrift{to{transform:translateX(-60px)}}
.sluis-scene .bob{animation:bargeBob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sluis-scene .vessel-direction{transform:scaleX(-1);transform-box:fill-box;transform-origin:center;will-change:transform}
@keyframes bargeBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2.4px) rotate(.5deg)}}
.sluis-scene .flag{animation:flagWave 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
@keyframes flagWave{0%,100%{transform:skewY(0deg)}50%{transform:skewY(-7deg)}}
.sluis-scene .barge,.sluis-scene .lift,.sluis-scene .gate{will-change:transform}
.sluis-scene.filling .bub{animation:bubRise 1.7s ease-out infinite}
.sluis-scene.filling .bub.b1{animation-delay:.4s}
.sluis-scene.filling .bub.b2{animation-delay:.8s}
.sluis-scene.filling .bub.b3{animation-delay:1.2s}
@keyframes bubRise{0%{opacity:0;transform:translateY(0)}20%{opacity:.7}100%{opacity:0;transform:translateY(-46px)}}
.sluis-scene .tick{transition:stroke .4s}
.sluis-scene .tick.lit{stroke:var(--accent)}
.sluis-scene.opening .rip{animation:ripOut 1.1s ease-out}
.sluis-scene.opening .rip.r1{animation-delay:1.5s}
.sluis-scene.opening .rip.r2{animation-delay:1.85s}
.sluis-scene .cargo-load{transition:opacity .6s var(--ease)}
.sluis-scene.unload .cargo-load{opacity:0}
.net-orb .chip rect{fill:#fffdf8;stroke:#e6ddcc;stroke-width:.8}
.net-orb .chip text{font:650 15px 'Instrument Sans',sans-serif;fill:#1b2557;letter-spacing:.02em}
.net-orb .chip .dot{fill:#e46a0a}
@keyframes ripOut{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
.sluis-scene .rip{transform-box:fill-box;transform-origin:center}
.sluis-scene .bird{animation:birdFly 17s linear infinite}
.sluis-scene .bird path{animation:birdFlap .7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes birdFly{0%{transform:translate(-50px,84px)}45%{transform:translate(470px,38px)}100%{transform:translate(1000px,64px)}}
.sluis-scene .truck{animation:truckHaul 9s linear infinite;transform:translate(715px,140px)}
@keyframes truckHaul{0%{transform:translate(715px,140px)}100%{transform:translate(955px,140px)}}
.sluis-scene .van{animation:vanRun 12s linear infinite;animation-delay:4s;transform:translate(955px,140px)}
@keyframes vanRun{0%{transform:translate(955px,140px)}100%{transform:translate(720px,140px)}}
.sluis-scene .wheel{animation:wheelSpin 1s linear infinite;transform-box:fill-box;transform-origin:center}
.sluis-scene .van .wheel{animation-direction:reverse}
@keyframes wheelSpin{to{transform:rotate(360deg)}}

.net-orb .hub{animation:nodePulse 3.2s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes birdFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.net-orb .ne.e0{animation-delay:0.0s}
.net-orb .ne.e1{animation-delay:0.42s}
.net-orb .ne.e2{animation-delay:0.84s}
.net-orb .ne.e3{animation-delay:1.26s}
.net-orb .ne.e4{animation-delay:1.68s}
.net-orb .ne.e5{animation-delay:2.1s}
.net-orb .ne.e6{animation-delay:2.52s}
.net-orb .ne.e7{animation-delay:2.94s}
.net-orb .ne.e8{animation-delay:3.36s}
.net-orb .ne.e9{animation-delay:3.78s}
.net-orb .ne.e10{animation-delay:4.2s}
.net-orb .ne.e11{animation-delay:4.62s}
.net-orb .ne.e12{animation-delay:5.04s}
.net-orb .ne.e13{animation-delay:5.46s}
.net-orb .ne.e14{animation-delay:5.88s}
.net-orb .ne.e15{animation-delay:6.3s}
.net-orb .ne.e16{animation-delay:6.72s}
.net-orb .ne.e17{animation-delay:7.14s}
.net-orb .ne.e18{animation-delay:7.56s}
.net-orb .ne.e19{animation-delay:7.98s}
.net-orb .ne.e20{animation-delay:8.4s}
.net-orb .ne.e21{animation-delay:8.82s}
@keyframes synapse{0%,100%{opacity:.3}12%{opacity:.75}30%{opacity:.75}46%{opacity:.3}}
@keyframes nodePulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.5);opacity:1}}
/* gate slam: barge rocks, mini ripples at the gate's foot */
.sluis-scene.slam .pitch{animation:bargeRock 1.1s var(--ease)}
@keyframes bargeRock{0%{transform:rotate(0)}22%{transform:rotate(1.1deg)}52%{transform:rotate(-.55deg)}78%{transform:rotate(.25deg)}100%{transform:rotate(0)}}
.sluis-scene .gaterip{transform-box:fill-box;transform-origin:center}
.sluis-scene.slam .gaterip{animation:ripOut .9s ease-out}
.sluis-scene.slam .gaterip.g1{animation-delay:.18s}
.sluis-scene.filling .bob{animation-duration:2.2s}
.sluis-scene .pitch{transform-box:fill-box;transform-origin:70% 60%}
.sluis-scene ~ .scroll-cue{display:none}
@media (max-width:1100px){.sluis-scene{width:min(480px,50vw)}}
/* wide screens: the scene's left edge sits under the lede, so planes fade out before they reach the copy */
@media (min-width:1101px){.sluis-scene{-webkit-mask-image:linear-gradient(90deg,transparent 200px,#000 320px);mask-image:linear-gradient(90deg,transparent 200px,#000 320px)}}
@media (max-width:820px){
  .hero-cine{min-height:auto;justify-content:flex-start;padding-top:112px}
  .hero-cine .hero-body{padding-bottom:8px}
  .net-orb{position:relative;top:auto;right:auto;width:clamp(300px,90vw,360px);margin:0 auto 18px;z-index:2;opacity:.96;transform:none!important}
  .sluis-scene{position:relative;right:auto;bottom:auto;width:118%;margin:0 -9%;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 96%,transparent)}
  .hero-foot{margin-top:0}
  .hero-foot-inner{align-items:stretch;flex-direction:column;gap:7px;padding-block:13px 17px}
  .hero-foot .cap{width:100%;font-size:.68rem;line-height:1.35}
  .hero-foot .mq{width:100%;flex:none}
  .hero-foot .mq-track span{gap:14px;padding-right:14px;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .sluis-scene .wave,.sluis-scene .bob,.sluis-scene .flag,.sluis-scene .bird,.sluis-scene .bub,.sluis-scene .cross,.sluis-scene .wink,.sluis-scene .truck,.sluis-scene .truck2,.sluis-scene .van,.sluis-scene .wheel,.sluis-scene .plane,.sluis-scene .wind-rotor,.sluis-scene .cloud-back,.sluis-scene .cloud-front{animation:none!important}
}