/* Decorative storyboard only. Both SVGs track the same viewBox as the art below them. */
.zoo-motion-layer{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:hidden}
.zoo-motion-layer[hidden]{display:none}
.zoo-motion-map,.zoo-motion-art{z-index:1}
.zoo-map nav,.zoo-map figcaption,.zoo-scene-buttons,.zoo-scene-note{z-index:2}
.zoo-motion-toggle{appearance:none;display:inline-flex;align-items:center;gap:.45rem;flex:none;min-height:36px;padding:6px 10px;border-radius:6px;border:1px solid #a6bfb3;background:#f8f7e9;color:#214c40;font:750 .68rem/1.1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.zoo-motion-toggle[hidden]{display:none}
.zoo-motion-toggle:hover{background:#fff}
.zoo-motion-toggle svg{width:12px;height:12px;fill:currentColor}
.zoo-motion-toggle .zoo-play-icon{display:none}
[data-motion-running=false] .zoo-motion-toggle .zoo-play-icon{display:inline}
[data-motion-running=false] .zoo-motion-toggle .zoo-pause-icon{display:none}
.zoo-motion-toggle:focus-visible{outline:2px solid #cb6d4c;outline-offset:3px}
.zoo-motion-meta{display:flex;align-items:center;gap:7px}
.zoo-story-icons{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;color:#345645;font:680 .68rem/1.35 ui-monospace,monospace}
.zoo-story-icons span{padding:5px 8px;border:1px solid #d2dbcb;border-radius:30px;background:#f4f6e9}
.zoo-motion-art .zoo-ember,.zoo-motion-art .zoo-brush-mark{transform-box:fill-box;transform-origin:center;animation:zoo-ember 2.5s ease-out infinite both;animation-delay:var(--phase,0s)}
.zoo-motion-art .zoo-brush-mark{animation-name:zoo-mark;animation-duration:3.2s}
.zoo-motion-art .zoo-gesture{transform-box:fill-box;transform-origin:left center;animation:zoo-gesture 3.2s ease-in-out infinite;animation-delay:var(--phase,0s)}
body:not([data-motion-running=true]) .zoo-motion-art *{animation-play-state:paused}
@keyframes zoo-ember{0%{opacity:.2;transform:translate(0,3px) scale(.65)}40%{opacity:1}100%{opacity:0;transform:translate(var(--drift,5px),-24px) scale(.15)}}
@keyframes zoo-mark{0%,29%,83%,100%{opacity:.28;transform:scale(.7)}50%,69%{opacity:1;transform:scale(1.12)}}
@keyframes zoo-gesture{0%,55%,100%{transform:rotate(9deg)}20%,36%{transform:rotate(-32deg)}}
@media(max-width:650px){.zoo-motion-toggle{min-height:38px;font-size:.61rem;padding:5px 7px}.zoo-motion-meta{gap:4px}.zoo-motion-meta .zoo-tag{padding:4px 5px}.zoo-top{gap:4px}.zoo-story-icons{font-size:.61rem}}
@media(max-width:350px){.zoo-motion-meta>.zoo-tag{display:none}}


/* Preserve the same path/scene coordinates, but keep the acting figures readable on a phone. */
@media(max-width:680px){
  .zoo-motion-map .zoo-mover-figure{transform:scale(1.45);filter:drop-shadow(0 0 4px #173839)}
  .zoo-motion-map .zoo-motion-trail{stroke-width:3.8;stroke-dasharray:5 11;opacity:.95}
  .zoo-motion-art .zoo-gesture{stroke-width:5.5}
  .zoo-motion-art .zoo-ember{r:4;filter:drop-shadow(0 0 2px #ffe7a5)}
}