/* Drie bewoonde achtergronden, met een vaste rustige bediening erboven. */
html{--hero-beeld:url('/assets/hero/hero-stad-1600.webp')}
html[data-hero-scene=stadsleven]{--hero-beeld:url('/assets/hero/hero-stadsleven-1600.webp')}
html[data-hero-scene=woonwereld]{--hero-beeld:url('/assets/hero/hero-woonwereld-1600.webp')}
[data-hero-sfeer]{position:relative;isolation:isolate;overflow:hidden;background:#0b1f27}
.hero-wereld{contain:layout paint;transition:opacity 220ms ease}
.hero-stad{position:absolute;inset:-12px;background-image:var(--hero-beeld);background-size:cover;background-position:center;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0)}
html:not([data-hero-scene]) .hero-stad{background-image:none}
.hero-ramen,.hero-vogels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-raam{display:none;opacity:0;fill:#ffd89a;filter:drop-shadow(0 0 10px #ffd89a);transition:opacity 240ms ease}
html:not([data-hero-scene]) .hero-raam-stad,html[data-hero-scene=stad] .hero-raam-stad,html[data-hero-scene=stadsleven] .hero-raam-stadsleven,html[data-hero-scene=woonwereld] .hero-raam-woonwereld{display:block}
.hero[data-hero-ready=true]:has(.toneel .raam-aan) .hero-raam{opacity:.5}
.hero-raam-klein{display:none}
.hero-vogels{opacity:0}
.hero-vlucht{animation:hero-vlucht 32s linear infinite;animation-play-state:paused;opacity:0}
.hero-vlucht path{fill:none;stroke:#efd5aa;stroke-width:1.8;stroke-linecap:round;animation:hero-vleugel 1400ms ease-in-out infinite alternate;animation-play-state:paused;transform-origin:center;transform-box:fill-box}
.hero-vlucht path:nth-child(2){animation-delay:-500ms;opacity:.7}.hero-vlucht path:nth-child(3){animation-delay:-900ms;opacity:.8}
.hero[data-hero-beweging=aan] .hero-vogels{opacity:1}
.hero[data-hero-beweging=aan] .hero-vlucht,.hero[data-hero-beweging=aan] .hero-vlucht path{animation-play-state:running}
html[data-hero-scene=stadsleven] .hero-vogels{display:none}
html[data-ervaring] .hero[data-hero-sfeer]>.toneel{opacity:.68}
html[data-ervaring] .hero[data-hero-ready=true]>.toneel{visibility:hidden}
.hero[data-hero-ready=true]>.toneel *{animation:none!important}
.hero[data-hero-ready=false] .hero-wereld{opacity:0}
.hero[data-hero-sfeer]::after,[data-hero-sfeer=pas]::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,24,33,.94) 0%,rgba(7,24,33,.86) 38%,rgba(7,24,33,.72) 68%,rgba(7,24,33,.22) 84%,rgba(7,24,33,.08) 100%)}
[data-hero-sfeer=pas]>.wrap{position:relative;z-index:2}
.hero[data-hero-sfeer] .kb-home figcaption{position:relative;isolation:isolate}
.hero[data-hero-sfeer] .kb-home figcaption::before{content:"";position:absolute;inset:-5px -8px;z-index:-1;background:rgba(7,24,33,.72);border-radius:8px;pointer-events:none}
.hero-rust{position:absolute;right:14px;bottom:12px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:10px;color:#e9f1f4;background:#0b1f27e6;border:1px solid #84a7ae;border-radius:50%;cursor:pointer;touch-action:manipulation}
.hero-rust svg{width:19px;height:19px;fill:currentColor}.hero-rust .hero-speel{display:none}.hero-rust[data-pauze=true] .hero-pauze{display:none}.hero-rust[data-pauze=true] .hero-speel{display:block}
.hero-rust:hover{background:#12384a}.hero-rust:focus-visible{outline:3px solid #00d8ba;outline-offset:3px}
.hero[data-hero-pauze=aan] .kb-home *{animation-play-state:paused!important}
.hero[data-hero-pauze=aan]>.toneel *,.hero[data-hero-beweging=uit]>.toneel *{animation-play-state:paused!important}
.hero[data-hero-beweging=uit]>.toneel [data-speed]{transform:none!important}
@keyframes hero-vlucht{0%{opacity:0;transform:translate(-70px,0)}2%{opacity:.85}16%{opacity:.85;transform:translate(570px,8px)}18%,100%{opacity:0;transform:translate(650px,10px)}}
@keyframes hero-vleugel{from{transform:scaleY(.7)}to{transform:scaleY(1.12)}}
@media(max-width:900px){.hero-vogels{display:none}}
@media(max-width:720px){
 html{--hero-beeld:url('/assets/hero/hero-stad-768.webp')}
 html[data-hero-scene=stadsleven]{--hero-beeld:url('/assets/hero/hero-stadsleven-768.webp')}
 html[data-hero-scene=woonwereld]{--hero-beeld:url('/assets/hero/hero-woonwereld-768.webp')}
 .hero-stad{background-position:right center}
 .hero-raam-groot{display:none}.hero-raam-klein{display:block}
 .hero[data-hero-sfeer]::after,[data-hero-sfeer=pas]::after{background:linear-gradient(180deg,rgba(7,24,33,.86) 0%,rgba(7,24,33,.84) 65%,rgba(7,24,33,.72) 80%,rgba(7,24,33,.32) 100%)}
 .hero-rust{right:12px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){.hero-stad,.hero[data-hero-sfeer]>.toneel [data-speed]{transform:none!important}.hero-vogels,.hero-rust{display:none!important}.hero-wereld,.hero-raam{transition:none!important}.hero-vlucht,.hero-vlucht path{animation:none!important}}