@keyframes hairSway {
    0%, 100% {transform: rotate(0deg);}
    50% {transform: rotate(var(--sway-angle, 2deg));}
}
@keyframes handWaveLoop {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-15deg);}
    100% { transform: rotate(0deg); }
}
@keyframes earSway {
    0%, 100% {transform: rotate(0deg);}
    50% {transform: rotate(var(--ear-angle, -3deg));}
}

/* Base class for anything that sways */
.swaying {
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
#hair-1 {
    transform-origin: 50% 20%; 
    animation-name: hairSway;
    animation-duration: 3.2s;
    --sway-angle: 2.5deg;
}
#hair-2 {
    transform-origin: 45% 25%; 
    animation-name: hairSway;
    animation-duration: 3.8s;
    animation-delay: 0.3s;
    --sway-angle: -3deg;
}
#hair-3 {
    transform-origin: 55% 20%;
    animation-name: hairSway;
    animation-duration: 2.9s;
    animation-delay: 0.6s;
    --sway-angle: 2deg;
}
/* ear physics */
#ear-left {
    transform-origin: 0cqh 05%;
    animation-name: earSway;
    animation-duration: 4s;
    --ear-angle: -3.5deg; 
}
#ear-right {
    transform-origin: 0% 0%; 
    animation-name: earSway;
    animation-duration: 4.2s;
    animation-delay: 0.5s;
    --ear-angle: 3.5deg;
}
#pngtuber-stack[data-pose="neutral"] #ear-left {
    transform-origin: 30% 19.5%;
}
#pngtuber-stack[data-pose="neutral"] #ear-right {
    transform-origin: 60% 19.5%; 
}
#pngtuber-stack[data-pose="neutral"] #wave-hand {
    display: none;
}
/* wave pose edits */
#pngtuber-stack[data-pose="wave"] #ear-left {
    transform-origin: 57.5% 16%;
}
#pngtuber-stack[data-pose="wave"] #ear-right {
    transform-origin: 76% 22.5%;
}
#pngtuber-stack[data-pose="wave"] #wave-hand {
    display: block;
    transform-origin: 20% 72.5%; 
    animation: handWaveLoop 5s ease-in-out infinite alternate;
}

/*--- POKE !!! --*/
@keyframes pokeJump {
0% {transform: translateY(0) scale(1, 1);}
20% {transform: translateY(12px) scale(1.058, 0.95);}
50% {transform: translateY(-4px) scale(0.97, 1.02);}
75% {transform: translateY(4px) scale(1.02, 0.98);}
100% {transform: translateY(0) scale(1, 1);}
}

@keyframes earPokeLeft {
0% {transform: rotate(0deg);}
20% {transform: rotate(-5deg);  }
50% {transform: rotate(2deg);  }
75% {transform: rotate(-1deg);}
100% {transform: rotate(0deg);}
}
@keyframes earPokeRight {
0% {transform: rotate(0deg);}
20% {transform: rotate(10deg);}
50% {transform: rotate(-5deg);}
75% {transform: rotate(3deg)}
100% {transform: rotate(0deg);}
}

.poked {
    animation: pokeJump 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#pngtuber-stack.poked #ear-left {
    animation: earPokeLeft .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#pngtuber-stack.poked #ear-right {
    animation: earPokeRight .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes hairPokeLeft {
0% {transform: rotate(0deg);}
20% {transform: rotate(-20deg); }
50% {transform: rotate(7deg);  }
75% {transform: rotate(-2deg); }
100% {transform: rotate(0deg);}}
@keyframes hairPokeRight {
0% {transform: rotate(0deg);}
10% {transform: rotate(20deg);}
40% {transform: rotate(-7deg);}
55% {transform: rotate(2deg);}
100% {transform: rotate(0deg);}
}

#pngtuber-stack.poked #hair-1 {
    animation: hairPokeRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#pngtuber-stack.poked #hair-2 {
    animation: hairPokeRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#pngtuber-stack.poked #hair-3 {
    animation: hairPokeLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-delay: 0.02s; 
}