/* Approved four-frame artwork, with the same timing as the reviewed previews. */
.motion-filter{position:absolute;overflow:hidden;pointer-events:none}
.mascot-track{position:absolute;right:3%;bottom:8px;width:min(94%,900px);aspect-ratio:4/1;overflow:hidden;pointer-events:none;z-index:3}
.mascot-belt{display:flex;width:200%;height:100%;animation:approved-travel 8s linear infinite}
.sprite-frame{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:4/1}
.mascot-belt>.sprite-frame{width:50%;flex:none}
.sprite-frame>img{display:block;width:100%;max-width:none;height:auto;max-height:none;object-fit:initial;border-radius:0;margin:0;animation:approved-frames .85s steps(4) infinite}
/* White face details share one animation clock with the original artwork. */
.hero-cels{display:block;position:relative;width:100%;aspect-ratio:1;animation:approved-frames .85s steps(4) infinite}
.hero-white-underlay{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-cels>img{position:relative;display:block;width:100%;max-width:none;height:auto;max-height:none;margin:0;filter:url(#hero-white-matte)}
.play-panel .play-motion{width:100%;max-width:940px;margin:12px auto 0;overflow:hidden}
.play-motion>.sprite-frame{aspect-ratio:1003/392}
@keyframes approved-frames{to{transform:translateY(-100%)}}
@keyframes approved-travel{to{transform:translateX(-50%)}}
.motion-scene:not(.is-visible) *{animation-play-state:paused!important}
@media(max-width:700px){.mascot-track{width:100%;right:0;bottom:4px}.play-panel .play-motion{margin:10px auto 0}}
@media(prefers-reduced-motion:reduce){.motion-scene *{animation:none!important}}

/* Keep adjacent atlas rows and keyed transparent edges outside the visible cels. */
.hero-cels{clip-path:url(#hero-cels-safe)}
@media(min-width:701px){.mascot-track{display:none}}
@media(max-width:700px){.hero-static{display:none}}