/* Automatisch übernommen aus TANUKI/svg_animations/tanuki/motion.css – nicht hier bearbeiten. */
/* Original Tanuki geometry, articulated for six readable moods. No external resources. */
.tanuki { display:block; width:100%; height:100%; overflow:hidden;
 --t-fur:#8C5A3C; --t-fur-dark:#5F3A24; --t-cream:#F6E7D2;
 --t-mask:#3B2A1E; --t-ink:#2B1B12; --t-blush:#E89B7B; --t-tongue:#E8836F;
 --t-glove:#C4453C; --t-conf-1:#E9B44C; --t-conf-2:#1E7F4F; --t-conf-3:#C4453C; --t-zzz:#8B7D71;
}
.tanuki * { transform-box:view-box; }
.t-figure,.t-torso { transform-origin:120px 211px; }
.t-head { transform-origin:120px 138px; }
.t-tail { transform-origin:172px 174px; }
.t-eyes-open,.t-eyes-half,.t-eyes-wink { transform-origin:120px 93px; }
.t-ear--l { transform-origin:86px 66px; } .t-ear--r { transform-origin:154px 66px; }
.t-arms-up--l { transform-origin:83px 146px; } .t-arms-up--r { transform-origin:157px 146px; }
.t-arms-down--l { transform-origin:84px 151px; } .t-arms-down--r { transform-origin:156px 151px; }
.t-wave { transform-origin:158px 148px; }
.t-box--l { transform-origin:91px 157px; } .t-box--r { transform-origin:149px 157px; }
.t-shadow { transform-origin:120px 218px; }
/* Exactly one face and one pair of arms are visible in every state. */
.t-eyes-half,.t-eyes-closed,.t-eyes-wink,.t-mouth-smile,.t-mouth-sad,
.t-arms-up,.t-arms-battle,.t-arms-playful,.t-brows-battle,.t-brows-sad,
.t-blush,.t-zzz,.t-confetti { display:none; }

/* IDLE — barely perceptible breath, a look around, one unhurried blink. */
.tanuki--idle .t-figure { animation:idle-breathe 4.8s ease-in-out infinite; }
.tanuki--idle .t-head { animation:idle-look 9s ease-in-out infinite; }
.tanuki--idle .t-eyes-open { animation:idle-blink 5.6s linear infinite; }
.tanuki--idle .t-tail { animation:idle-tail 5.8s ease-in-out infinite; }
@keyframes idle-breathe { 0%,100% {transform:scale(1)} 50% {transform:translateY(-1px) scale(1.008,1.016)} }
@keyframes idle-look { 0%,35%,70%,100% {transform:rotate(0)} 45%,55% {transform:rotate(-3deg)} 82%,88% {transform:rotate(2deg)} }
@keyframes idle-blink { 0%,41%,47%,100% {transform:scaleY(1)} 43%,45% {transform:scaleY(.08)} }
@keyframes idle-tail { 0%,100% {transform:rotate(-2deg)} 50% {transform:rotate(4deg)} }

/* JOY — anticipation, two little hops, follow-through in ears and paws. */
.tanuki--joy .t-mouth-neutral,.tanuki--joy .t-eyes-open,.tanuki--joy .t-arms-down { display:none; }
.tanuki--joy .t-mouth-smile,.tanuki--joy .t-eyes-closed,.tanuki--joy .t-arms-up,
.tanuki--joy .t-blush,.tanuki--joy .t-confetti { display:inline; }
.tanuki--joy .t-figure { animation:joy-hop 1.4s ease-in-out both; }
.tanuki--joy .t-tail { animation:joy-tail 1.4s ease-in-out both; }
.tanuki--joy .t-arms-up--l { animation:joy-left 1.4s ease-in-out both; }
.tanuki--joy .t-arms-up--r { animation:joy-right 1.4s ease-in-out both; }
.tanuki--joy .t-shadow { animation:joy-shadow 1.4s ease-in-out both; }
.tanuki--joy .t-conf { animation:joy-confetti 1.4s ease-out both; }
.t-conf:nth-child(even) { transform-origin:120px 130px; }
@keyframes joy-hop { 0%,100%{transform:translateY(0) scale(1)} 12%{transform:translateY(2px) scale(1.035,.95)} 31%{transform:translateY(-17px) scale(.97,1.035)} 48%{transform:translateY(0) scale(1.025,.965)} 65%{transform:translateY(-8px) scale(.99,1.02)} 81%{transform:translateY(0) scale(1.015,.98)} }
@keyframes joy-tail { 0%,100%{transform:rotate(0)} 22%,61%{transform:rotate(-8deg)} 41%,78%{transform:rotate(8deg)} }
@keyframes joy-left { 0%,100%{transform:rotate(0)} 29%,65%{transform:rotate(23deg)} 47%,81%{transform:rotate(-7deg)} }
@keyframes joy-right { 0%,100%{transform:rotate(0)} 29%,65%{transform:rotate(-23deg)} 47%,81%{transform:rotate(7deg)} }
@keyframes joy-shadow { 0%,48%,81%,100%{transform:scaleX(1);opacity:.1} 31%{transform:scaleX(.74);opacity:.05} 65%{transform:scaleX(.85);opacity:.07} }
@keyframes joy-confetti { 0%,10%{opacity:0;transform:translateY(7px) scale(.98)} 26%,58%{opacity:1} 100%{opacity:0;transform:translateY(17px) scale(1.02)} }

/* BOXER — guard, left jab, right jab, settle. Each glove has its own shoulder pivot. */
.tanuki--boxer .t-arms-down {display:none}
.tanuki--boxer .t-arms-battle,.tanuki--boxer .t-brows-battle {display:inline}
.tanuki--boxer .t-figure {animation:box-stance 1.4s ease-in-out both}
.tanuki--boxer .t-head {animation:box-focus 1.4s ease-in-out both}
.tanuki--boxer .t-box--l {animation:box-left 1.4s cubic-bezier(.2,.7,.25,1) both}
.tanuki--boxer .t-box--r {animation:box-right 1.4s cubic-bezier(.2,.7,.25,1) both}
.tanuki--boxer .t-tail {animation:box-tail 1.4s ease-in-out both}
@keyframes box-stance {0%,100%{transform:translate(0,0) rotate(0)} 13%{transform:translateY(3px) scale(1.015,.98)} 27%{transform:translate(-3px,-1px) rotate(-3deg)} 42%{transform:translate(0,1px)} 57%{transform:translate(3px,-1px) rotate(3deg)} 73%{transform:translateY(2px)} 87%{transform:translateY(-1px)}}
@keyframes box-left {0%,12%,43%,100%{transform:translate(0,0) rotate(0)} 25%,30%{transform:translate(-18px,-14px) rotate(-27deg) scale(1.12)} 55%,65%{transform:translate(3px,-4px) rotate(8deg)}}
@keyframes box-right {0%,38%,76%,100%{transform:translate(0,0) rotate(0)} 24%,32%{transform:translate(-3px,-4px) rotate(-8deg)} 54%,60%{transform:translate(19px,-14px) rotate(27deg) scale(1.12)}}
@keyframes box-focus {0%,100%{transform:rotate(0)} 27%{transform:rotate(3deg)} 57%{transform:rotate(-3deg)}}
@keyframes box-tail {0%,100%{transform:rotate(0)} 27%{transform:rotate(5deg)} 57%{transform:rotate(-5deg)}}

/* SAD — a soft exhale, lowered head and drooping ears; no punitive shaking. */
.tanuki--sad .t-mouth-neutral {display:none}
.tanuki--sad .t-mouth-sad,.tanuki--sad .t-brows-sad {display:inline}
.tanuki--sad .t-figure {transform:translateY(3px);animation:sad-sigh 1.4s ease-in-out both}
.tanuki--sad .t-head {transform:translateY(2px) rotate(-5deg);animation:sad-head 1.4s ease-in-out both}
.tanuki--sad .t-ear--l {transform:rotate(-24deg);animation:sad-ear-left 1.4s ease-in-out both}
.tanuki--sad .t-ear--r {transform:rotate(24deg);animation:sad-ear-right 1.4s ease-in-out both}
.tanuki--sad .t-eyes-open {transform:translateY(2px) scaleY(.86)}
.tanuki--sad .t-tail {transform:rotate(7deg);animation:sad-tail 1.4s ease-in-out both}
@keyframes sad-sigh {0%{transform:translateY(0) scale(1)} 23%{transform:translateY(-1px) scale(1.02,1.025)} 66%{transform:translateY(4px) scale(1.015,.98)} 100%{transform:translateY(3px) scale(1)}}
@keyframes sad-head {0%{transform:translateY(0) rotate(0)} 62%{transform:translateY(3px) rotate(-7deg)} 100%{transform:translateY(2px) rotate(-5deg)}}
@keyframes sad-ear-left {0%{transform:rotate(0)} 62%{transform:rotate(-29deg)} 100%{transform:rotate(-24deg)}}
@keyframes sad-ear-right {0%{transform:rotate(0)} 62%{transform:rotate(29deg)} 100%{transform:rotate(24deg)}}
@keyframes sad-tail {0%{transform:rotate(0)} 65%,100%{transform:rotate(7deg)}}

/* PLAYFUL — a wink, a hello, a cheeky head tilt. Fits the welcome screen. */
.tanuki--playful .t-arms-down,.tanuki--playful .t-mouth-neutral,.tanuki--playful .t-eyes-open {display:none}
.tanuki--playful .t-arms-playful,.tanuki--playful .t-mouth-smile,.tanuki--playful .t-eyes-wink,.tanuki--playful .t-blush {display:inline}
.tanuki--playful .t-head {transform:rotate(-4deg);animation:play-head 1.4s ease-in-out both}
.tanuki--playful .t-wave {transform:rotate(-8deg);animation:play-wave 1.4s ease-in-out both}
.tanuki--playful .t-figure {animation:play-rock 1.4s ease-in-out both}
.tanuki--playful .t-tail {animation:joy-tail 1.4s ease-in-out both}
@keyframes play-head {0%,100%{transform:rotate(-4deg)} 23%{transform:rotate(5deg)} 44%{transform:rotate(-7deg)} 69%{transform:rotate(3deg)}}
@keyframes play-wave {0%,100%{transform:rotate(-8deg)} 19%,51%{transform:rotate(-37deg)} 35%,68%{transform:rotate(17deg)} 85%{transform:rotate(-15deg)}}
@keyframes play-rock {0%,100%{transform:rotate(0)} 24%{transform:translateY(-2px) rotate(3deg)} 47%{transform:rotate(-2deg)} 71%{transform:translateY(-1px) rotate(1.5deg)}}

/* SLEEPY — breathing and a slow nod, with three softly drifting Zs. */
.tanuki--sleepy .t-eyes-open {display:none}
.tanuki--sleepy .t-eyes-half,.tanuki--sleepy .t-zzz {display:inline}
.tanuki--sleepy .t-head {transform:rotate(4deg);animation:sleep-nod 5.4s ease-in-out infinite}
.tanuki--sleepy .t-figure {animation:sleep-breathe 4.8s ease-in-out infinite}
.tanuki--sleepy .t-tail {transform:rotate(4deg)}
.tanuki--sleepy .t-z {animation:sleep-z 3.6s ease-in-out infinite}
.tanuki--sleepy .t-z:nth-child(2) {animation-delay:-2.4s}
.tanuki--sleepy .t-z:nth-child(3) {animation-delay:-1.2s}
@keyframes sleep-breathe {0%,100%{transform:scale(1)} 50%{transform:scale(1.015,1.025)}}
@keyframes sleep-nod {0%,100%{transform:rotate(4deg) translateY(1px)} 57%{transform:rotate(8deg) translateY(4px)} 72%{transform:rotate(2deg) translateY(0)}}
@keyframes sleep-z {0%{opacity:0;transform:translate(0,7px)} 28%,52%{opacity:.8} 100%{opacity:0;transform:translate(3px,-11px)}}

/* Preview loops are opt-in. Event SVGs stop by themselves after 1.4 seconds. */
.tanuki.is-loop * {animation-iteration-count:infinite!important}
.tanuki.is-static * {animation:none!important;transition:none!important}
.tanuki.is-static .t-confetti {display:none}
@media (prefers-reduced-motion:reduce) {
 .tanuki * {animation:none!important;transition:none!important}
 .tanuki .t-confetti {display:none}
}