/* Earl Custom Idle Animations */

.earl-svg-char {
    width: 600px !important;
    height: 650px !important;
    min-width: 600px;
    min-height: 650px;
    transform-origin: bottom center;
    transform: scale(0.55);
    overflow: visible;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.earl-svg-char:hover {
    transform: scale(0.67);
}

/* Base Earl State */
.earl-container .earl-svg-char {
    animation: earl-float 3s infinite ease-in-out;
}

@keyframes earl-float {

    0%,
    100% {
        transform: scale(0.55) translateY(0);
    }

    50% {
        transform: scale(0.55) translateY(-10px);
    }
}

/* 1. Glitch & Sigh */
.earl-glitch-sigh .earl-svg-char {
    animation: earl-glitch-sigh-anim 6s infinite;
}

@keyframes earl-glitch-sigh-anim {

    0%,
    5%,
    10% {
        transform: scale(0.55) translate(0, 0);
    }

    1%,
    3%,
    7%,
    9% {
        transform: scale(0.55) translate(-3px, 1px) rotate(-1deg);
    }

    2%,
    4%,
    8% {
        transform: scale(0.55) translate(3px, -1px) rotate(1deg);
    }

    15% {
        transform: scale(0.55) translateY(30px) rotate(0);
    }

    /* Drop down */
    40% {
        transform: scale(0.55) translateY(30px);
    }

    70% {
        transform: scale(0.55) translateY(0);
    }

    /* Rise back up */
    100% {
        transform: scale(0.55) translateY(0);
    }
}

/* 2. Angry Scan */
.earl-angry-scan .earl-svg-char {
    animation: earl-angry-scan-anim 5s infinite;
}

@keyframes earl-angry-scan-anim {

    0%,
    10%,
    100% {
        transform: scale(0.55) rotate(0) translateY(0);
    }

    20%,
    35% {
        transform: scale(0.55) rotate(-12deg) translateY(5px);
    }

    /* Tilt Left */
    45%,
    60% {
        transform: scale(0.55) rotate(12deg) translateY(5px);
    }

    /* Tilt Right */
    70% {
        transform: scale(0.55) rotate(0) translateY(-20px);
    }

    /* Hop Up */
    75% {
        transform: scale(0.55) rotate(0) translateY(25px);
    }

    /* Slam Down */
    85% {
        transform: scale(0.55) rotate(0) translateY(0);
    }
}

/* 3. Engine Stall */
.earl-engine-stall .earl-svg-char {
    animation: earl-engine-stall-anim 7s infinite;
}

@keyframes earl-engine-stall-anim {

    0%,
    10%,
    100% {
        transform: scale(0.55) translateY(0);
    }

    15% {
        transform: scale(0.55) translateY(-40px);
    }

    /* Bounce up */
    20%,
    25%,
    30%,
    35% {
        transform: scale(0.55) translateY(-40px) rotate(-2deg);
    }

    /* Get stuck/sputter */
    22%,
    27%,
    32% {
        transform: scale(0.55) translateY(-38px) rotate(2deg);
    }

    40% {
        transform: scale(0.55) translateY(35px);
    }

    /* Slam back down */
    55% {
        transform: scale(0.55) translateY(0);
    }
}

/* 4. Impatient Hop */
.earl-impatient-hop .earl-svg-char {
    animation: earl-impatient-hop-anim 4s infinite;
}

@keyframes earl-impatient-hop-anim {

    0%,
    10%,
    100% {
        transform: scale(0.55) rotate(0) translateY(0);
        transform-origin: bottom right;
    }

    20% {
        transform: scale(0.55) rotate(5deg) translateY(0);
    }

    /* Tilt onto corner */
    25%,
    35%,
    45% {
        transform: scale(0.55) rotate(5deg) translateY(-10px);
    }

    /* Rapid hops */
    30%,
    40%,
    50% {
        transform: scale(0.55) rotate(5deg) translateY(0);
    }

    60% {
        transform: scale(0.55) rotate(0) translateY(0);
    }
}

/* 5. Power Surge */
.earl-power-surge .earl-svg-char {
    animation: earl-power-surge-anim 6s infinite;
}

@keyframes earl-power-surge-anim {

    0%,
    10%,
    100% {
        transform: scale(0.55) scaleX(1) scaleY(1) translateY(0);
    }

    30% {
        transform: scale(0.55) scaleX(1.1) scaleY(0.8) translateY(20px);
        opacity: 0.8;
    }

    /* Slump/Lose Power */
    35% {
        transform: scale(0.55) scaleX(0.8) scaleY(1.3) translateY(-30px);
        opacity: 1;
    }

    /* Jolt Up */
    45% {
        transform: scale(0.55) scaleX(1) scaleY(1) translateY(0);
    }
}

/* 6. Slow Burn */
.earl-slow-burn .earl-svg-char {
    animation: earl-slow-burn-anim 8s infinite;
}

@keyframes earl-slow-burn-anim {

    0%,
    10%,
    100% {
        transform: scale(0.55) translateY(0) scale(1);
    }

    50% {
        transform: scale(0.7) translateY(10px);
    }

    /* Lean closer (using scale) */
    55% {
        transform: scale(0.55) translateY(-5px);
    }

    /* Snap back */
    60% {
        transform: scale(0.55) translateY(0);
    }
}

/* Earl Specific Element Animations */
.earl-container.awake .earl-eyes {
    transform-origin: center;
    transform-box: fill-box;
    animation: earl-blink 5s infinite;
}

@keyframes earl-blink {

    0%,
    48%,
    52%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.1);
    }
}

.earl-container.awake .earl-led {
    animation: earl-led-blink 0.8s infinite alternate;
}

@keyframes earl-led-blink {
    0% {
        fill: #2a3324;
    }

    100% {
        fill: #ff0000;
    }

    /* Red for Earl */
}

.earl-zap-line {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    opacity: 0;
    animation: earl-zap 4s infinite;
}

@keyframes earl-zap {

    0%,
    90% {
        stroke-dashoffset: 60;
        opacity: 0;
    }

    92% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    95% {
        stroke-dashoffset: -60;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: -60;
        opacity: 0;
    }
}