/* Een leesbare 2D-binnenkomst: deur open, robot vooruit, beeld erachteraan. */
.strip-overgang{inset:0;background:#26261fe8;transform:none;opacity:0;visibility:hidden;overflow:hidden;--drone-x:23vw;--drone-y:70vh}
.strip-vertrek .strip-overgang{visibility:visible;opacity:1;animation:deur-verschijn .14s ease-out both}
.deur-kader{position:absolute;left:50%;top:48%;width:min(500px,78vw);height:min(610px,74dvh);transform:translate(-50%,-50%);border:12px solid #b89155;border-radius:150px 150px 4px 4px;box-shadow:0 0 0 4px #302b27,0 0 0 20px #544336,0 18px 0 22px #302b27;overflow:hidden;background:#2c2922;isolation:isolate}
.deur-kamer{position:absolute;inset:0;background-position:center;background-size:cover;transform:scale(1.05);filter:brightness(.75)}
.deur-paneel{position:absolute;top:0;bottom:0;width:50.3%;background:repeating-linear-gradient(90deg,transparent 0 42px,#3a302947 43px 45px),linear-gradient(90deg,#927044,#c39a5c 45%,#9d7849);border:3px solid #3c3229;box-shadow:inset 0 0 0 9px #b28e5877;transform:scaleX(1);z-index:2}
.deur-paneel::before{content:'';position:absolute;inset:18% 14% 22%;border:3px solid #5a432c;border-radius:70px 70px 3px 3px;box-shadow:inset 0 0 0 6px #d7b57766}
.deur-paneel::after{content:'';position:absolute;top:53%;width:20px;height:35px;border:4px solid #503d25;border-radius:50%;background:#d4b261;box-shadow:2px 3px 0 #3a2e24}
.deur-links{left:0;transform-origin:left center}.deur-rechts{right:0;transform-origin:right center}.deur-links::after{right:12px}.deur-rechts::after{left:12px}
.deur-paneel i{position:absolute;left:0;right:0;bottom:15%;height:14px;background:#4b4c40;border:3px solid #302b27;box-shadow:0 -185px 0 -1px #4b4c40}
.deur-bovendorpel{position:absolute;left:0;right:0;top:0;height:14px;background:#d9b778;border-bottom:3px solid #302b27;z-index:3}
.deur-drone{position:absolute;left:0;top:0;width:clamp(120px,16vw,210px);height:auto;transform:translate(calc(var(--drone-x) - 50%),calc(var(--drone-y) - 50%));z-index:4;filter:drop-shadow(0 9px 5px #17160e66)}
.deur-drone svg{width:100%;height:auto;display:block}.deur-drone .drone-schaduw{display:none}.deur-drone .drone-vlucht{animation:none}.deur-drone .drone-rotor{animation:drone-rotor .12s ease-in-out infinite alternate}
.deur-bijschrift{position:absolute;left:50%;bottom:max(20px,4dvh);transform:translateX(-50%);margin:0;padding:10px 18px;background:#fff8e8;color:#302b27;border:2px solid #302b27;box-shadow:3px 3px 0 #302b2755;font:700 .85rem/1.4 system-ui;text-align:center;max-width:calc(100vw - 32px);width:max-content}
.strip-vertrek .deur-links,.strip-vertrek .deur-rechts{animation:deur-open .65s .18s cubic-bezier(.3,0,.3,1) both}
.strip-vertrek .deur-drone{animation:deur-vlucht 1.6s ease-in-out both}
.strip-vertrek .deur-kader{animation:deur-binnen 1.6s cubic-bezier(.4,0,.3,1) both}
.strip-vertrek .deur-kamer{animation:deur-kamerlicht 1.6s ease-out both}
.strip-vertrek .deur-bijschrift{animation:deur-tekst 1.6s linear both}
@keyframes deur-verschijn{from{opacity:0}to{opacity:1}}
@keyframes deur-open{to{transform:scaleX(.035)}}
@keyframes deur-vlucht{0%,14%{transform:translate(calc(var(--drone-x) - 50%),calc(var(--drone-y) - 50%)) scale(1);opacity:1}42%{transform:translate(calc(44vw - 50%),calc(55dvh - 50%)) scale(.8);opacity:1}75%{transform:translate(calc(50vw - 50%),calc(44dvh - 50%)) scale(.22);opacity:1}90%,100%{transform:translate(calc(50vw - 50%),calc(43dvh - 50%)) scale(.07);opacity:0}}
@keyframes deur-binnen{0%,64%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(5)}}
@keyframes deur-kamerlicht{0%,25%{filter:brightness(.6)}65%,100%{filter:brightness(1)}}
@keyframes deur-tekst{0%,65%{opacity:1}90%,100%{opacity:0}}
/* Het decor achter de deur blijft op de bestemmingspagina de hele omgeving. */
.inhoudpagina{--kamer-beeld:url('/beelden/modern/archief.webp')}
.inhoudpagina:has([data-decor=ontwerpstudio]){--kamer-beeld:url('/beelden/kamers/werkplaats.webp')}
.inhoudpagina:has([data-decor=forum]){--kamer-beeld:url('/beelden/modern/forum.webp')}
.inhoudpagina:has([data-decor=denktank]){--kamer-beeld:url('/beelden/modern/denktank.webp')}
.inhoudpagina:has([data-decor=robotlab]){--kamer-beeld:url('/beelden/modern/robotlab.webp')}
.inhoudpagina:has([data-decor=beheercentrum]){--kamer-beeld:url('/beelden/modern/beheercentrum.webp')}
.inhoudpagina:has([data-decor=centrale]){--kamer-beeld:url('/beelden/modern/centrale.webp')}
body.inhoudpagina::before{background-image:linear-gradient(#29251e25,#29251e55),var(--kamer-beeld);background-position:center;background-size:cover;background-repeat:no-repeat}
@media(max-width:760px){.deur-kader{border-width:9px;border-radius:100px 100px 3px 3px;width:78vw;height:65dvh;top:45%}.deur-bijschrift{font-size:.76rem;bottom:7dvh}.deur-drone{width:145px}}
@media(max-height:500px){.deur-kader{height:68dvh;width:40vw;top:43%}.deur-bijschrift{bottom:10px;font-size:.7rem}.deur-drone{width:110px}}
.beweging-uit .strip-overgang{visibility:hidden;animation:none!important}.beweging-uit .strip-overgang *{animation:none!important}
/* De gevel en deurbladen komen uit dezelfde illustratie als de aangeklikte ingang. */
.strip-overgang[data-doorgang=getekend] .deur-kader{width:min(640px,88vw,calc(72dvh * var(--gevel-verhouding)));height:auto;aspect-ratio:var(--gevel-verhouding);border:0;border-radius:0;box-shadow:none;overflow:visible;background:transparent}
.deur-gevel{position:absolute;inset:0;z-index:3;pointer-events:none}
.deur-gevel svg,.deur-paneel svg{display:block;width:100%;height:100%}
.strip-overgang[data-doorgang=getekend] .deur-kamer{left:var(--opening-x);top:var(--opening-y);width:var(--opening-w);height:var(--opening-h);inset-inline-end:auto;bottom:auto;transform:none}
.strip-overgang[data-doorgang=getekend] .deur-paneel{top:var(--opening-y);height:var(--opening-h);width:calc(var(--opening-w) / 2 + .1%);bottom:auto;border:0;background:none;box-shadow:none}
.strip-overgang[data-doorgang=getekend] .deur-links{left:var(--opening-x)}
.strip-overgang[data-doorgang=getekend] .deur-rechts{left:calc(var(--opening-x) + var(--opening-w) / 2);right:auto}
.strip-overgang[data-doorgang=getekend] .deur-paneel::before,.strip-overgang[data-doorgang=getekend] .deur-paneel::after,.strip-overgang[data-doorgang=getekend] .deur-bovendorpel{display:none}
.strip-overgang[data-deur-open=true] .deur-paneel{display:none}
.strip-overgang[data-doorgang=overvloeiing] .deur-kader{width:100vw;height:100dvh;border:0;border-radius:0;box-shadow:none;top:50%}
.strip-overgang[data-doorgang=overvloeiing] .deur-paneel,.strip-overgang[data-doorgang=overvloeiing] .deur-gevel,.strip-overgang[data-doorgang=overvloeiing] .deur-bovendorpel{display:none}
.strip-vertrek .strip-overgang[data-doorgang=overvloeiing] .deur-kader{animation:deur-overvloeiing 1.6s ease both}
@keyframes deur-overvloeiing{0%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}50%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.inhoudpagina:has([data-decor=archief]){--kamer-beeld:url('/beelden/kamers/archief-v2.webp')}
.strip-vertrek .strip-overgang[data-doorgang=ruimte3d]{visibility:hidden;opacity:0;animation:none}
.kamer[data-overgang] .kamer-deuren,.kamer[data-overgang] .kamer-bediening,.kamer[data-overgang] .kamer-status{opacity:0;pointer-events:none}
.kamer[data-overgang] .kamer-titel{opacity:0}
.deur-vouw{position:absolute;top:0;bottom:0;width:50%;transform-origin:left center}
.strip-vertrek [data-deur-vouw=true] .deur-paneel{animation:none}
.strip-vertrek [data-deur-vouw=true] .deur-links .deur-vouw:first-child{animation:bus-vouw-links .8s .2s ease-in-out both}
.strip-vertrek [data-deur-vouw=true] .deur-links .deur-vouw:last-child{animation:bus-vouw-links-binnen .8s .2s ease-in-out both}
.strip-vertrek [data-deur-vouw=true] .deur-rechts .deur-vouw{transform-origin:right center}
.strip-vertrek [data-deur-vouw=true] .deur-rechts .deur-vouw:first-child{animation:bus-vouw-rechts-binnen .8s .2s ease-in-out both}
.strip-vertrek [data-deur-vouw=true] .deur-rechts .deur-vouw:last-child{animation:bus-vouw-links .8s .2s ease-in-out both}
@keyframes bus-vouw-links{to{transform:scaleX(.08)}}
@keyframes bus-vouw-links-binnen{to{transform:translateX(-91%) scaleX(.08);filter:brightness(.6)}}
@keyframes bus-vouw-rechts-binnen{to{transform:translateX(91%) scaleX(.08);filter:brightness(.6)}}
@media(prefers-reduced-motion:reduce){.strip-overgang{visibility:hidden;animation:none!important}.strip-overgang *{animation:none!important}}