/* Static artwork stays mounted as the no-JS, timeout and error fallback. */
.hero-motion .hero-layers{position:absolute;inset:0;overflow:hidden}
.hero-motion [hidden]{display:none!important}
.hero-motion .hero-landscape{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;animation:hero-drift 16s ease-in-out infinite alternate}
.hero-motion .hero-bunny-wrap{position:absolute;left:53%;bottom:0;width:clamp(110px,15vw,210px);height:75%;transform:rotate(var(--lean,0deg));transition:transform .18s ease}
.hero-motion .hero-bunny{position:static;width:100%;height:100%;object-fit:contain;transform-origin:50% 90%}
.hero-motion.is-jumping .hero-bunny{animation:hero-hop .75s ease both}
.hero-motion .hero-copy{position:absolute;left:5%;top:20%;color:#321544;font-size:clamp(20px,2.2vw,34px);line-height:1.1;text-shadow:0 1px #fff}
.hero-motion .hero-controls{position:absolute;right:12px;bottom:8px;display:flex;gap:8px}
.hero-motion .hero-controls button{min-height:44px;background:#fff;color:#321544;border:1px solid #7534d3;border-radius:20px;padding:6px 12px;font:inherit;font-size:14px}
.hero-motion .hero-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#ecf8ff;color:#321544;font-size:14px;pointer-events:none}
.hero-motion .hero-loading-icon{position:static;width:48px;height:48px;max-width:48px;object-fit:contain}
.hero-motion.is-ready .hero-layers{animation:hero-reveal .25s ease}
.hero-motion.is-paused .hero-landscape,.hero-motion.is-paused .hero-bunny{animation-play-state:paused}
@keyframes hero-hop{0%,100%{transform:translateY(0) scale(1)}15%{transform:scale(1.12,.88)}50%{transform:translateY(-25%) scale(.95,1.06)}80%{transform:translateY(0) scale(1.13,.87)}}
@keyframes hero-drift{from{transform:scale(1.03) translateX(-.5%)}to{transform:scale(1.03) translateX(.5%)}}
@keyframes hero-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.hero-motion .hero-copy{left:12px;font-size:20px}.hero-motion .hero-bunny-wrap{left:auto;right:4px;width:88px;bottom:20%;height:60%}.hero-motion .hero-controls{left:8px;right:auto;bottom:2px;gap:4px}.hero-motion .hero-controls button{font-size:12px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.hero-motion *{animation:none!important;transition:none!important}}

/* Each full-canvas raster shares registration; no duplicate painted objects. */
.hero-motion .hero-scenery{position:absolute;inset:0;animation:hero-drift 16s ease-in-out infinite alternate}
.hero-motion .hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-motion .hero-copy{z-index:2}
.hero-motion .hero-controls{z-index:3}
.hero-motion .hero-loading{z-index:1}
.hero-motion.is-entering .hero-scene{animation:hero-scene-in .45s ease both}
.hero-motion.is-entering .hero-scene-hill{animation-delay:.18s}
.hero-motion.is-entering .hero-scene-trees{animation:hero-pop .55s .42s both;transform-origin:50% 82%}
.hero-motion.is-entering .hero-scene-houses{animation:hero-pop .55s .68s both;transform-origin:50% 82%}
.hero-motion.is-entering .hero-bunny-wrap{animation:hero-arrive .6s 1s both}
.hero-motion.is-paused .hero-scenery,.hero-motion.is-paused .hero-scene,.hero-motion.is-paused .hero-bunny-wrap{animation-play-state:paused}
@keyframes hero-scene-in{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:none}}
@keyframes hero-pop{0%{opacity:0;transform:translateY(8%) scale(.85)}65%{opacity:1;transform:translateY(-1%) scale(1.025)}100%{opacity:1;transform:none}}
@keyframes hero-arrive{0%{opacity:0;transform:translateY(15%) scale(.8)}65%{opacity:1;transform:translateY(-4%) scale(1.04)}100%{opacity:1;transform:none}}

.hero-motion .hero-scene-trees{clip-path:inset(0 0 0 5%)}