.motion-example[data-hero=goblin] .hero-art{background-image:none!important}
.motion-example .motion-scene{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.motion-example[data-hero=goblin] .motion-scene{display:block}
.motion-stage{position:absolute;isolation:isolate}
.motion-stage>img,.goblin-character img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;user-select:none}
.motion-stage .goblin-character{position:absolute;inset:0;z-index:2;transform-origin:59% 75%;animation:goblin-breathe 6s ease-in-out infinite alternate;will-change:transform}
.goblin-body{mask:url("/assets/redesign/assets/goblin-body-mask.svg") center/100% 100% no-repeat}
.goblin-head-pivot{position:absolute;inset:0;transform-origin:65.8% 44%;animation:goblin-look 8.4s ease-in-out infinite;will-change:transform}
.goblin-head{mask:url("/assets/redesign/assets/goblin-head-mask.svg") center/100% 100% no-repeat}
.goblin-ear{mask:url("/assets/redesign/assets/goblin-ear-mask.svg") center/100% 100% no-repeat;transform-origin:63.7% 36.7%;animation:goblin-ear-twitch 6.8s ease-in-out infinite;will-change:transform}
.motion-stage .chest-lid{z-index:1;mask:url("/assets/redesign/assets/chest-grip-mask.svg") center/100% 100% no-repeat;transform-origin:90% 56%;animation:chest-open 6s ease-in-out infinite alternate;will-change:transform}
.treasure-glow{position:absolute;left:63%;top:30%;width:34%;height:39%;z-index:3;background:radial-gradient(ellipse,#ffe49cad,#ffd27165 24%,#f4ae3a30 47%,transparent 71%);mix-blend-mode:screen;animation:treasure-light 6s ease-in-out infinite alternate;pointer-events:none}
.treasure-motes{position:absolute;inset:0;z-index:3}
/* Soft shafts remain registered to the chest as the artwork scales on mobile. */
.treasure-rays{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;filter:blur(7px)}
.treasure-rays i{position:absolute;left:80%;bottom:44%;width:12%;height:40%;margin-left:-6%;transform-origin:50% 100%;clip-path:polygon(0 0,100% 0,53% 100%,47% 100%);background:linear-gradient(to top,#ffdd8d99 0%,#ffe5a880 18%,#ffecc542 55%,transparent 100%);opacity:.34;animation:chest-rays 6s ease-in-out infinite alternate;--angle:-22deg;--sway:-9deg}
.treasure-rays i:nth-child(2){width:8%;margin-left:-4%;height:47%;--angle:-4deg;--sway:6deg}
.treasure-rays i:nth-child(3){width:10%;margin-left:-5%;height:36%;--angle:19deg;--sway:10deg}
.treasure-rays i:nth-child(4){width:6%;margin-left:-3%;height:32%;--angle:-39deg;--sway:-8deg}
/* The same duration, easing and zero delay as the lid ties the light to its opening. */
@keyframes chest-rays{from{opacity:.14;transform:rotate(var(--angle)) scaleY(.78)}to{opacity:.82;transform:rotate(calc(var(--angle) + var(--sway))) scaleY(1.18)}}
.treasure-motes i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffdf92;box-shadow:0 0 7px #ffc764;opacity:0;animation:treasure-mote var(--duration) ease-in-out var(--delay) infinite}
@keyframes goblin-breathe{from{transform:translate(0,1px) rotate(-.12deg)}to{transform:translate(-2px,-5px) rotate(.4deg)}}
@keyframes goblin-look{0%,100%{transform:rotate(-.35deg) translateY(0)}42%{transform:rotate(1deg) translateY(-3px)}68%{transform:rotate(.3deg) translateY(-1px)}}
@keyframes goblin-ear-twitch{0%,46%,80%,100%{transform:rotate(0)}54%{transform:rotate(-2.7deg)}61%{transform:rotate(1.1deg)}69%{transform:rotate(-.7deg)}}
@keyframes chest-open{from{transform:rotate(-.3deg)}to{transform:rotate(2deg)}}
@keyframes treasure-light{from{opacity:.3;transform:scale(.88)}to{opacity:1;transform:scale(1.13)}}
.cave-bats{position:absolute;inset:0;z-index:1;pointer-events:none}
.cave-bat{position:absolute;width:48px;opacity:0;animation:bat-flight 18s linear infinite}
.cave-bat img{width:100%;height:auto;filter:brightness(.45);animation:bat-wings .8s ease-in-out infinite alternate;transform-origin:50% 55%}
.bat-one{left:56%;top:18%;animation-delay:-3s}
.bat-two{left:66%;top:13%;width:34px;animation-duration:22s;animation-delay:-9s}
.bat-three{left:75%;top:24%;width:27px;animation-duration:25s;animation-delay:-15s}
.bat-two img{animation-duration:.65s}.bat-three img{animation-duration:.95s}
@keyframes bat-flight{0%{opacity:0;transform:translate(95px,20px) rotate(-8deg)}12%{opacity:.75}40%{transform:translate(-35px,-25px) rotate(6deg)}70%{opacity:.66;transform:translate(-160px,-10px) rotate(-5deg)}86%,100%{opacity:0;transform:translate(-235px,-65px) rotate(8deg)}}
@keyframes bat-wings{from{transform:scaleY(.45) rotate(-4deg)}to{transform:scaleY(1) rotate(4deg)}}
@keyframes treasure-mote{0%,100%{opacity:0;transform:translate(0,14px) scale(.6)}18%{opacity:.55}76%{opacity:.25}90%{opacity:0;transform:translate(var(--drift),-80px) scale(.3)}}
.motion-example.motion-paused .motion-stage *,.motion-example.motion-offscreen .motion-stage *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.motion-stage *{animation:none!important}.motion-stage .treasure-glow{opacity:.35}.treasure-motes,.cave-bats{display:none}.treasure-rays i{opacity:.2;transform:rotate(var(--angle))}}
@media(max-width:600px){.treasure-motes i{width:2px;height:2px}}
.foreground-bat{position:absolute;z-index:4;left:65%;top:22%;width:86px;opacity:0;pointer-events:none;animation:bat-close-pass 17s linear -1s infinite;will-change:transform,left,top}
.foreground-bat img{width:100%;height:auto;filter:brightness(.22);transform-origin:50% 54%;animation:bat-quick-wings .16s ease-in-out infinite alternate}
@keyframes bat-close-pass{
 0%,2%{left:65%;top:22%;opacity:0;transform:scale(.24) rotate(-12deg)}
 5%{left:58%;top:18%;opacity:.35;transform:scale(.32) rotate(12deg)}
 11%{left:47%;top:23%;opacity:.5;transform:scale(.48) rotate(-19deg)}
 17%{left:36%;top:17%;opacity:.6;transform:scale(.74) rotate(10deg)}
 23%{left:24%;top:25%;opacity:.74;transform:scale(1.16) rotate(-16deg)}
 29%{left:9%;top:34%;opacity:.82;transform:scale(1.85) rotate(-27deg)}
 35%{left:-18%;top:43%;opacity:0;transform:scale(2.8) rotate(-18deg)}
 100%{left:-18%;top:43%;opacity:0;transform:scale(2.8) rotate(-18deg)}
}
@keyframes bat-quick-wings{from{transform:scaleY(.22) rotate(-7deg)}to{transform:scaleY(1.08) rotate(7deg)}}
.motion-example.motion-paused .foreground-bat,.motion-example.motion-paused .foreground-bat img,.motion-example.motion-offscreen .foreground-bat,.motion-example.motion-offscreen .foreground-bat img{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.foreground-bat{display:none}}
@media(max-width:600px){.foreground-bat{width:50px}}