/* ======================================================== */
/* 🎭 3-ACT STORY ANIMATIONS FOR ROADMAP & THEME CHARACTERS */
/* Ceiling: < 350 lines | RULE-STORY-VERIFY-002 (8 Gates)   */
/* ======================================================== */

/* 1. BEA (5.0s): Roast -> Burn & Panic Shake -> Puff Cheeks & Blow Wind */
@keyframes beaPanicBody {
    0%, 31% { transform: translate(0px, 0px) rotate(0deg); }
    34% { transform: translate(-4px, -3px) rotate(-2.5deg); }
    37% { transform: translate(3.5px, 1px) rotate(2deg); }
    40% { transform: translate(-4.5px, -2px) rotate(-3deg); }
    43% { transform: translate(4px, 1.5px) rotate(2.2deg); }
    46% { transform: translate(-3.5px, -2.5px) rotate(-2.4deg); }
    49% { transform: translate(3px, 1px) rotate(1.8deg); }
    52% { transform: translate(-3px, -1.5px) rotate(-2deg); }
    55% { transform: translate(2.5px, 0.5px) rotate(1.5deg); }
    59%, 63% { transform: translate(-2px, -2px) rotate(-1.5deg); }
    65%, 83% { transform: translate(3px, 1px) rotate(2deg); }
    90%, 100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes beaStoryUpperArm {
    0%, 18% { transform: rotate(12deg); }
    26%, 32% { transform: rotate(16deg); }
    35% { transform: rotate(-16deg); }
    38% { transform: rotate(-6deg); }
    41% { transform: rotate(-20deg); }
    44% { transform: rotate(-5deg); }
    47% { transform: rotate(-19deg); }
    50% { transform: rotate(-7deg); }
    53% { transform: rotate(-17deg); }
    56% { transform: rotate(-8deg); }
    60%, 84% { transform: rotate(-6deg); }
    94%, 100% { transform: rotate(12deg); }
}
@keyframes beaStoryForearm {
    0%, 32% { transform: rotate(6deg); }
    35% { transform: rotate(-34deg); }
    38% { transform: rotate(-12deg); }
    41% { transform: rotate(-38deg); }
    44% { transform: rotate(-10deg); }
    47% { transform: rotate(-36deg); }
    50% { transform: rotate(-14deg); }
    53% { transform: rotate(-32deg); }
    56% { transform: rotate(-16deg); }
    60%, 64% { transform: rotate(-13deg); }
    68% { transform: rotate(-10deg); }
    72% { transform: rotate(-13deg); }
    76% { transform: rotate(-11deg); }
    84% { transform: rotate(-13deg); }
    94%, 100% { transform: rotate(6deg); }
}
@keyframes beaStoryHead {
    0%, 31% { transform: rotate(2deg) translate(0px, 0px); }
    34% { transform: rotate(-8deg) translate(-5px, -2px); }
    37% { transform: rotate(4deg) translate(3px, 1px); }
    40% { transform: rotate(-9deg) translate(-5px, -2px); }
    43% { transform: rotate(3.5deg) translate(2.5px, 1px); }
    46% { transform: rotate(-7.5deg) translate(-4px, -1px); }
    49% { transform: rotate(3deg) translate(2px, 0px); }
    53% { transform: rotate(-6deg) translate(-3px, -1px); }
    57% { transform: rotate(2deg) translate(1px, 0px); }
    59%, 63% { transform: rotate(-5deg) translate(-3px, -2px) scale(1.04); }
    65%, 83% { transform: rotate(5deg) translate(6px, 2px); }
    92%, 100% { transform: rotate(2deg) translate(0px, 0px); }
}
@keyframes beaEyesNormal { 0%, 31%, 61%, 100% { opacity: 1; } 33%, 58% { opacity: 0; } }
@keyframes beaEyesPanic { 0%, 31%, 61%, 100% { opacity: 0; transform: scale(0.9); } 34%, 58% { opacity: 1; transform: scale(1.08); } }
@keyframes beaPanicSweat {
    0%, 32%, 60%, 100% { transform: translate(0px, 0px) scale(0); opacity: 0; }
    36% { transform: translate(-6px, -4px) scale(1); opacity: 1; }
    44% { transform: translate(-16px, 6px) scale(0.85); opacity: 0.85; }
    48% { transform: translate(-4px, -3px) scale(1.05); opacity: 1; }
    57% { transform: translate(-18px, 10px) scale(0.4); opacity: 0; }
}
@keyframes beaCandyFire {
    0%, 31% { transform: scale(0); opacity: 0; }
    34% { transform: scale(1.35, 1.45) rotate(-14deg); opacity: 1; }
    38% { transform: scale(1.2, 1.35) rotate(16deg); opacity: 1; }
    42% { transform: scale(1.4, 1.5) rotate(-18deg); opacity: 1; }
    46% { transform: scale(1.22, 1.3) rotate(15deg); opacity: 1; }
    50% { transform: scale(1.38, 1.42) rotate(-12deg); opacity: 1; }
    54% { transform: scale(1.25, 1.32) rotate(12deg); opacity: 1; }
    60% { transform: scale(1.3, 1.35) rotate(0deg); opacity: 1; }
    64% { transform: scale(1.48, 0.52) skewX(-45deg) translate(10px, 4px); opacity: 0.96; }
    68% { transform: scale(1.62, 0.38) skewX(-56deg) translate(16px, 6px); opacity: 0.88; }
    71% { transform: scale(1.35, 0.48) skewX(-48deg) translate(12px, 5px); opacity: 0.75; }
    74% { transform: scale(0.9, 0.25) skewX(-60deg) translate(24px, 7px); opacity: 0.45; }
    77%, 100% { transform: scale(0) translate(34px, 8px); opacity: 0; }
}
@keyframes beaFireSparks {
    0%, 62%, 82%, 100% { transform: translate(0px, 0px) scale(0); opacity: 0; }
    65% { transform: translate(6px, -2px) scale(1.1); opacity: 1; }
    72% { transform: translate(28px, -8px) scale(0.9); opacity: 0.9; }
    79% { transform: translate(48px, -14px) scale(0.2); opacity: 0; }
}
@keyframes beaCandyChar { 0%, 34% { opacity: 0; } 40%, 88% { opacity: 0.9; } 96%, 100% { opacity: 0; } }
@keyframes beaCheekPuff {
    0%, 57%, 86%, 100% { transform: scale(0); opacity: 0; }
    60%, 64% { transform: scale(1.28); opacity: 0.95; }
    68% { transform: scale(1.12); opacity: 0.92; }
    72% { transform: scale(1.22); opacity: 0.95; }
    82% { transform: scale(0.75); opacity: 0.6; }
}
@keyframes beaWindStream1 {
    0%, 62% { transform: translateX(0px) scaleX(0.1); opacity: 0; stroke-dashoffset: 60; }
    65% { transform: translateX(4px) scaleX(0.95); opacity: 0.98; stroke-dashoffset: 30; }
    74% { transform: translateX(14px) scaleX(1.18); opacity: 0.96; stroke-dashoffset: 0; }
    83%, 100% { transform: translateX(30px) scaleX(1.35); opacity: 0; stroke-dashoffset: -30; }
}
@keyframes beaWindStream2 {
    0%, 64% { transform: translateX(0px) scaleX(0.1); opacity: 0; stroke-dashoffset: 50; }
    68% { transform: translateX(6px) scaleX(1.05); opacity: 0.95; stroke-dashoffset: 20; }
    77% { transform: translateX(18px) scaleX(1.25); opacity: 0.9; stroke-dashoffset: -10; }
    85%, 100% { transform: translateX(36px) scaleX(1.4); opacity: 0; stroke-dashoffset: -40; }
}
@keyframes beaWindPuffs {
    0%, 62% { transform: translate(0px, 0px) scale(0.25); opacity: 0; }
    66% { transform: translate(18px, -2px) scale(0.95); opacity: 0.88; }
    74% { transform: translate(46px, -5px) scale(1.35); opacity: 0.75; }
    84%, 100% { transform: translate(74px, -9px) scale(1.75); opacity: 0; }
}
@keyframes beaSmokeAfter {
    0%, 73% { transform: translate(0px, 0px) scale(0.3); opacity: 0; }
    79% { transform: translate(6px, -10px) scale(0.95); opacity: 0.88; }
    88% { transform: translate(14px, -24px) scale(1.3); opacity: 0.65; }
    97%, 100% { transform: translate(22px, -42px) scale(1.65); opacity: 0; }
}
@keyframes beaMouthNormal { 0%, 32%, 86%, 100% { opacity: 1; } 34%, 84% { opacity: 0; } }
@keyframes beaMouthShock { 0%, 32%, 59%, 100% { opacity: 0; transform: scale(0.8); } 35%, 56% { opacity: 1; transform: scale(1.08); } }
@keyframes beaMouthBlow { 0%, 58%, 86%, 100% { opacity: 0; } 61%, 83% { opacity: 1; } }
@keyframes alertPop {
    0%, 32%, 59%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.25) rotate(-10deg); opacity: 1; }
    39% { transform: scale(1.15) rotate(10deg); opacity: 1; }
    43% { transform: scale(1.25) rotate(-8deg); opacity: 1; }
    47% { transform: scale(1.15) rotate(8deg); opacity: 1; }
    52% { transform: scale(1.2) rotate(-6deg); opacity: 1; }
    56% { transform: scale(1.1) rotate(0deg); opacity: 1; }
}

/* 2. LEO (5.2s): Read -> Glasses Slip -> Push Glasses & Eureka Bulb */
@keyframes leoStoryHead {
    0%, 32% { transform: rotate(0deg) translateY(0); }
    38%, 62% { transform: rotate(7deg) translateY(6px); }
    68%, 88% { transform: rotate(-3deg) translateY(-2px); }
    96%, 100% { transform: rotate(0deg) translateY(0); }
}
@keyframes leoGlassesSlip {
    0%, 36% { transform: translateY(0px) rotate(0deg); }
    44%, 68% { transform: translateY(7.5px) rotate(3.5deg); }
    73%, 100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes leoPushArm { 0%, 58%, 88%, 100% { transform: rotate(0deg); } 66%, 78% { transform: rotate(28deg); } }
@keyframes leoPushForearm { 0%, 58%, 88%, 100% { transform: rotate(0deg); } 66%, 78% { transform: rotate(-64deg); } }
@keyframes leoLensGlint {
    0%, 70%, 88%, 100% { transform: translateX(-18px); opacity: 0; }
    75% { transform: translateX(0px); opacity: 0.95; }
    83% { transform: translateX(18px); opacity: 0; }
}
@keyframes leoIdeaBulb {
    0%, 70%, 95%, 100% { transform: scale(0) translateY(8px); opacity: 0; }
    76%, 89% { transform: scale(1.18) translateY(0px); opacity: 1; }
}
@keyframes leoMouthNormal { 0%, 38%, 94%, 100% { opacity: 1; } 42%, 90% { opacity: 0; } }
@keyframes leoMouthSurprise { 0%, 38%, 72%, 100% { opacity: 0; } 42%, 68% { opacity: 1; } }
@keyframes leoMouthSmile { 0%, 70%, 95%, 100% { opacity: 0; } 74%, 91% { opacity: 1; } }

/* 3. MIKO (4.8s): Lofi Chill -> Bass Drop & Equalizer -> Smile */
@keyframes mikoStoryHead {
    0%, 36% { transform: rotate(-3.5deg) translateY(0); }
    43% { transform: rotate(11deg) translateY(7px) scale(1.03); }
    51% { transform: rotate(-9deg) translateY(-3px) scale(1.03); }
    59% { transform: rotate(12deg) translateY(8px) scale(1.03); }
    67% { transform: rotate(-8deg) translateY(-3px) scale(1.03); }
    75% { transform: rotate(9deg) translateY(5px); }
    84%, 100% { transform: rotate(-3.5deg) translateY(0); }
}
@keyframes mikoStoryTapArm {
    0%, 18%, 36%, 86%, 100% { transform: rotate(0deg); }
    9%, 27%, 93% { transform: rotate(-10deg); }
    42%, 56%, 70% { transform: rotate(-22deg); }
    49%, 63%, 77% { transform: rotate(4deg); }
}
@keyframes mikoStoryHoldArm { 0%, 36%, 84%, 100% { transform: rotate(0deg); } 42%, 76% { transform: rotate(6deg); } }
@keyframes mikoBassWave {
    0%, 38%, 82%, 100% { transform: scale(0.78); opacity: 0; }
    46%, 68% { transform: scale(1.32); opacity: 0.95; }
    78% { transform: scale(1.58); opacity: 0; }
}
@keyframes mikoEqBars {
    0%, 38%, 82%, 100% { transform: scaleY(0.25); opacity: 0.2; }
    45%, 61%, 73% { transform: scaleY(1.35); opacity: 1; }
    53%, 67% { transform: scaleY(0.55); opacity: 0.85; }
}
@keyframes mikoMouthChill { 0%, 37%, 82%, 100% { opacity: 1; } 41%, 78% { opacity: 0; } }
@keyframes mikoMouthSing { 0%, 37%, 82%, 100% { opacity: 0; } 41%, 78% { opacity: 1; } }

/* 4. OSCAR (5.0s): Squat Prep -> Heavy Struggle Tremor -> Lockout & Star */
@keyframes oscarStoryTorso {
    0%, 24%, 94%, 100% { transform: translateY(0px) scaleY(1); }
    32%, 60% { transform: translateY(7px) scale(1.03, 0.95); }
    68%, 86% { transform: translateY(-3px) scale(0.98, 1.02); }
}
@keyframes oscarStoryBarbell {
    0%, 24% { transform: translateY(12px); }
    34% { transform: translateY(-3px) rotate(-2.2deg); }
    41% { transform: translateY(-5px) rotate(2.4deg); }
    48% { transform: translateY(-4px) rotate(-2.4deg); }
    55% { transform: translateY(-6px) rotate(2.0deg); }
    66%, 86% { transform: translateY(-25px) rotate(0deg); }
    96%, 100% { transform: translateY(12px); }
}
@keyframes oscarStoryUpperL { 0%, 24%, 96%, 100% { transform: rotate(-18deg); } 34%, 56% { transform: rotate(12deg); } 66%, 86% { transform: rotate(45deg); } }
@keyframes oscarStoryForeL { 0%, 24%, 96%, 100% { transform: rotate(18deg); } 34%, 56% { transform: rotate(-12deg); } 66%, 86% { transform: rotate(-45deg); } }
@keyframes oscarStoryUpperR { 0%, 24%, 96%, 100% { transform: rotate(18deg); } 34%, 56% { transform: rotate(-12deg); } 66%, 86% { transform: rotate(-45deg); } }
@keyframes oscarStoryForeR { 0%, 24%, 96%, 100% { transform: rotate(-18deg); } 34%, 56% { transform: rotate(12deg); } 66%, 86% { transform: rotate(45deg); } }
@keyframes oscarRedFace { 0%, 26%, 68%, 100% { opacity: 0; } 36%, 62% { opacity: 0.58; } }
@keyframes oscarMouthGrit { 0%, 64%, 94%, 100% { opacity: 1; } 67%, 90% { opacity: 0; } }
@keyframes oscarMouthWin { 0%, 64%, 94%, 100% { opacity: 0; } 67%, 90% { opacity: 1; } }
@keyframes oscarWinStar { 0%, 64%, 92%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 70%, 85% { transform: scale(1.28) rotate(22deg); opacity: 1; } }

/* 5. HANA (4.8s): Paint Canvas -> Paint Splash on Nose -> Laugh ^ ^ */
@keyframes hanaStoryUpperArm {
    0%, 20% { transform: rotate(-5deg); }
    30% { transform: rotate(10deg); }
    38% { transform: rotate(-12deg); }
    45% { transform: rotate(18deg); }
    52%, 82% { transform: rotate(-14deg); }
    92%, 100% { transform: rotate(-5deg); }
}
@keyframes hanaStoryForearm { 0%, 38% { transform: rotate(0deg); } 45% { transform: rotate(16deg); } 52%, 82% { transform: rotate(-12deg); } 92%, 100% { transform: rotate(0deg); } }
@keyframes hanaStoryHead {
    0%, 44% { transform: rotate(-1.5deg) translateY(0); }
    49%, 64% { transform: rotate(-7deg) translateX(-4px); }
    68%, 88% { transform: rotate(4deg) translateY(-3px); }
    95%, 100% { transform: rotate(-1.5deg) translateY(0); }
}
@keyframes hanaPaintFly {
    0%, 43% { transform: translate(0px, 0px) scale(0.2); opacity: 0; }
    46% { transform: translate(-42px, -22px) scale(1.1); opacity: 1; }
    50% { transform: translate(-88px, -6px) scale(0.9); opacity: 1; }
    52%, 100% { transform: translate(-88px, -6px) scale(0); opacity: 0; }
}
@keyframes hanaPaintNose {
    0%, 49% { transform: scale(0); opacity: 0; }
    52% { transform: scale(1.3); opacity: 1; }
    58%, 88% { transform: scale(1); opacity: 1; }
    95%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes hanaEyesNormal { 0%, 62%, 92%, 100% { opacity: 1; } 66%, 88% { opacity: 0; } }
@keyframes hanaEyesLaugh { 0%, 62%, 92%, 100% { opacity: 0; } 66%, 88% { opacity: 1; } }
@keyframes hanaMouthNormal { 0%, 62%, 92%, 100% { opacity: 1; } 66%, 88% { opacity: 0; } }
@keyframes hanaMouthLaugh { 0%, 62%, 92%, 100% { opacity: 0; } 66%, 88% { opacity: 1; } }

/* 6. MIA (5.0s): Chest Shake -> Lid Burst & Light Beam -> Hoist Trophy */
@keyframes miaChestShake {
    0%, 10% { transform: translate(0px, 0px) rotate(0deg); }
    14% { transform: translate(-2px, -1px) rotate(-1.8deg); }
    18% { transform: translate(2.2px, 0px) rotate(2deg); }
    22% { transform: translate(-3px, -1.5px) rotate(-2.8deg); }
    26% { transform: translate(3.2px, -1px) rotate(3deg); }
    30% { transform: translate(-3.8px, -2px) rotate(-3.5deg); }
    33% { transform: translate(3.8px, -2px) rotate(3.5deg); }
    36%, 100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes miaChestLid { 0%, 34% { transform: translateY(8px) rotate(0deg); } 40%, 88% { transform: translateY(-10px) rotate(16deg); } 96%, 100% { transform: translateY(8px) rotate(0deg); } }
@keyframes miaLightBeam { 0%, 35%, 90%, 100% { transform: scaleY(0); opacity: 0; } 42%, 82% { transform: scaleY(1); opacity: 0.75; } }
@keyframes miaStoryUpperArm { 0%, 38% { transform: rotate(14deg); } 46%, 86% { transform: rotate(-18deg); } 95%, 100% { transform: rotate(14deg); } }
@keyframes miaStoryForearm { 0%, 38% { transform: rotate(8deg); } 46%, 86% { transform: rotate(-16deg); } 95%, 100% { transform: rotate(8deg); } }
@keyframes miaStoryHead { 0%, 35% { transform: rotate(4deg) translateY(2px); } 44%, 86% { transform: rotate(-4deg) translateY(-3px); } 95%, 100% { transform: rotate(4deg) translateY(2px); } }
@keyframes miaMouthCurious { 0%, 38%, 92%, 100% { opacity: 1; } 42%, 88% { opacity: 0; } }
@keyframes miaMouthCheer { 0%, 38%, 92%, 100% { opacity: 0; } 42%, 88% { opacity: 1; } }

/* 7. VIKRAM (5.2s): Levitate -> Card Bonk Turban -> Mudra Glow */
@keyframes vikramStoryHover { 0%, 36% { transform: translateY(-14px); } 43%, 62% { transform: translateY(3px) rotate(1.8deg); } 76%, 100% { transform: translateY(-14px); } }
@keyframes vikramCardBonk {
    0%, 34% { transform: translate(0, 0) rotate(-14deg); }
    42% { transform: translate(86px, -40px) rotate(32deg); }
    52%, 66% { transform: translate(62px, -16px) rotate(-22deg); }
    80%, 100% { transform: translate(0, 0) rotate(-14deg); }
}
@keyframes vikramBonkRipple { 0%, 40%, 66%, 100% { transform: scale(0.3); opacity: 0; } 45% { transform: scale(1.1); opacity: 1; } 58% { transform: scale(1.65); opacity: 0; } }
@keyframes vikramMudraGlow { 0%, 62%, 90%, 100% { transform: scale(0.5); opacity: 0; } 68%, 82% { transform: scale(1.35); opacity: 0.85; } }
@keyframes vikramEyeClosed { 0%, 39%, 68%, 100% { opacity: 1; } 42%, 64% { opacity: 0; } }
@keyframes vikramEyePeek { 0%, 39%, 68%, 100% { opacity: 0; } 42%, 64% { opacity: 1; } }

/* 8. EDDY (4.8s): Multi-Joint Run -> Rock Trip -> Speed Aura & Finish Tape */
@keyframes eddyStoryTorso {
    0%, 34% { transform: translateY(-5px) rotate(8deg); }
    42%, 55% { transform: translateY(11px) rotate(26deg); }
    64%, 88% { transform: translateY(-8px) rotate(14deg) scale(1.03); }
    100% { transform: translateY(-5px) rotate(8deg); }
}
@keyframes eddyRockTrip { 0%, 24% { transform: translateX(140px); opacity: 0; } 28% { opacity: 1; } 42% { transform: translateX(0px); opacity: 1; } 58%, 100% { transform: translateX(-140px); opacity: 0; } }
@keyframes eddySpeedAura { 0%, 60%, 92%, 100% { opacity: 0; transform: scaleX(0.6); } 66%, 86% { opacity: 0.9; transform: scaleX(1.15); } }
@keyframes eddyFinishTape { 0%, 62% { transform: translateX(150px); opacity: 0; } 72% { transform: translateX(18px); opacity: 1; } 84%, 100% { transform: translateX(-150px) scaleY(0.45); opacity: 0; } }
@keyframes eddyMouthRun { 0%, 36%, 92%, 100% { opacity: 1; } 40%, 88% { opacity: 0; } }
@keyframes eddyMouthShock { 0%, 36%, 62%, 100% { opacity: 0; } 40%, 58% { opacity: 1; } }
@keyframes eddyMouthWin { 0%, 60%, 92%, 100% { opacity: 0; } 64%, 88% { opacity: 1; } }

/* 9. LILY (5.4s): Wish -> Release Sky Lantern -> Wave & Shooting Star */
@keyframes lilyStoryArmL { 0%, 36% { transform: rotate(8deg); } 52%, 84% { transform: rotate(-18deg); } 94%, 100% { transform: rotate(8deg); } }
@keyframes lilyStoryArmR { 0%, 36% { transform: rotate(8deg); } 52%, 68% { transform: rotate(-22deg); } 75% { transform: rotate(-10deg); } 83% { transform: rotate(-24deg); } 94%, 100% { transform: rotate(8deg); } }
@keyframes lilyStoryLantern {
    0%, 36% { transform: translate(-26px, 42px) scale(0.92); opacity: 0.96; }
    52% { transform: translate(-14px, 16px) scale(0.98); opacity: 1; }
    72% { transform: translate(16px, -36px) scale(1.04); opacity: 1; }
    88% { transform: translate(34px, -88px) scale(0.76); opacity: 0; }
    90% { transform: translate(-26px, 52px) scale(0.5); opacity: 0; }
    100% { transform: translate(-26px, 42px) scale(0.92); opacity: 0.96; }
}
@keyframes lilyFaceGlow { 0%, 12%, 75%, 100% { opacity: 0.15; } 22%, 56% { opacity: 0.65; } }
@keyframes lilyEyesWish { 0%, 34%, 95%, 100% { opacity: 1; } 38%, 91% { opacity: 0; } }
@keyframes lilyEyesOpen { 0%, 34%, 95%, 100% { opacity: 0; } 38%, 91% { opacity: 1; } }
@keyframes lilyShootingStar { 0%, 66%, 94%, 100% { transform: translate(0, 0) scale(0.4); opacity: 0; } 72% { opacity: 1; } 86% { transform: translate(-115px, 38px) scale(1.1); opacity: 0; } }

/* 10. KOJI (4.8s): Strum -> Pick Toss 720deg -> Catch & Chord Burst */
@keyframes kojiStoryStrum {
    0%, 12% { transform: rotate(-14deg); }
    20% { transform: rotate(18deg); }
    28% { transform: rotate(-16deg); }
    38% { transform: rotate(28deg); }
    45%, 70% { transform: rotate(-22deg); }
    75% { transform: rotate(12deg); }
    86%, 100% { transform: rotate(-14deg); }
}
@keyframes kojiPickFly {
    0%, 37%, 76%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    54% { transform: translate(16px, -88px) rotate(360deg) scale(1.28); opacity: 1; }
    72% { transform: translate(3px, -10px) rotate(720deg) scale(1.08); opacity: 1; }
}
@keyframes kojiStoryHead { 0%, 36% { transform: rotate(0deg) translateY(0); } 44%, 68% { transform: rotate(-8deg) translateY(-4px); } 75%, 90% { transform: rotate(4deg) translateY(2px); } 100% { transform: rotate(0deg) translateY(0); } }
@keyframes kojiEyeTrack { 0%, 36%, 76%, 100% { transform: translate(0, 0); } 45%, 68% { transform: translate(1.5px, -3.5px); } }
@keyframes kojiMouthChill { 0%, 38%, 74%, 100% { opacity: 1; } 42%, 70% { opacity: 0; } }
@keyframes kojiMouthShock { 0%, 38%, 74%, 100% { opacity: 0; } 42%, 70% { opacity: 1; } }
@keyframes kojiChordBurst { 0%, 72%, 94%, 100% { transform: scale(0.6); opacity: 0; } 77%, 85% { transform: scale(1.25); opacity: 0.95; } }