/* The original artwork remains the fallback; the canvas adds a living 2.5D surface. */
.hero-art{transform:none!important;transition:none;isolation:isolate}
.world-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,black 18%,black 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 18%,black 85%,transparent)}
.hero.motion-ready .world-canvas{opacity:1}
.hero.motion-ready .hero-art>img{opacity:0}
.hero-art>img{transform-origin:60% 60%;animation:world-camera-fallback 14s ease-in-out infinite alternate}
.hero.motion-ready .hero-art>img{animation:none}
.world-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,black 25%,black 80%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 25%,black 80%,transparent)}
.world-light{position:absolute;width:30%;height:85%;top:1%;left:52%;transform-origin:50% 90%;background:linear-gradient(180deg,#c4f4d600,#d5f8da13 40%,#c9edc21c 80%,transparent);filter:blur(16px);clip-path:polygon(34% 0,70% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:world-light-sweep 12s ease-in-out infinite alternate}
.world-dust{position:absolute;inset:0}
.world-dust i{position:absolute;bottom:-4%;left:var(--x);width:var(--size);height:var(--size);background:#f0efd7;border-radius:50%;box-shadow:0 0 8px #e7ebca77;opacity:0;animation:world-dust-rise var(--duration) linear var(--delay) infinite}
.world-papers{position:absolute;inset:0;perspective:800px}
.flying-paper{position:absolute;width:55px;height:76px;background:repeating-linear-gradient(0deg,transparent 0 7px,#41453348 7px 8px,transparent 8px 10px) 7px 13px/calc(100% - 14px) calc(100% - 27px) no-repeat,linear-gradient(135deg,#d9d3b5,#aaa788 75%,#eeecd2);box-shadow:5px 12px 20px #0006;clip-path:polygon(0 0,94% 5%,100% 100%,6% 96%);opacity:.7;will-change:transform;animation:world-paper-float 14s ease-in-out infinite}
.paper-one{left:27%;top:29%;width:45px;height:61px;--turn:-18deg;--drift:28px;animation-delay:-3s;filter:blur(.3px)}
.paper-two{left:81%;top:17%;width:27px;height:39px;--turn:22deg;--drift:-35px;animation-duration:18s;animation-delay:-8s;opacity:.52}
.paper-three{left:70%;top:80%;width:72px;height:93px;--turn:39deg;--drift:40px;animation-duration:17s;animation-delay:-5s;filter:blur(.5px);opacity:.48}
.motion-controls{position:absolute;z-index:5;right:var(--gap);top:22px;display:flex;align-items:center;gap:8px;color:#d6dfce;background:#13201777;border:1px solid #b1c6a82e;border-radius:30px;padding:0 10px 0 14px;backdrop-filter:blur(12px)}
.motion-controls button{height:36px;display:flex;align-items:center;gap:8px;font-size:14px;padding:0 5px;color:inherit}
.motion-signal{width:5px;height:5px;border-radius:50%;background:#ef7a3a;box-shadow:0 0 10px #ef7a3a66;animation:world-signal 3s ease-in-out infinite}
.motion-controls #motion-replay{font-size:20px;border-left:1px solid #abc29b30;margin-left:4px;padding-left:12px;min-width:28px}
.motion-icon{font-size:14px;letter-spacing:-.15em}
.hero.motion-still .hero-art *,.hero.motion-still .motion-signal{animation-play-state:paused!important}
.hero.motion-still .motion-signal{background:#99a293;box-shadow:none}
.hero.motion-still .world-dust{opacity:.4}
@keyframes world-camera-fallback{0%{transform:scale(1.025) translate(-.4%,.3%)}100%{transform:scale(1.09) translate(.8%,-.8%)}}
@keyframes world-light-sweep{0%{transform:rotate(-19deg) translateX(-15%);opacity:.2}50%{opacity:.75}100%{transform:rotate(17deg) translateX(15%);opacity:.35}}
@keyframes world-dust-rise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.45}80%{opacity:.3}100%{transform:translate3d(var(--drift),-650px,0);opacity:0}}
@keyframes world-paper-float{0%,100%{transform:translate3d(0,0,0) rotate(var(--turn)) rotateY(-22deg)}45%{transform:translate3d(var(--drift),-42px,35px) rotate(calc(var(--turn) + 17deg)) rotateY(29deg)}75%{transform:translate3d(calc(var(--drift)*.5),-17px,12px) rotate(calc(var(--turn) - 7deg)) rotateY(-7deg)}}
@keyframes world-signal{50%{opacity:.5}}
@media(min-width:900px){.world-canvas{mask-image:linear-gradient(90deg,transparent,black 25%,black);-webkit-mask-image:linear-gradient(90deg,transparent,black 25%,black)}.motion-controls{top:26px}.world-atmosphere{mask-image:linear-gradient(90deg,transparent,black 30%,black);-webkit-mask-image:linear-gradient(90deg,transparent,black 30%,black)}}
@media(prefers-reduced-motion:reduce){.world-atmosphere{display:none}.hero-art>img{transform:none!important}.motion-controls{opacity:.85}}

/* A single quiet control, with a generous hit area and visible keyboard focus. */
.motion-controls{padding:0;gap:0;background:transparent;border:0;border-radius:0;backdrop-filter:none;color:#e1e4da}
.motion-controls #motion-toggle{width:44px;height:44px;padding:0;justify-content:center;opacity:.6;border-radius:50%;transition:opacity .2s,background .2s}
.motion-controls #motion-toggle:hover,.motion-controls #motion-toggle:focus-visible{opacity:1;background:#10121166}
.motion-controls #motion-toggle:focus-visible{outline:1px solid #ef7a3a;outline-offset:2px}
.motion-controls .motion-icon{font-size:16px;letter-spacing:0;line-height:1}