/* Nieuwe eindbazen: bewegingen. Hoort bij eindbaas-bazen.js (alleen demo). Toestanden komen van de site: .rage .hit .bite .dead (+ .sleep op de tegel). */
.wx-monw.bz{display:block;position:relative}
.wx-monw.bz svg.boss{display:block;width:100%;height:100%;overflow:visible}
.bz .body{transform-box:fill-box;transform-origin:50% 100%;animation:bzBreath 3s ease-in-out infinite}
.bz .glow{transform-box:fill-box;transform-origin:center;animation:bzPulse 2.4s ease-in-out infinite}
.bz .float{animation:bzBob 3.6s ease-in-out infinite}.bz .float:nth-of-type(2n){animation-delay:-1.2s}.bz .float:nth-of-type(3n){animation-delay:-2.2s}
.bz .spin{transform-box:fill-box;transform-origin:center;animation:bzSpin 7s linear infinite}.bz .spin.rev{animation-direction:reverse;animation-duration:11s}
.bz .eyelid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .35s}
.bz .arm-l,.bz .arm-r,.bz .wing-l,.bz .wing-r,.bz .tent{transform-box:fill-box}
.bz .arm-l{transform-origin:90% 10%;animation:bzArmL 3s ease-in-out infinite}.bz .arm-r{transform-origin:10% 10%;animation:bzArmR 3s ease-in-out infinite}
.bz .wing-l{transform-origin:100% 40%;animation:bzWingL 2.6s ease-in-out infinite}.bz .wing-r{transform-origin:0 40%;animation:bzWingR 2.6s ease-in-out infinite}
.bz .tent{transform-origin:50% 0;animation:bzSway 3.2s ease-in-out infinite}.bz .tent:nth-of-type(2){animation-delay:-.5s}.bz .tent:nth-of-type(3){animation-delay:-1s}.bz .tent:nth-of-type(4){animation-delay:-1.5s}.bz .tent:nth-of-type(5){animation-delay:-2s}.bz .tent:nth-of-type(6){animation-delay:-2.5s}
.bz .ember{animation:bzRise 3.2s ease-in infinite}.bz .ember:nth-of-type(2n){animation-delay:-1.1s;animation-duration:2.6s}.bz .ember:nth-of-type(3n){animation-delay:-2s;animation-duration:3.8s}
.bz .bolt{opacity:0}
.wx-monw.bz.rage svg.boss{animation:bzShiver .22s linear infinite;filter:saturate(1.3) drop-shadow(0 0 22px color-mix(in srgb,var(--glow) 70%,#f33))}
.wx-monw.bz.rage .body{animation-duration:1.1s}.wx-monw.bz.rage .glow{animation-duration:.7s}.wx-monw.bz.rage .spin{animation-duration:2.4s}
.wx-monw.bz.hit svg.boss{animation:bzHit .5s both}
.wx-monw.bz.bite svg.boss{animation:bzAttack 1.1s cubic-bezier(.3,.1,.2,1) both}.wx-monw.bz.bite .arm-l{animation:bzSlamL 1.1s both}.wx-monw.bz.bite .arm-r{animation:bzSlamR 1.1s both}.wx-monw.bz.bite .bolt{animation:bzBolt 1.1s both}
.wx-monw.bz.sleep svg.boss{filter:brightness(.72) saturate(.7)}.wx-monw.bz.sleep .eyelid{transform:scaleY(1)}.wx-monw.bz.sleep *{animation-play-state:paused}.wx-monw.bz.sleep .body{animation:bzBreath 5s ease-in-out infinite;animation-play-state:running}
.wx-monw.bz.dead svg.boss{animation:bzDead 1.6s cubic-bezier(.4,0,.3,1) both;filter:grayscale(.85) brightness(.6);transform-origin:50% 92%}.wx-monw.bz.dead .eyelid{transform:scaleY(1)}.wx-monw.bz.dead *{animation-play-state:paused}
@keyframes bzBreath{50%{transform:translateY(-3px) scale(1.02,1.035)}}
@keyframes bzPulse{50%{opacity:.5;transform:scale(.82)}}
@keyframes bzBob{50%{transform:translateY(-12px)}}
@keyframes bzSpin{to{transform:rotate(360deg)}}
@keyframes bzArmL{50%{transform:rotate(5deg)}}@keyframes bzArmR{50%{transform:rotate(-5deg)}}
@keyframes bzWingL{50%{transform:rotate(-11deg)}}@keyframes bzWingR{50%{transform:rotate(11deg)}}
@keyframes bzSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@keyframes bzRise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
@keyframes bzShiver{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes bzHit{0%{transform:none}20%{transform:translateX(-16px) rotate(-4deg);filter:brightness(2.2)}50%{transform:translateX(12px) rotate(3deg)}75%{transform:translateX(-6px)}100%{transform:none}}
@keyframes bzAttack{0%{transform:scale(1)}22%{transform:translateY(6px) scale(.93,.9)}45%{transform:translateY(-4px) scale(1.2,1.22)}70%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes bzSlamL{0%,20%{transform:rotate(0)}45%{transform:rotate(-38deg)}100%{transform:rotate(0)}}@keyframes bzSlamR{0%,20%{transform:rotate(0)}45%{transform:rotate(38deg)}100%{transform:rotate(0)}}
@keyframes bzBolt{0%,35%{opacity:0}45%,60%{opacity:1}100%{opacity:0}}
@keyframes bzDead{0%{transform:none}30%{transform:rotate(-4deg)}100%{transform:translateY(10%) rotate(-12deg) scale(.88)}}
.bz-pick{position:fixed;left:12px;bottom:12px;z-index:9999;font:600 13px system-ui,sans-serif}
.bz-pick button{font:inherit;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #36557a;background:#17324f;color:#fff;cursor:pointer;opacity:.85}
.bz-pick button:hover,.bz-pick button:focus-visible{opacity:1}.bz-pick button[aria-pressed=true]{background:#fff;color:#0f2238}
.bz-list{position:absolute;left:0;bottom:44px;display:flex;flex-direction:column;gap:6px;background:#0f2238;border-radius:14px;padding:8px;box-shadow:0 8px 24px rgba(8,21,35,.4)}
.bz-list button{border-radius:10px;text-align:left}.bz-list[hidden]{display:none}
html.wx-fs .bz-pick{display:none}
@media (prefers-reduced-motion:reduce){.wx-monw.bz *,.wx-monw.bz svg.boss{animation:none!important}}
@media (max-width:900px){.bz-pick{display:none}}
/* De oude site draait de kleur van het ene oude monster per level om; de nieuwe bazen hebben al hun eigen kleuren. */
.wx-board[data-shape] .wx-monw.bz,.wx-ahead[data-shape] .wx-monw.bz{filter:none}