/* Pixel art from src/avatar.js. Avatars: .pxa (+ .pxa-<pose>), scenes: .art-scene (320×180 viewBox, scale with width). */
.pxa,.art-scene{display:block;image-rendering:pixelated}
.art-scene{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#1d2a4a}
.art-scene g[class]{transform-box:fill-box}

/* Ambient loops. steps() keeps motion on whole pixels; translate units are scene pixels (160×90 grid). */
.art-twinkle{animation:art-twinkle 2.4s steps(2) infinite}
.art-twinkle.d2{animation-delay:-1.2s}
.art-blink{animation:art-twinkle 1s steps(2) infinite}
@keyframes art-twinkle{50%{opacity:.35}}
.art-glow{animation:art-glow 3s ease-in-out infinite}
@keyframes art-glow{50%{opacity:.5}}
.art-bob{animation:art-bob 1.4s steps(1) infinite}
.art-bob.d2{animation-delay:-.7s}
.art-pop{animation:art-bob 1.8s steps(1) infinite}
@keyframes art-bob{50%{transform:translateY(-1px)}}
.art-drift{animation:art-drift 24s steps(12) infinite alternate}
@keyframes art-drift{to{transform:translateX(-12px)}}
.art-rain{animation:art-rain .45s steps(4) infinite}
.art-rain.d2{animation-duration:.3s}
@keyframes art-rain{from{transform:translateY(-12px)}to{transform:none}}
.art-fall{animation:art-fall 3s steps(18) infinite}
@keyframes art-fall{from{transform:translateY(-18px)}to{transform:none}}
.art-flash{opacity:0;animation:art-flash 2.6s steps(1) infinite}
.art-flash.d2{animation-delay:-.7s}.art-flash.d3{animation-delay:-1.5s}.art-flash.d4{animation-delay:-2.1s}
@keyframes art-flash{0%{opacity:1}8%{opacity:0}}
.art-wave{transform-origin:left center;animation:art-wave 1.2s steps(2) infinite}
@keyframes art-wave{50%{transform:skewY(5deg) scaleX(.94)}}
.art-fly{animation:art-fly 9s linear infinite}
@keyframes art-fly{from{transform:translate(40px,6px)}to{transform:translate(-120px,-6px)}}

@media (prefers-reduced-motion:reduce){
  .art-scene *,.pxa *{animation:none!important}
  .art-flash.d1{opacity:1}
}