/* Illustration motion (v2 art). Every animated element pivots on its local origin (0,0),
   which the kit sets with a translate() wrapper — so rotations happen at shoulders, necks,
   stems and hinges rather than the corner of the SVG. */

svg.art * { transform-box: view-box; transform-origin: 0 0; }

/* ---- Characters ---- */
.a-bob      { animation: art-bob 2.4s ease-in-out infinite; }
.a-bob-fast { animation: art-bob 1.1s ease-in-out infinite; }
.a-tilt     { animation: art-tilt 4.5s ease-in-out infinite; }
.a-nod      { animation: art-nod 1.2s ease-in-out infinite; }
.a-blink    { animation: art-blink 4.2s infinite; }
.a-wave     { animation: art-wave 1.1s ease-in-out infinite alternate; }
.a-swing    { animation: art-swing 2.2s ease-in-out infinite alternate; }
.a-hammer   { animation: art-hammer .9s cubic-bezier(.5, 0, .5, 1) infinite; }
.a-stir     { animation: art-stir 1.4s ease-in-out infinite; }
.a-strum    { animation: art-strum .45s ease-in-out infinite alternate; }
.a-point    { animation: art-point 2.6s ease-in-out infinite; }
.a-type     { animation: art-type .35s ease-in-out infinite alternate; }
.a-hop      { animation: art-hop 1.6s cubic-bezier(.3, 0, .3, 1) infinite; }

@keyframes art-bob    { 50% { transform: translateY(-5px); } }
@keyframes art-tilt   { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes art-nod    { 50% { transform: rotate(6deg); } }
@keyframes art-blink  { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes art-wave   { from { transform: rotate(-10deg); } to { transform: rotate(16deg); } }
@keyframes art-swing  { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes art-hammer { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-38deg); } 55% { transform: rotate(6deg); } }
@keyframes art-stir   { 0%, 100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-8deg) translateX(-4px); } 75% { transform: rotate(8deg) translateX(4px); } }
@keyframes art-strum  { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
@keyframes art-point  { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes art-type   { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes art-hop    { 0%, 100% { transform: translateY(0) scale(1, 1); } 10% { transform: translateY(0) scale(1.06, .94); } 40% { transform: translateY(-26px) scale(.97, 1.03); } 70% { transform: translateY(0) scale(1.04, .96); } }

/* ---- Scenery ---- */
.a-float      { animation: art-float 3.4s ease-in-out infinite; }
.a-float-rot  { animation: art-float-rot 6s ease-in-out infinite; }
.a-drift      { animation: art-drift 14s ease-in-out infinite alternate; }
.a-drift-slow { animation: art-drift 22s ease-in-out infinite alternate-reverse; }
.a-spin       { animation: art-spin 4s linear infinite; }
.a-spin-slow  { animation: art-spin 16s linear infinite; }
.a-spin-rev   { animation: art-spin 5s linear infinite reverse; }
.a-pulse      { animation: art-pulse 1s ease-in-out infinite; }
.a-pulse-slow { animation: art-pulse 2.4s ease-in-out infinite; }
.a-twinkle    { animation: art-twinkle 2.2s ease-in-out infinite; }
.a-rise       { animation: art-rise 3.2s ease-in infinite; }
.a-note       { animation: art-note 3s ease-out infinite; }
.a-steam      { animation: art-steam 2.4s ease-out infinite; }
.a-sway       { animation: art-sway 3.6s ease-in-out infinite; }
.a-sway-fast  { animation: art-sway 1.4s ease-in-out infinite; }
.a-flicker    { animation: art-flicker .5s ease-in-out infinite alternate; }
.a-swim       { animation: art-swim 7s ease-in-out infinite; }
.a-swim-rev   { animation: art-swim 9s ease-in-out infinite reverse; }
.a-toss       { animation: art-toss 1.6s cubic-bezier(.3, 0, .6, 1) infinite; }
.a-grow       { animation: art-grow 3s ease-in-out infinite; }
.a-draw       { stroke-dasharray: 600; animation: art-draw 5s ease-in-out infinite; }
.a-spray      { stroke-dasharray: 14 18; animation: art-spray .5s linear infinite; }
.a-beat       { stroke-dasharray: 320; animation: art-beat 2s linear infinite; }
.a-bounce     { animation: art-bounce 1.2s cubic-bezier(.4, 0, .6, 1) infinite; }
.a-peck       { animation: art-peck 1.8s ease-in-out infinite; }
.a-blink-led  { animation: art-led 1.2s steps(1) infinite; }

@keyframes art-float     { 50% { transform: translateY(-12px); } }
@keyframes art-float-rot { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
@keyframes art-drift     { from { transform: translateX(-20px); } to { transform: translateX(26px); } }
@keyframes art-spin      { to { transform: rotate(360deg); } }
@keyframes art-pulse     { 50% { transform: scale(1.14); } }
@keyframes art-twinkle   { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes art-rise      { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-150px) scale(1.1); opacity: 0; } }
@keyframes art-note      { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(24px, -90px) rotate(12deg); opacity: 0; } }
@keyframes art-steam     { 0% { transform: translateY(0) scaleY(.6); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-40px) scaleY(1.1); opacity: 0; } }
@keyframes art-sway      { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes art-flicker   { from { transform: scale(1, 1); } to { transform: scale(.92, 1.12); } }
@keyframes art-swim      { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(30px); } }
@keyframes art-toss      { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-70px) rotate(180deg); } }
@keyframes art-grow      { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.05); } }
@keyframes art-draw      { 0% { stroke-dashoffset: 600; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -600; } }
@keyframes art-spray     { to { stroke-dashoffset: -32; } }
@keyframes art-beat      { from { stroke-dashoffset: 320; } to { stroke-dashoffset: -320; } }
@keyframes art-bounce    { 0%, 100% { transform: translateY(0) scale(1.15, .85); } 12% { transform: translateY(-10px) scale(.95, 1.05); } 50% { transform: translateY(-90px) scale(1); } 88% { transform: translateY(-10px) scale(.95, 1.05); } }
@keyframes art-peck      { 0%, 60%, 100% { transform: rotate(0); } 70%, 80% { transform: rotate(28deg); } 75% { transform: rotate(18deg); } }
@keyframes art-led       { 50% { opacity: .25; } }

/* Cards stay still until hovered; the front of the welcome stack and the detail view run live */
.card-art svg.art *, .stack-card:not(.s0) svg.art * { animation-play-state: paused; }
.card:hover .card-art svg.art * { animation-play-state: running; }
/* Live scenes (js/art/engine.js) play whenever they're on screen, touch devices included */
.card-art svg.art.is-running * { animation-play-state: running; }