/* ================= LIVE BART ANIMATION ================= */
.live-bart {
    width: 320px;
    height: 320px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bart-body {
    width: 280px;
    height: 280px;
    background: #000;
    /* Pure black body */
    border-radius: 50%;
    position: relative;
    box-shadow:
        inset -20px -20px 60px rgba(255, 255, 255, 0.1),
        /* Rim light */
        0 0 50px rgba(255, 255, 255, 0.05);
    /* Glow */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* Space between eyes */
    animation: bartFloat 6s ease-in-out infinite;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bart-shadow {
    position: absolute;
    bottom: -40px;
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    filter: blur(20px);
    z-index: -1;
    animation: shadowScale 6s ease-in-out infinite;
}

.bart-eye {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 35% 28%, #fff 0%, #fafafa 40%, #f0f0f0 80%, #e8e8e8 100%);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    /* Keep pupil inside */
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Eyelid for expressions */
.bart-eyelid {
    position: absolute;
    top: -100%;
    left: -5%;
    width: 110%;
    height: 100%;
    background: #000;
    border-radius: 0 0 50% 50%;
    z-index: 10;
    transition: top 0.15s ease-out;
}

.bart-pupil {
    width: 36px;
    height: 36px;
    background: radial-gradient(circle at center,
            #000 0%,
            #000 45%,
            #1a0a05 55%,
            #2a1510 70%,
            #3a2015 100%);
    border-radius: 50%;
    position: absolute;
    /* Center it initially */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Fast but smooth movement */
}

/* Eye Highlights to make it look wet/alive */
.bart-pupil::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

.bart-pupil::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 5px;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

/* Blush marks for certain expressions */
.bart-blush {
    position: absolute;
    width: 30px;
    height: 12px;
    background: rgba(255, 150, 180, 0.4);
    border-radius: 50%;
    bottom: 55px;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(3px);
}

.bart-blush.left {
    left: 50px;
}

.bart-blush.right {
    right: 50px;
}

/* ============================================================
   EXPRESSION STATES - Based on iOS BartExpression
   ============================================================ */

/* NEUTRAL - Default pleasant state */
.live-bart[data-expression="neutral"] .bart-eye {
    transform: scaleY(1) scaleX(1);
}

.live-bart[data-expression="neutral"] .bart-eyelid {
    top: -95%;
}

.live-bart[data-expression="neutral"] .bart-pupil {
    width: 36px;
    height: 36px;
}

/* HAPPY - Squished eyes with bottom lids raised (smiling eyes) */
.live-bart[data-expression="happy"] .bart-eye {
    transform: scaleY(0.8) scaleX(1.08);
}

.live-bart[data-expression="happy"] .bart-eyelid {
    top: -80%;
}

.live-bart[data-expression="happy"] .bart-pupil {
    width: 40px;
    height: 40px;
    transform: translate(-50%, -45%);
}

.live-bart[data-expression="happy"] .bart-blush {
    opacity: 1;
}

/* SURPRISED - Huge wide eyes with tiny pupils */
.live-bart[data-expression="surprised"] .bart-eye {
    transform: scaleY(1.25) scaleX(1.15);
}

.live-bart[data-expression="surprised"] .bart-eyelid {
    top: -100%;
}

.live-bart[data-expression="surprised"] .bart-pupil {
    width: 20px;
    height: 20px;
    transform: translate(-50%, -55%);
}

/* THINKING - Curious, eyes slightly up */
.live-bart[data-expression="thinking"] .bart-eye {
    transform: scaleY(1.05);
}

.live-bart[data-expression="thinking"] .bart-eyelid {
    top: -90%;
}

.live-bart[data-expression="thinking"] .bart-pupil {
    width: 34px;
    height: 34px;
    transform: translate(-45%, -60%);
}

/* COOL - Half-lidded confident eyes */
.live-bart[data-expression="cool"] .bart-eye {
    transform: scaleY(0.72) scaleX(0.88);
}

.live-bart[data-expression="cool"] .bart-eyelid {
    top: -55%;
}

.live-bart[data-expression="cool"] .bart-pupil {
    width: 34px;
    height: 34px;
}

/* EXCITED - Wide sparkly eyes */
.live-bart[data-expression="excited"] .bart-eye {
    transform: scaleY(1.15) scaleX(1.1);
    animation: excitedPulse 0.5s ease-in-out infinite alternate;
}

.live-bart[data-expression="excited"] .bart-eyelid {
    top: -100%;
}

.live-bart[data-expression="excited"] .bart-pupil {
    width: 46px;
    height: 46px;
    background: radial-gradient(circle at center,
            gold 0%,
            #FFD700 30%,
            #FFA500 60%,
            #FF8C00 100%);
    animation: starPupil 1s ease-in-out infinite;
}

.live-bart[data-expression="excited"] .bart-blush {
    opacity: 1;
}

@keyframes excitedPulse {
    from {
        transform: scaleY(1.15) scaleX(1.1);
    }

    to {
        transform: scaleY(1.2) scaleX(1.12);
    }
}

@keyframes starPupil {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* LOVING - Heart eyes with blush */
.live-bart[data-expression="loving"] .bart-eye {
    transform: scaleY(0.88) scaleX(1.2);
}

.live-bart[data-expression="loving"] .bart-eyelid {
    top: -85%;
}

.live-bart[data-expression="loving"] .bart-pupil {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle at center,
            #ff1744 0%,
            #e91e63 50%,
            #c2185b 100%);
    animation: heartPulse 0.8s ease-in-out infinite;
}

.live-bart[data-expression="loving"] .bart-blush {
    opacity: 1;
    background: rgba(255, 100, 150, 0.5);
}

@keyframes heartPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* SLEEPY/BORED - Heavy droopy eyelids */
.live-bart[data-expression="sleepy"] .bart-eye,
.live-bart[data-expression="bored"] .bart-eye {
    transform: scaleY(0.8) scaleX(0.92);
}

.live-bart[data-expression="sleepy"] .bart-eyelid,
.live-bart[data-expression="bored"] .bart-eyelid {
    top: -55%;
}

.live-bart[data-expression="sleepy"] .bart-pupil,
.live-bart[data-expression="bored"] .bart-pupil {
    width: 32px;
    height: 32px;
    transform: translate(-50%, -45%);
}

/* SLEEPING - Eyes fully closed */
.live-bart[data-expression="sleeping"] .bart-eye {
    transform: scaleY(0.15);
}

.live-bart[data-expression="sleeping"] .bart-eyelid {
    top: -5%;
}

/* FIRE/FOCUSED - Intense determined eyes */
.live-bart[data-expression="fire"] .bart-eye {
    transform: scaleY(1.18) scaleX(1.05);
}

.live-bart[data-expression="fire"] .bart-eyelid {
    top: -92%;
}

.live-bart[data-expression="fire"] .bart-pupil {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at center,
            #ff5722 0%,
            #ff9800 40%,
            #ffc107 70%,
            #ffeb3b 100%);
    animation: fireGlow 0.3s ease-in-out infinite alternate;
}

@keyframes fireGlow {
    from {
        box-shadow: 0 0 10px rgba(255, 87, 34, 0.8), 0 0 20px rgba(255, 152, 0, 0.5);
    }

    to {
        box-shadow: 0 0 15px rgba(255, 87, 34, 1), 0 0 30px rgba(255, 152, 0, 0.7);
    }
}

/* SAD - Droopy eyes */
.live-bart[data-expression="sad"] .bart-eye {
    transform: scaleY(0.9) rotate(-5deg);
}

.live-bart[data-expression="sad"] .bart-eye.left {
    transform: scaleY(0.9) rotate(-5deg);
}

.live-bart[data-expression="sad"] .bart-eye.right {
    transform: scaleY(0.9) rotate(5deg);
}

.live-bart[data-expression="sad"] .bart-eyelid {
    top: -72%;
}

.live-bart[data-expression="sad"] .bart-pupil {
    width: 32px;
    height: 32px;
    transform: translate(-50%, -40%);
}

/* WAVING - Warm welcoming eyes */
.live-bart[data-expression="waving"] .bart-eye {
    transform: scaleY(0.9) scaleX(1.15);
}

.live-bart[data-expression="waving"] .bart-eyelid {
    top: -92%;
}

.live-bart[data-expression="waving"] .bart-pupil {
    width: 42px;
    height: 42px;
}

.live-bart[data-expression="waving"] .bart-blush {
    opacity: 0.5;
}

/* CELEBRATING - Star eyes! */
.live-bart[data-expression="celebrating"] .bart-eye {
    transform: scaleY(0.95) scaleX(1.3);
}

.live-bart[data-expression="celebrating"] .bart-eyelid {
    top: -100%;
}

.live-bart[data-expression="celebrating"] .bart-pupil {
    width: 44px;
    height: 44px;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
    animation: celebrateSpin 1s linear infinite;
}

.live-bart[data-expression="celebrating"] .bart-blush {
    opacity: 1;
}

@keyframes celebrateSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Animations */
@keyframes bartFloat {

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

    50% {
        transform: translateY(-15px);
    }
}

@keyframes shadowScale {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(0.8);
        opacity: 0.3;
    }
}

/* BLINK ANIMATION */
.live-bart.blinking .bart-eyelid {
    top: -5% !important;
    transition: top 0.08s ease-in;
}

/* SQUISH when tapped */
.live-bart.squished .bart-body {
    transform: scale(0.85);
}

.live-bart.bounced .bart-body {
    transform: scale(1.15);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .live-bart {
        width: 200px;
        height: 200px;
    }

    .bart-body {
        width: 180px;
        height: 180px;
        gap: 12px;
    }

    .bart-eye {
        width: 50px;
        height: 50px;
    }

    .bart-pupil {
        width: 20px;
        height: 20px;
    }

    .bart-pupil::after {
        width: 6px;
        height: 6px;
        top: 3px;
        right: 3px;
    }

    .bart-pupil::before {
        width: 3px;
        height: 3px;
    }

    .bart-blush {
        width: 20px;
        height: 8px;
        bottom: 35px;
    }

    .bart-blush.left {
        left: 30px;
    }

    .bart-blush.right {
        right: 30px;
    }
}