/* Motion is progressive enhancement: the unanimated page stays fully visible. */
.hero-reveal-panels{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero-reveal-panels img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 49%}
.hero-reveal-panels .creator-half{clip-path:polygon(0 0,57% 0,45% 100%,0 100%)}
.hero-reveal-panels .player-half{clip-path:polygon(57% 0,100% 0,100% 100%,45% 100%)}
.hero-scene .scene-label,.hero-scene .scene-scroll{z-index:2}
.hero-art{transform:translateY(var(--hero-drift,0px)) scale(var(--hero-scale,1));transform-origin:center}
.together-art img{transform:translateY(var(--boss-drift,0px)) scale(var(--boss-scale,1));transform-origin:center}
.button-arrow{transition:transform .25s var(--ease),background .25s,color .25s}
.button:hover .button-arrow{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.dark-button:hover .button-arrow{background:var(--orange);color:var(--ink)}
.trap-tabs button[aria-selected="true"] b{transform:rotate(-45deg)}
.trap-tabs b{transition:transform .28s var(--ease)}
/* Replace the generic panel animation with the more specific JS transitions. */
.motion-ready .panel-change{animation:none}
@media(max-width:600px){.hero-reveal-panels img{object-position:center}.hero-art,.together-art img{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-reveal-panels{display:none}.hero-art,.together-art img,.button:hover .button-arrow,.trap-tabs b{transform:none!important}}

.motion-heading-line{display:inline-block;max-width:100%}