/* ============================================
   HUBI TIME TRACKER — CSS Cat Animations
   ============================================ */

/* --- Base Cat Container --- */
.hubi-cat {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-block;
    --cat-main: var(--orange-primary, #FF8C42);
    --cat-dark: var(--orange-glow, #FF6B1A);
    --cat-light: var(--orange-light, #FFD4A3);
    --cat-face: var(--cream, #FFF5E6);
    --cat-lines: var(--chocolate, #3D2914);
    
    /* Center baseline */
    margin: 0 auto;
    transform-origin: center bottom;
    transition: transform 0.3s;
}

/* Scaling utility if needed */
.hubi-cat.sm { transform: scale(0.6); }
.hubi-cat.lg { transform: scale(1.2); }

/* --- Cat Body Parts --- */
.cat-body {
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: 50px;
    height: 30px;
    background: var(--cat-main);
    border-radius: 40px;
    box-shadow: inset -5px -5px 0 0 rgba(0,0,0,0.05);
    z-index: 2;
    transform-origin: center;
    transition: transform 0.6s ease;
}

/* --- Tail --- */
.cat-tail {
    position: absolute;
    bottom: 28px;
    left: 55px;
    width: 38px;
    height: 8px;
    background: var(--cat-main);
    border-radius: 4px 8px 8px 4px;
    transform-origin: 0% 50%;
    transform: rotate(-45deg);
    z-index: 1;
    overflow: hidden;
    transition: transform 0.6s ease, z-index 0s 0s;
}

/* Slow, graceful curl when settling into sleep */
.sleeping .cat-tail, .on-break .cat-tail {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.6s;
}

/* Striping on tail */
.cat-tail::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 6px,
        var(--cat-dark) 6px,
        var(--cat-dark) 11px
    );
    opacity: 0.3;
}

/* --- Head --- */
.cat-head {
    position: absolute;
    bottom: 15px;
    left: -10px;
    width: 38px;
    height: 36px;
    background: var(--cat-main);
    border-radius: 50% 50% 45% 45%;
    z-index: 3;
    transform-origin: center bottom;
    box-shadow: inset -2px -4px 0 0 rgba(0,0,0,0.05);
    transition: transform 0.6s ease;
}

/* Face area (white/cream part) */
.cat-face {
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 30px;
    height: 20px;
    background: transparent;
    border-radius: 50% 50% 45% 45%;
}

/* Chest (white patch) */
.cat-chest {
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 22px;
    height: 18px;
    background: var(--cream, #FFF5E6);
    border-radius: 50% 50% 40% 40%;
    z-index: 2;
}

/* Ears */
.cat-ear {
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 16px solid var(--cat-main);
    z-index: -1;
    transition: transform 0.5s ease;
}

.cat-ear::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid var(--cat-light);
}

.cat-ear.left {
    left: 2px;
    transform: rotate(-20deg);
}

.cat-ear.right {
    right: 2px;
    transform: rotate(20deg);
}

/* Eyes */
.cat-eye {
    position: absolute;
    top: 4px;
    width: 5px;
    height: 5px;
    background: var(--cat-lines);
    border-radius: 50%;
    transition: all 0.5s ease;
}
.cat-eye.left { left: 6px; }
.cat-eye.right { right: 6px; }

/* Nose */
.cat-nose {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 4px;
    background: var(--cat-light);
    border-radius: 50%;
}

/* Mouth */
.cat-mouth {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 4px;
    border-bottom: 2px solid var(--cat-lines);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 0 0 50% 50%;
}

/* Whiskers */
.cat-whiskers {
    position: absolute;
    top: 10px;
    width: 8px;
    height: 1px;
    background: var(--cat-lines);
    opacity: 0.3;
}
.cat-whiskers::before, .cat-whiskers::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 1px;
    background: var(--cat-lines);
}
.cat-whiskers::before { top: -4px; transform: rotate(10deg); }
.cat-whiskers::after { top: 4px; transform: rotate(-10deg); }
.cat-whiskers.left { left: -6px; transform: rotate(5deg); }
.cat-whiskers.right { right: -6px; transform: rotate(-5deg) scaleX(-1); }

/* --- Legs --- */
.cat-leg {
    position: absolute;
    bottom: -10px;
    width: 10px;
    height: 18px;
    background: var(--cat-main);
    border-radius: 5px;
    transform-origin: top center;
    z-index: 1;
    transition: transform 0.6s ease;
}

/* Slight shading for back legs */
.cat-leg.back { background: var(--cat-dark); z-index: 0; }
.cat-leg.front { background: var(--cat-main); box-shadow: inset -1px -2px 0 0 rgba(0,0,0,0.05); }

/* Leg placements */
.cat-leg.back.left { left: 8px; }
.cat-leg.front.left { left: 14px; }
.cat-leg.back.right { left: 30px; }
.cat-leg.front.right { left: 36px; }


/* ============================================
   ANIMATION STATES
   ============================================ */

/* --- ANIMATION: SITTING --- */
/* Cat sits with back legs tucked, body lower, tail active */
.sitting .cat-body {
    transform: scaleX(0.95) scaleY(0.85) translateY(3px);
}

.sitting .cat-head {
    transform: translateY(2px);
}

.sitting .cat-leg.back {
    transform: rotate(50deg) translateY(-5px);
}

.sitting .cat-leg.front {
    transform: rotate(5deg);
}

.sitting .cat-tail {
    animation: tail-sitting 2.5s ease-in-out infinite;
}

.sitting .cat-eye {
    animation: blink 4s infinite;
}

@keyframes tail-sitting {
    0% { transform: rotate(-45deg); }
    15% { transform: rotate(-20deg); }
    30% { transform: rotate(-40deg); }
    50% { transform: rotate(-15deg); }
    65% { transform: rotate(-35deg); }
    80% { transform: rotate(-25deg); }
    100% { transform: rotate(-45deg); }
}

/* --- ANIMATION: IDLE --- */
.idle .cat-tail {
    animation: tail-idle 3s ease-in-out infinite;
}
.idle .cat-eye, .working .cat-eye {
    animation: blink 4s infinite;
}

@keyframes tail-idle {
    0% { transform: rotate(-45deg); }
    20% { transform: rotate(-30deg); }
    40% { transform: rotate(-40deg); }
    60% { transform: rotate(-25deg); }
    80% { transform: rotate(-42deg); }
    100% { transform: rotate(-45deg); }
}

@keyframes blink {
    0%, 96%, 100% { height: 5px; top: 4px; }
    98% { height: 1px; top: 6px; }
}

/* --- ANIMATION: WALKING --- */
.walking .cat-leg.front.left { animation: leg-swing 0.8s infinite linear; }
.walking .cat-leg.front.right { animation: leg-swing 0.8s infinite linear 0.4s; }
.walking .cat-leg.back.left { animation: leg-swing 0.8s infinite linear 0.4s; }
.walking .cat-leg.back.right { animation: leg-swing 0.8s infinite linear; }
.walking .cat-body { animation: body-bob 0.4s infinite alternate ease-in-out; }
.walking .cat-head { animation: head-bob 0.4s infinite alternate ease-in-out; }
.walking .cat-tail { animation: tail-walk 0.8s infinite ease-in-out; }

@keyframes leg-swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(35deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-35deg); }
    100% { transform: rotate(0deg); }
}

@keyframes body-bob {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

@keyframes head-bob {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}

@keyframes tail-walk {
    0%, 100% { transform: rotate(-35deg); }
    25% { transform: rotate(-55deg); }
    50% { transform: rotate(-30deg); }
    75% { transform: rotate(-60deg); }
}

/* --- ANIMATION: CHASING --- */
.chasing .cat-leg.front.left { animation: leg-swing 0.3s infinite linear; }
.chasing .cat-leg.front.right { animation: leg-swing 0.3s infinite linear 0.15s; }
.chasing .cat-leg.back.left { animation: leg-swing 0.3s infinite linear 0.15s; }
.chasing .cat-leg.back.right { animation: leg-swing 0.3s infinite linear; }
.chasing .cat-body { animation: body-bob 0.15s infinite alternate ease-in-out; }
.chasing .cat-tail { animation: tail-chase 0.3s infinite ease-in-out; }
.chasing .cat-ear { transform: rotate(-50deg); }
.chasing .cat-eye { height: 8px; width: 8px; border-radius: 50%; top: 2px; }

/* --- ANIMATION: SLEEPING / ON-BREAK --- */
.sleeping .cat-body, .on-break .cat-body {
    transform: scaleX(1.05) scaleY(0.9);
    animation: breathing 3s infinite ease-in-out;
}

.sleeping .cat-head, .on-break .cat-head {
    transform: translateY(12px) rotate(15deg);
}

.sleeping .cat-eye, .on-break .cat-eye {
    height: 1px;
    top: 8px;
    background: var(--cat-dark);
}

.sleeping .cat-tail, .on-break .cat-tail {
    transform: rotate(-180deg) translateY(-8px);
    z-index: 5;
}

.sleeping .cat-leg, .on-break .cat-leg {
    transform: rotate(70deg) translateY(-8px);
}

@keyframes breathing {
    0%, 100% { transform: scaleX(1.05) scaleY(0.9) translateY(0); }
    50% { transform: scaleX(1.08) scaleY(0.95) translateY(-2px); }
}

/* --- ANIMATION: EATING --- */
.eating .cat-head {
    animation: eating-head 0.8s infinite ease-in-out;
}
.eating .cat-tail {
    animation: eating-tail 2s ease-in-out infinite;
}

@keyframes eating-head {
    0%, 100% { transform: translateY(10px) rotate(5deg); }
    50% { transform: translateY(15px) rotate(15deg); }
}

@keyframes eating-tail {
    0%, 100% { transform: rotate(-20deg); }
    25% { transform: rotate(-40deg); }
    50% { transform: rotate(-15deg); }
    75% { transform: rotate(-45deg); }
}

/* --- WORKING BOUNCE --- */
.working .cat-body {
    animation: body-bob 1s infinite alternate ease-in-out;
}
.working .cat-tail {
    animation: tail-idle 2s infinite ease-in-out;
}

/* Chasing tail keyframes */
@keyframes tail-chase {
    0%, 100% { transform: rotate(-10deg); }
    25% { transform: rotate(-30deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(-25deg); }
}

/* --- ANIMATION: PETTED --- */
.petted .cat-eye {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: 2px;
}

.petted .cat-ear.left {
    transform: rotate(-30deg) translateY(-3px);
}

.petted .cat-ear.right {
    transform: rotate(30deg) translateY(-3px);
}

.petted .cat-body {
    animation: purr-squish 0.3s ease-in-out infinite alternate;
}

.petted .cat-tail {
    animation: tail-happy 0.6s ease-in-out infinite;
}

.petted .cat-head {
    animation: head-nuzzle 0.5s ease-in-out infinite alternate;
}

@keyframes purr-squish {
    0% { transform: scaleX(1) scaleY(1); }
    100% { transform: scaleX(1.06) scaleY(0.94); }
}

@keyframes tail-happy {
    0%, 100% { transform: rotate(-20deg); }
    25% { transform: rotate(-55deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(-50deg); }
}

@keyframes head-nuzzle {
    0% { transform: rotate(-5deg) translateY(1px); }
    100% { transform: rotate(5deg) translateY(-1px); }
}

/* --- ANIMATION: GROOMING --- */
.grooming .cat-head {
    animation: grooming-head 1.2s infinite ease-in-out;
}
.grooming .cat-leg.front.left {
    animation: grooming-paw 1.2s infinite ease-in-out;
    z-index: 10;
}
.grooming .cat-tail {
    animation: tail-idle 2s infinite ease-in-out;
}
.grooming .cat-eye {
    height: 2px;
    top: 7px;
}
@keyframes grooming-head {
    0%, 100% { transform: translateY(2px) rotate(5deg); }
    50% { transform: translateY(6px) rotate(12deg); }
}
@keyframes grooming-paw {
    0%, 100% { transform: rotate(0deg); }
    30%, 70% { transform: rotate(-70deg) translate(-8px, -10px); }
}

/* --- ANIMATION: STRETCHING --- */
.stretching .cat-body {
    animation: stretching-body 2.5s ease-in-out forwards;
}
.stretching .cat-head {
    animation: stretching-head 2.5s ease-in-out forwards;
}
.stretching .cat-leg.front {
    animation: stretching-legs-front 2.5s ease-in-out forwards;
}
.stretching .cat-leg.back {
    animation: stretching-legs-back 2.5s ease-in-out forwards;
}
.stretching .cat-tail {
    animation: stretching-tail 2.5s ease-in-out forwards;
}
.stretching .cat-mouth {
    animation: stretching-yawn 2.5s ease-in-out forwards;
}
@keyframes stretching-body {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    25%, 55% { transform: scaleX(1.2) scaleY(0.85) translateY(3px); }
    75% { transform: scaleX(0.95) scaleY(1.1) translateY(-3px); }
}
@keyframes stretching-head {
    0%, 100% { transform: translate(0, 0); }
    25%, 55% { transform: translate(-8px, 5px) rotate(5deg); }
    75% { transform: translate(2px, -3px); }
}
@keyframes stretching-legs-front {
    0%, 100% { transform: rotate(0); }
    25%, 55% { transform: rotate(30deg) translate(-8px, -3px); }
}
@keyframes stretching-legs-back {
    0%, 100% { transform: rotate(0); }
    25%, 55% { transform: rotate(-15deg); }
}
@keyframes stretching-tail {
    0%, 100% { transform: rotate(-45deg); }
    25%, 55% { transform: rotate(-70deg); }
    75% { transform: rotate(-30deg); }
}
@keyframes stretching-yawn {
    0%, 70%, 100% { transform: translateX(-50%) scaleY(1); }
    30%, 55% { transform: translateX(-50%) scaleY(2.5); border-radius: 0 0 50% 50%; }
}

/* --- ANIMATION: HUNTING --- */
.hunting .cat-body {
    transform: scaleX(1.05) scaleY(0.8) translateY(5px);
    animation: hunting-wiggle 0.3s infinite ease-in-out;
}
.hunting .cat-head {
    transform: translateY(6px) rotate(3deg);
}
.hunting .cat-leg {
    transform: rotate(30deg) translateY(-5px);
}
.hunting .cat-tail {
    animation: tail-twitch 0.5s infinite ease-in-out;
    transform-origin: 0% 50%;
}
.hunting .cat-eye {
    height: 8px; width: 8px; top: 2px;
}
.hunting .cat-ear.left { transform: rotate(-10deg); }
.hunting .cat-ear.right { transform: rotate(10deg); }
@keyframes hunting-wiggle {
    0%, 100% { transform: scaleX(1.05) scaleY(0.8) translateY(5px); }
    50% { transform: scaleX(1.05) scaleY(0.8) translateX(2px) translateY(4px); }
}
@keyframes tail-twitch {
    0%, 100% { transform: rotate(-45deg); }
    30% { transform: rotate(-30deg); }
    60% { transform: rotate(-50deg); }
}

/* --- ANIMATION: BUTTERFLY --- */
.butterfly .cat-head {
    animation: butterfly-track 4s infinite ease-in-out;
}
.butterfly .cat-eye {
    width: 6px; height: 6px;
    animation: eye-track 4s infinite ease-in-out;
}
.butterfly .cat-tail {
    animation: butterfly-tail 2s infinite ease-in-out;
}
.butterfly .cat-ear.left {
    animation: butterfly-ear-l 4s infinite ease-in-out;
}
.butterfly .cat-ear.right {
    animation: butterfly-ear-r 4s infinite ease-in-out;
}
@keyframes butterfly-track {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    25% { transform: rotate(12deg) translateY(-4px); }
    50% { transform: rotate(-3deg) translateY(-6px); }
    75% { transform: rotate(15deg) translateY(-2px); }
}
@keyframes eye-track {
    0%, 100% { transform: translate(-1px, -1px); }
    25% { transform: translate(2px, -2px); }
    50% { transform: translate(0px, -3px); }
    75% { transform: translate(2px, 0px); }
}
@keyframes butterfly-tail {
    0%, 100% { transform: rotate(-35deg); }
    50% { transform: rotate(-55deg); }
}
@keyframes butterfly-ear-l {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(-30deg); }
}
@keyframes butterfly-ear-r {
    0%, 100% { transform: rotate(20deg); }
    50% { transform: rotate(30deg); }
}

/* --- ANIMATION: BOX --- */
.box .cat-body, .box .cat-leg {
    opacity: 0;
    transition: opacity 0.3s;
}
.box .cat-head {
    animation: box-peek 6s ease-in-out infinite;
    z-index: 6;
}
.box .cat-tail {
    animation: box-tail 3s ease-in-out infinite 1s;
    transform-origin: 0% 50%;
    z-index: -1;
    bottom: 5px;
    left: 30px;
}
.box .cat-eye {
    width: 7px; height: 7px;
    border-radius: 50%;
    top: 2px;
}
.box .cat-ear.left { transform: rotate(-15deg); }
.box .cat-ear.right { transform: rotate(15deg); }
@keyframes box-peek {
    0%, 100% { transform: translateY(18px); }
    15%, 85% { transform: translateY(10px); }
    40%, 60% { transform: translateY(5px) rotate(5deg); }
    50% { transform: translateY(3px) rotate(-3deg); }
}
@keyframes box-tail {
    0%, 100% { transform: rotate(-120deg) translateY(5px); }
    50% { transform: rotate(-150deg) translateY(3px); }
}

/* --- ANIMATION: PRODUCTIVE --- */
.productive .cat-head {
    animation: productive-head 2s ease-in-out infinite;
}
.productive .cat-eye {
    animation: blink 3s infinite;
}
.productive .cat-leg.front.left {
    animation: typing-l 0.4s infinite alternate ease-in-out;
}
.productive .cat-leg.front.right {
    animation: typing-r 0.4s infinite alternate-reverse ease-in-out;
}
.productive .cat-tail {
    animation: tail-idle 2.5s infinite ease-in-out;
}
@keyframes productive-head {
    0%, 100% { transform: translateY(2px) rotate(3deg); }
    50% { transform: translateY(4px) rotate(6deg); }
}
@keyframes typing-l {
    from { transform: rotate(0); }
    to { transform: rotate(-15deg) translateY(-3px); }
}
@keyframes typing-r {
    from { transform: rotate(0); }
    to { transform: rotate(-12deg) translateY(-3px); }
}

/* --- ANIMATION: TREAT --- */
/* Base treat state — alert, excited posture */
.treat .cat-eye {
    width: 8px; height: 8px;
    border-radius: 50%;
    top: 2px;
}
.treat .cat-ear.left { transform: rotate(-10deg) translateY(-2px); }
.treat .cat-ear.right { transform: rotate(10deg) translateY(-2px); }
.treat .cat-tail {
    animation: tail-happy 0.6s ease-in-out infinite;
}

/* Running to tray — fast legs like chasing */
.treat-run .cat-leg.front.left { animation: leg-swing 0.3s infinite linear; }
.treat-run .cat-leg.front.right { animation: leg-swing 0.3s infinite linear 0.15s; }
.treat-run .cat-leg.back.left { animation: leg-swing 0.3s infinite linear 0.15s; }
.treat-run .cat-leg.back.right { animation: leg-swing 0.3s infinite linear; }
.treat-run .cat-body { animation: body-bob 0.15s infinite alternate ease-in-out; }

/* Eating at the tray */
.treat-eat .cat-head {
    animation: eating-head 0.8s infinite ease-in-out;
}
.treat-eat .cat-tail {
    animation: eating-tail 2s ease-in-out infinite;
}
.treat-eat .cat-eye {
    height: 3px;
    top: 6px;
}

/* Happy after eating */
.treat-happy .cat-body {
    animation: purr-squish 0.3s ease-in-out infinite alternate;
}
.treat-happy .cat-head {
    animation: head-nuzzle 0.5s ease-in-out infinite alternate;
}
.treat-happy .cat-eye {
    width: 7px; height: 7px;
    border-radius: 50%;
    top: 2px;
}
.treat-happy .cat-tail {
    animation: tail-happy 0.4s ease-in-out infinite;
}


/* ============================================
   TASK PREVIEW ANIMATIONS (mascot slot)
   ============================================ */

/* --- LERNEN (studying): reading a book, head follows text, page-turn paw --- */
.task-lernen .cat-head {
    animation: lernen-head 3s ease-in-out infinite;
}
.task-lernen .cat-eye {
    height: 3px;
    top: 6px;
    animation: lernen-eyes 3s ease-in-out infinite;
}
.task-lernen .cat-body {
    animation: lernen-body 3s ease-in-out infinite;
}
.task-lernen .cat-leg.front.left {
    animation: lernen-paw 3s ease-in-out infinite;
    z-index: 10;
}
.task-lernen .cat-tail {
    animation: lernen-tail 4s ease-in-out infinite;
}
.task-lernen .cat-ear.left { animation: lernen-ear-l 6s ease-in-out infinite; }
.task-lernen .cat-ear.right { animation: lernen-ear-r 6s ease-in-out infinite; }

@keyframes lernen-head {
    /* Reading left-right, then look up "thinking", back to book */
    0% { transform: translateY(8px) rotate(12deg); }
    15% { transform: translateY(8px) rotate(6deg); }
    30% { transform: translateY(8px) rotate(12deg); }
    45% { transform: translateY(8px) rotate(5deg); }
    60% { transform: translateY(8px) rotate(10deg); }
    72% { transform: translateY(2px) rotate(-5deg); }
    82% { transform: translateY(2px) rotate(-3deg); }
    92% { transform: translateY(6px) rotate(10deg); }
    100% { transform: translateY(8px) rotate(12deg); }
}
@keyframes lernen-eyes {
    /* Squinted while reading, wide open on "aha" moment */
    0%, 60%, 92%, 100% { height: 3px; top: 6px; }
    72% { height: 7px; top: 2px; width: 7px; }
    82% { height: 7px; top: 2px; width: 7px; }
}
@keyframes lernen-body {
    0%, 100% { transform: scaleY(0.95) translateY(2px); }
    72% { transform: scaleY(1) translateY(0); }
}
@keyframes lernen-paw {
    /* Page turn flick */
    0%, 58%, 100% { transform: rotate(0); }
    62% { transform: rotate(-50deg) translate(-10px, -12px); }
    70% { transform: rotate(-20deg) translate(-4px, -4px); }
}
@keyframes lernen-tail {
    0%, 100% { transform: rotate(-40deg); }
    25% { transform: rotate(-30deg); }
    50% { transform: rotate(-48deg); }
    75% { transform: rotate(-25deg); }
}
@keyframes lernen-ear-l {
    0%, 100% { transform: rotate(-15deg); }
    72% { transform: rotate(-3deg) translateY(-4px); }
}
@keyframes lernen-ear-r {
    0%, 100% { transform: rotate(15deg); }
    72% { transform: rotate(3deg) translateY(-4px); }
}

/* --- PUTZEN (cleaning): vigorous scrubbing, whole body into it --- */
.task-putzen .cat-head {
    animation: putzen-head 1.4s ease-in-out infinite;
}
.task-putzen .cat-leg.front.left {
    animation: putzen-paw 0.8s ease-in-out infinite;
    z-index: 10;
}
.task-putzen .cat-leg.front.right {
    animation: putzen-sweep 1.4s ease-in-out infinite;
}
.task-putzen .cat-body {
    animation: putzen-body 1.4s ease-in-out infinite;
}
.task-putzen .cat-tail {
    animation: putzen-tail 1.4s ease-in-out infinite;
}
.task-putzen .cat-eye {
    height: 2px;
    top: 7px;
}
.task-putzen .cat-ear.left { animation: putzen-ear 1.4s ease-in-out infinite; }
.task-putzen .cat-ear.right { animation: putzen-ear 1.4s ease-in-out infinite 0.7s; }

@keyframes putzen-head {
    0%, 100% { transform: translateY(4px) rotate(10deg); }
    30% { transform: translateY(10px) rotate(20deg); }
    60% { transform: translateY(6px) rotate(5deg); }
}
@keyframes putzen-paw {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(-70deg) translate(-12px, -14px); }
    60% { transform: rotate(-30deg) translate(-6px, -4px); }
    100% { transform: rotate(0deg); }
}
@keyframes putzen-sweep {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-35deg) translate(-6px, -5px); }
}
@keyframes putzen-body {
    0%, 100% { transform: scaleX(1) translateX(0); }
    30% { transform: scaleX(0.92) translateX(-4px); }
    60% { transform: scaleX(1.04) translateX(2px); }
}
@keyframes putzen-tail {
    0%, 100% { transform: rotate(-35deg); }
    25% { transform: rotate(-60deg); }
    50% { transform: rotate(-25deg); }
    75% { transform: rotate(-55deg); }
}
@keyframes putzen-ear {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(-30deg) translateY(2px); }
}

/* --- ENTSPANNEN (relaxing): curled-up loaf, head on paws, gentle breathing --- */
.task-entspannen .cat-body {
    transform: scaleX(1.1) scaleY(0.85) translateY(4px);
    animation: entspannen-breathe 3.5s ease-in-out infinite;
}
.task-entspannen .cat-head {
    animation: entspannen-head 4s ease-in-out infinite;
}
.task-entspannen .cat-eye {
    height: 1.5px;
    top: 8px;
    border-radius: 3px;
    animation: entspannen-eyes 7s ease-in-out infinite;
}
.task-entspannen .cat-tail {
    animation: entspannen-tail 5s ease-in-out infinite;
    z-index: 5;
}
.task-entspannen .cat-leg.front {
    transform: rotate(40deg) translateY(-6px);
}
.task-entspannen .cat-leg.back {
    transform: rotate(55deg) translateY(-6px);
}
.task-entspannen .cat-ear.left { transform: rotate(-28deg); }
.task-entspannen .cat-ear.right { transform: rotate(28deg); }

@keyframes entspannen-breathe {
    0%, 100% { transform: scaleX(1.1) scaleY(0.85) translateY(4px); }
    50% { transform: scaleX(1.15) scaleY(0.9) translateY(2px); }
}
@keyframes entspannen-head {
    0%, 100% { transform: translateY(12px) rotate(12deg); }
    50% { transform: translateY(14px) rotate(14deg); }
}
@keyframes entspannen-eyes {
    0%, 88%, 100% { height: 1.5px; top: 8px; }
    92% { height: 4px; top: 5px; }
    95% { height: 1.5px; top: 8px; }
}
@keyframes entspannen-tail {
    0%, 100% { transform: rotate(-175deg) translateY(-6px); }
    50% { transform: rotate(-160deg) translateY(-8px); }
}

/* --- KOCHEN (cooking): stirring pot, sniffing steam, wearing apron --- */
.task-kochen .cat-head {
    animation: kochen-head 1.5s ease-in-out infinite;
}
.task-kochen .cat-leg.front.left {
    animation: kochen-stir 0.8s ease-in-out infinite;
    z-index: 10;
}
.task-kochen .cat-leg.front.right {
    animation: kochen-stir 0.8s ease-in-out infinite 0.4s;
}
.task-kochen .cat-body {
    animation: kochen-body 0.8s ease-in-out infinite;
}
.task-kochen .cat-tail {
    animation: kochen-tail 1s ease-in-out infinite;
}
.task-kochen .cat-eye {
    width: 7px; height: 7px;
    border-radius: 50%;
    top: 2px;
    animation: kochen-eyes 1.5s ease-in-out infinite;
}
.task-kochen .cat-ear.left { transform: rotate(-20deg); }
.task-kochen .cat-ear.right { transform: rotate(20deg); }

@keyframes kochen-head {
    0%, 100% { transform: translateY(4px) rotate(6deg); }
    20% { transform: translateY(10px) rotate(14deg); }
    40% { transform: translateY(6px) rotate(4deg); }
    60% { transform: translateY(8px) rotate(10deg); }
    80% { transform: translateY(3px) rotate(0deg); }
}
@keyframes kochen-stir {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-45deg) translate(-8px, -10px); }
}
@keyframes kochen-body {
    0%, 100% { transform: translateX(0) scaleX(1); }
    25% { transform: translateX(-3px) scaleX(0.96); }
    75% { transform: translateX(3px) scaleX(1.04); }
}
@keyframes kochen-tail {
    0%, 100% { transform: rotate(-20deg); }
    25% { transform: rotate(-55deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(-50deg); }
}
@keyframes kochen-eyes {
    /* Sniff (squint) → delicious! (wide) */
    0%, 100% { width: 7px; height: 7px; top: 2px; }
    20% { width: 4px; height: 2px; top: 6px; }
    50% { width: 8px; height: 8px; top: 1px; }
}
@keyframes kochen-ear {
    0%, 100% { transform: rotate(-10deg) translateY(-2px); }
    50% { transform: rotate(-3deg) translateY(-5px); }
}

/* --- SPORT (exercise): jumping jacks, explosive energy, everything moving --- */
.task-sport .cat-body {
    animation: sport-body 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-head {
    animation: sport-head 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-leg.front.left {
    animation: sport-leg-fl 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-leg.front.right {
    animation: sport-leg-fr 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-leg.back.left {
    animation: sport-leg-bl 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-leg.back.right {
    animation: sport-leg-br 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-tail {
    animation: sport-tail 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.task-sport .cat-eye {
    width: 8px; height: 8px;
    border-radius: 50%;
    top: 1px;
}
.task-sport .cat-ear.left { animation: sport-ear-l 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.task-sport .cat-ear.right { animation: sport-ear-r 0.5s cubic-bezier(0.3, 0, 0.3, 1) infinite; }

@keyframes sport-body {
    0%, 100% { transform: scaleY(1) translateY(0); }
    25% { transform: scaleY(0.78) translateY(6px); }
    55% { transform: scaleY(1.15) translateY(-8px); }
}
@keyframes sport-head {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(5px); }
    55% { transform: translateY(-10px); }
}
@keyframes sport-leg-fl {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(25deg); }
    55% { transform: rotate(-30deg) translateY(-8px); }
}
@keyframes sport-leg-fr {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(20deg); }
    55% { transform: rotate(-25deg) translateY(-6px); }
}
@keyframes sport-leg-bl {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-20deg); }
    55% { transform: rotate(15deg) translateY(-6px); }
}
@keyframes sport-leg-br {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-15deg); }
    55% { transform: rotate(20deg) translateY(-5px); }
}
@keyframes sport-tail {
    0%, 100% { transform: rotate(-45deg); }
    25% { transform: rotate(-25deg); }
    55% { transform: rotate(-70deg); }
}
@keyframes sport-ear-l {
    0%, 100% { transform: rotate(-8deg) translateY(-3px); }
    55% { transform: rotate(-20deg) translateY(-8px); }
}
@keyframes sport-ear-r {
    0%, 100% { transform: rotate(8deg) translateY(-3px); }
    55% { transform: rotate(20deg) translateY(-8px); }
}


/* --- KREATIV (creative): dramatic inspired head tilts, painting paw, expressive everything --- */
.task-kreativ .cat-head {
    animation: kreativ-head 2.5s ease-in-out infinite;
}
.task-kreativ .cat-eye {
    width: 8px; height: 8px;
    border-radius: 50%;
    top: 1px;
    animation: kreativ-eyes 2.5s ease-in-out infinite;
}
.task-kreativ .cat-body {
    animation: kreativ-body 2.5s ease-in-out infinite;
}
.task-kreativ .cat-tail {
    animation: kreativ-tail 1.5s ease-in-out infinite;
}
.task-kreativ .cat-leg.front.left {
    animation: kreativ-paw 2.5s ease-in-out infinite;
    z-index: 10;
}
.task-kreativ .cat-ear.left { animation: kreativ-ear-l 2.5s ease-in-out infinite; }
.task-kreativ .cat-ear.right { animation: kreativ-ear-r 2.5s ease-in-out infinite; }

@keyframes kreativ-head {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    20% { transform: rotate(15deg) translateY(-4px); }
    45% { transform: rotate(-12deg) translateY(2px); }
    70% { transform: rotate(10deg) translateY(-6px); }
}
@keyframes kreativ-eyes {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(2px, -2px); }
    45% { transform: translate(-2px, 1px); }
    70% { transform: translate(1px, -3px); }
}
@keyframes kreativ-body {
    0%, 100% { transform: scaleX(1) translateX(0); }
    25% { transform: scaleX(1.06) translateX(3px); }
    50% { transform: scaleX(0.96) translateX(-2px); }
    75% { transform: scaleX(1.04) translateX(2px); }
}
@keyframes kreativ-tail {
    0%, 100% { transform: rotate(-30deg); }
    20% { transform: rotate(-60deg); }
    40% { transform: rotate(-20deg); }
    60% { transform: rotate(-55deg); }
    80% { transform: rotate(-15deg); }
}
@keyframes kreativ-paw {
    /* Painting strokes on the easel */
    0%, 100% { transform: rotate(-30deg) translate(-6px, -6px); }
    15% { transform: rotate(-45deg) translate(-10px, -10px); }
    30% { transform: rotate(-25deg) translate(-4px, -4px); }
    50% { transform: rotate(-50deg) translate(-8px, -12px); }
    70% { transform: rotate(-20deg) translate(-5px, -5px); }
    85% { transform: rotate(-40deg) translate(-9px, -8px); }
}
@keyframes kreativ-ear-l {
    0%, 100% { transform: rotate(-20deg); }
    25% { transform: rotate(-5deg) translateY(-5px); }
    60% { transform: rotate(-25deg) translateY(0); }
}
@keyframes kreativ-ear-r {
    0%, 100% { transform: rotate(20deg); }
    40% { transform: rotate(5deg) translateY(-5px); }
    75% { transform: rotate(25deg) translateY(0); }
}

/* --- EINKAUFEN (shopping): pushing cart, brisk trot, looking around --- */
.task-einkaufen .cat-leg.front.left { animation: einkaufen-leg 0.7s linear infinite; }
.task-einkaufen .cat-leg.front.right { animation: einkaufen-leg 0.7s linear infinite 0.35s; }
.task-einkaufen .cat-leg.back.left { animation: einkaufen-leg 0.7s linear infinite 0.35s; }
.task-einkaufen .cat-leg.back.right { animation: einkaufen-leg 0.7s linear infinite; }
.task-einkaufen .cat-body {
    animation: einkaufen-body 0.35s ease-in-out infinite alternate;
}
.task-einkaufen .cat-head {
    animation: einkaufen-head 2.8s ease-in-out infinite;
}
.task-einkaufen .cat-tail {
    animation: einkaufen-tail 0.7s ease-in-out infinite;
}
.task-einkaufen .cat-eye {
    width: 6px; height: 6px;
    border-radius: 50%;
    top: 2px;
    animation: blink 2.5s infinite;
}
.task-einkaufen .cat-ear.left { animation: einkaufen-ear-l 2.8s ease-in-out infinite; }
.task-einkaufen .cat-ear.right { animation: einkaufen-ear-r 2.8s ease-in-out infinite; }

@keyframes einkaufen-leg {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(30deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-30deg); }
    100% { transform: rotate(0deg); }
}
@keyframes einkaufen-body {
    0% { transform: translateY(0) scaleY(1); }
    100% { transform: translateY(-4px) scaleY(1.03); }
}
@keyframes einkaufen-head {
    /* Walking forward, glances left then right like checking shelves */
    0%, 100% { transform: translateY(0) rotate(0); }
    12% { transform: translateY(-3px) rotate(-10deg); }
    25% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-2px) rotate(12deg); }
    65% { transform: translateY(0) rotate(0); }
}
@keyframes einkaufen-tail {
    0%, 100% { transform: rotate(-60deg); }
    25% { transform: rotate(-75deg); }
    75% { transform: rotate(-45deg); }
}
@keyframes einkaufen-ear-l {
    0%, 100% { transform: rotate(-12deg); }
    12% { transform: rotate(-25deg) translateY(-3px); }
    50% { transform: rotate(-8deg); }
}
@keyframes einkaufen-ear-r {
    0%, 100% { transform: rotate(12deg); }
    12% { transform: rotate(8deg); }
    50% { transform: rotate(25deg) translateY(-3px); }
}