/* The existing painted artwork stays intact; only its presentation is rigged. */
.ocean-plane{inset:69% -6% -4%;background: url('assets/wave-back.webp') 0 0 / 100% 72% repeat-y;animation:seaSway 18s ease-in-out infinite alternate}
.island-wrap{left:42%;top:65%;width:62%}
.island-wrap:before{display:none}.coastal-ripple{height:6%;bottom:0;opacity:.5}
.wave-back{height:30%;bottom:-1%}.wave-mid{height:25%;bottom:-5%}.wave-front{height:22%;bottom:-8%}
.wave-track{animation-duration:58s}.wave-mid .wave-track{animation-duration:45s}.wave-front .wave-track{animation-duration:36s}
.sky-day{background:linear-gradient(160deg,#6253f7,#75a9ff 40%,#b5edff 73%,#5bcbea)}
.sky-night{background:linear-gradient(155deg,#292189,#5357dc 35%,#8fbaff 74%,#3189d9)}
[data-sky=day].scene{--star-opacity:.48}[data-sky=dusk].scene{--star-opacity:.75}
.living-light{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 25% 9%,#85edff68,transparent 29%),radial-gradient(ellipse at 79% 19%,#c7a6ff77,transparent 34%),radial-gradient(ellipse at 10% 54%,#e2fbff77,transparent 22%);mix-blend-mode:screen;animation:lightBreathe 19s ease-in-out infinite alternate}
.live-stars{position:absolute;inset:0;z-index:4;pointer-events:none}.live-stars i{position:absolute;width:var(--size);height:var(--size);background:#f0fbff;border-radius:50%;box-shadow:0 0 7px 2px #a3dfff85;animation:starBreathe var(--period) var(--delay) ease-in-out infinite}
.live-stars i:nth-child(7n):before,.live-stars i:nth-child(7n):after{content:'';position:absolute;background:linear-gradient(transparent,#f7fcff,transparent);left:40%;top:-130%;width:20%;height:360%}.live-stars i:nth-child(7n):after{transform:rotate(90deg)}
.glass-highlight{animation:glassLight 12s ease-in-out infinite alternate}
.creature-rig{position:relative;width:100%;perspective:400px}
.scene .creature-rig>img{position:absolute;inset:0;width:100%;height:100%;animation:none}
.scene .creature-rig>.rig-size{position:relative;height:auto;visibility:hidden}
.scene .rig-bird .bird-wing{animation:gullFlap 1.8s var(--phase) ease-in-out infinite}
.scene .rig-bird .wing-far{animation-name:gullFar;animation-duration:1.8s}
.scene .rig-butterfly .butterfly-wing{animation:butterflyFlap .72s var(--phase) ease-in-out infinite}
.scene .rig-butterfly .butterfly-far{animation-name:butterflyFar;opacity:.8}
.scene .rig-butterfly .butterfly-right{animation-name:butterflyRight}
.scene .rig-jellyfish .jelly-bell{animation:jellyPulse 3.8s var(--phase) ease-in-out infinite}
.scene .rig-jellyfish .jelly-tentacles{animation:jellyTendrils 3.8s var(--phase) ease-in-out infinite}
.scene .rig-whale .whale-segment{animation:whaleBend 5.8s var(--lag) ease-in-out infinite}
.particle-bird{filter:var(--light) drop-shadow(0 1px 1px #3c819c30)}
.particle-jellyfish,.particle-whale{filter:var(--light) drop-shadow(0 0 3px #9ae6ff45)}
.bag-hotspot{position:absolute;z-index:5;left:18%;top:60%;width:22%;height:25%;border:0;border-radius:35%;background:transparent;cursor:pointer}
.bag-hotspot span{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;font-size:10px;background:#fff8dcf0;color:#715642;border:1px solid #d3bb8a;border-radius:4px;padding:6px 9px;opacity:0;transition:opacity .3s}
.bag-hotspot:hover span,.bag-hotspot:focus-visible span{opacity:1}.bag-hotspot:focus-visible{outline:2px solid #fff4c8}
.bag-dialog{background:linear-gradient(125deg,#fffced,#f8eacb);border-color:#d7bf8d}.bag-dialog blockquote{margin:20px 0 30px;padding:22px 7px;font-family:'Songti SC',serif;font-size:23px;line-height:1.9;color:#596757;min-height:150px}.bag-dialog #bagCategory{color:#a3834d}.bag-dialog small{font-size:11px;color:#8a805e}
[data-hidden=true] *{animation-play-state:paused!important}
@keyframes gullFlap{0%,100%{transform:rotate(-9deg) scaleY(.96)}50%{transform:rotate(26deg) scaleY(.64)}}
@keyframes gullFar{0%,100%{transform:rotate(7deg) scaleY(.96)}50%{transform:rotate(-21deg) scaleY(.68)}}
@keyframes butterflyFlap{0%,100%{transform:rotateY(-12deg) rotate(-3deg)}50%{transform:rotateY(73deg) rotate(5deg)}}
@keyframes butterflyFar{0%,100%{transform:rotateY(125deg) rotate(4deg)}50%{transform:rotateY(78deg) rotate(-3deg)}}
@keyframes butterflyRight{0%,100%{transform:rotateY(12deg) rotate(3deg)}50%{transform:rotateY(-73deg) rotate(-5deg)}}
@keyframes jellyPulse{0%,100%{transform:scale(1,1)}35%{transform:scale(.9,1.08)}65%{transform:scale(1.04,.96)}}
@keyframes jellyTendrils{0%,100%{transform:skewX(-4deg) scaleY(.98)}50%{transform:skewX(5deg) scaleY(1.05)}}
@keyframes whaleBend{0%,100%{transform:translateY(calc(var(--bend)*-1))}50%{transform:translateY(var(--bend))}}
@keyframes lightBreathe{0%{opacity:.5;transform:translate(-2%,0) scale(1.03)}100%{opacity:.9;transform:translate(2%,3%) scale(1.1)}}
@keyframes starBreathe{0%,100%{opacity:.16;transform:scale(.65)}45%{opacity:.95;transform:scale(1.15)}70%{opacity:.35;transform:scale(.8)}}
@keyframes glassLight{from{opacity:.6}to{opacity:1}}
@keyframes seaSway{from{transform:translateX(-1%)}to{transform:translateX(1%)}}
@media(prefers-reduced-motion:reduce){.bag-hotspot span{transition:none}}