/* Cartoony Rubber-Hose Ernest CSS */

.ernest-svg-char {
    width: 500px !important;
    height: 550px !important;
    min-width: 500px;
    min-height: 550px;
    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);
}

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

/* Rubber-Hose Bouncy Body (Awake) */
.ernest-container.awake .ernest-svg-char {
    animation: ernest-bounce 3s infinite ease-in-out;
}

@keyframes ernest-bounce {

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

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

/* Sleeping Breathing Body (Sleeping) */
.ernest-container.sleeping .ernest-svg-char {
    animation: ernest-breathe 4s infinite ease-in-out;
}

@keyframes ernest-breathe {

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

    50% {
        transform: scale(0.55) translateY(-18px);
        /* Deeper breathing outward from floor */
    }
}

/* Snoring Zs */
.ernest-container.sleeping .ernest-z1 {
    animation: float-z 3s infinite;
    opacity: 0;
}

.ernest-container.sleeping .ernest-z2 {
    animation: float-z 3s infinite 1s;
    opacity: 0;
}

.ernest-container.sleeping .ernest-z3 {
    animation: float-z 3s infinite 2s;
    opacity: 0;
}

@keyframes float-z {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(15px, -25px) scale(1.2);
        opacity: 0;
    }
}

/* Expressive Blinking Eyes */
.at-ernest-container.awake .ernest-eyes {
    transform-origin: center;
    transform-box: fill-box;
    animation: cartoon-blink 4s infinite;
}

.at-ernest-container.sleeping .ernest-eyes-open,
.at-ernest-container.sleeping .ernest-mouth-open {
    display: none !important;
}

.at-ernest-container:not(.sleeping) .ernest-eyes-closed,
.at-ernest-container:not(.sleeping) .ernest-mouth-closed,
.at-ernest-container:not(.sleeping) .ernest-z-group {
    display: none !important;
}

@keyframes cartoon-blink {

    0%,
    46%,
    50%,
    96%,
    100% {
        transform: scaleY(1);
    }

    48%,
    98% {
        transform: scaleY(0.1);
    }
}



/* Bouncing Eyebrows */
.at-ernest-container.awake .ernest-eyebrow {
    animation: eyebrow-bop 4s infinite;
}

@keyframes eyebrow-bop {

    0%,
    90%,
    100% {
        transform: translateY(0px);
    }

    95% {
        transform: translateY(-4px);
    }
}




@keyframes cartoon-zap {
    0% {
        stroke-dashoffset: 60;
        opacity: 0;
    }

    10%,
    20% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

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

.ernest-zap-line {
    /* Set stroke dasharray to allow drawing effect */
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    opacity: 0;
    /* Animate every 3 seconds, taking 1.5s to complete */
    animation: cartoon-zap 3s ease-out infinite;
}

/* Offset the right zap so they fire slightly asynchronously if desired, or keep them synced */
.ernest-zap-line+.ernest-zap-line {
    animation-delay: 0.2s;
}

/* Simple LED Blink */
.ernest-led {
    fill: #008f25;
}

.at-ernest-container.awake .ernest-led {
    animation: cartoon-led 1s infinite steps(2);
}

@keyframes cartoon-led {
    0% {
        fill: #008f25;
    }

    100% {
        fill: #00ff4c;
    }
}



/* --- Fun Composited Character Animations --- */

/* 1. Thinking */
#ernest-character.thinking .ernest-svg-char {
    animation: anim-thinking-body 3s infinite ease-in-out;
}

#ernest-character.thinking .ernest-hand-pos-right {
    /* Hand moves to chin area */
    transform: translate(320px, 295px) rotate(-15deg) !important;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#ernest-character.thinking .ernest-hand-pos-left {
    transform: translate(90px, 340px) rotate(10deg) !important;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes anim-thinking-body {

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

    50% {
        /* Deep, wide, tilted bounce for thinking - adjusted for bottom origin */
        transform: scale(0.55) rotate(-8deg) translateY(-20px);
    }
}

/* 2. Excited */
#ernest-character.excited .ernest-svg-char {
    animation: anim-excited-body 0.6s infinite ease-in-out;
}

@keyframes anim-excited-body {

    0%,
    100% {
        /* Grounded heavy bounce */
        transform: scale(0.55) translateY(-20px);
    }

    50% {
        /* Air leap */
        transform: scale(0.55) translateY(40px);
    }
}

/* 3. Lecturing / Pointing */
#ernest-character.lecturing .ernest-svg-char {
    animation: anim-lecturing-body 2s infinite ease-in-out;
}

@keyframes anim-lecturing-body {

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

    50% {
        /* Adjusted for bottom origin */
        transform: scale(0.65) translateY(-5px) rotate(-6deg);
    }
}

/* 4. Dancing */
#ernest-character.dancing .ernest-svg-char {
    animation: anim-dancing-body 1s infinite alternate ease-in-out;
}

@keyframes anim-dancing-body {
    0% {
        transform: scale(0.55) rotate(-15deg) translateY(-10px);
    }

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

    100% {
        transform: scale(0.55) rotate(15deg) translateY(-10px);
    }
}

/* 5. Jumping */
#ernest-character.jumping .ernest-svg-char {
    animation: anim-jumping-body 0.8s infinite ease-in-out;
}

@keyframes anim-jumping-body {

    0%,
    100% {
        transform: scale(0.55) translateY(-30px);
        /* Heavy land */
    }

    50% {
        transform: scale(0.55) translateY(60px);
        /* Huge leap in the air */
    }
}

/* 6. Waving */
#ernest-character.waving .ernest-svg-char {
    animation: ernest-bounce-wave 1s infinite ease-in-out;
}

@keyframes ernest-bounce-wave {

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

    50% {
        transform: scale(0.55) rotate(15deg) translateY(10px);
    }
}


/* --- NEW BODY ANIMATIONS (Handless Expression) --- */

/* Pop Out Animation */
#ernest-character.pop-out .ernest-svg-char {
    animation: ernest-pop-out 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes ernest-pop-out {
    0% {
        transform: scale(0.55) translateY(-40px);
    }

    40% {
        transform: scale(1.1) translateY(30px);
    }

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

    100% {
        transform: scale(0.55);
    }
}

/* Prong Wobble (Idle Quirk) */
.at-ernest-container.awake .ernest-prong-left {
    transform-origin: 195px 135px;
    /* Bottom of left prong */
    animation: prong-wobble-l 4s infinite ease-in-out;
}

.at-ernest-container.awake .ernest-prong-right {
    transform-origin: 305px 135px;
    /* Bottom of right prong */
    animation: prong-wobble-r 4.5s infinite ease-in-out;
}

@keyframes prong-wobble-l {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(2deg);
    }
}

@keyframes prong-wobble-r {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(4deg);
    }

    70% {
        transform: rotate(-2deg);
    }
}

/* Prong Pulse (Talking Glow/Grow) */
#ernest-character.talking .ernest-prong rect,
#ernest-character.talking .ernest-prong circle {
    animation: prong-pulse 0.5s infinite alternate ease-in-out;
}

@keyframes prong-pulse {
    0% {
        fill: #b0b5ba;
        filter: brightness(1);
    }

    100% {
        fill: #c8e0e8;
        filter: brightness(1.2) drop-shadow(0 0 4px #88dded);
    }
}

/* Prong Spark (Excited State) */
.ernest-prong-spark {
    opacity: 0;
    stroke-dasharray: 15 10;
    transition: opacity 0.3s;
}

#ernest-character.excited .ernest-prong-spark {
    opacity: 1;
    animation: spark-travel 0.3s linear infinite;
}

@keyframes spark-travel {
    0% {
        stroke-dashoffset: 25;
    }

    100% {
        stroke-dashoffset: 0;
    }
}