/* elephant */
.elephant-container {
    position: fixed;
    width: 180px;
    height: 180px;
    z-index: 10;
    opacity: 0.85;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    pointer-events: none;
    animation: runAroundScreen 30s linear infinite;
    transform-origin: center center;
}

@keyframes runAroundScreen {
    /* Start at bottom right */
    0% { 
        bottom: 20px; 
        right: 20px;
        transform: scaleX(1) translateY(0);
    }
    /* Running to bottom left with bouncing */
    5% { 
        bottom: 25px; 
        right: calc(80% - 140px);
        transform: scaleX(1) translateY(-5px);
    }
    10% { 
        bottom: 15px; 
        right: calc(60% - 100px);
        transform: scaleX(1) translateY(5px);
    }
    15% { 
        bottom: 25px; 
        right: calc(40% - 60px);
        transform: scaleX(1) translateY(-5px);
    }
    20% { 
        bottom: 15px; 
        right: calc(20% - 20px);
        transform: scaleX(1) translateY(5px);
    }
    /* Slow down and turn at bottom left */
    23% { 
        bottom: 20px; 
        right: calc(100% - 200px);
        transform: scaleX(1) translateY(0);
    }
    25% { 
        bottom: 20px; 
        right: calc(100% - 200px);
        transform: scaleX(-1) translateY(0);
    }
    /* Run up left side with slight wobble */
    30% { 
        bottom: calc(20% + 20px); 
        right: calc(100% - 195px);
        transform: scaleX(-1) translateX(-5px);
    }
    35% { 
        bottom: calc(40% + 20px); 
        right: calc(100% - 205px);
        transform: scaleX(-1) translateX(5px);
    }
    40% { 
        bottom: calc(60% + 20px); 
        right: calc(100% - 195px);
        transform: scaleX(-1) translateX(-5px);
    }
    45% { 
        bottom: calc(80% + 20px); 
        right: calc(100% - 205px);
        transform: scaleX(-1) translateX(5px);
    }
    /* Turn at top left */
    48% { 
        bottom: calc(100% - 200px); 
        right: calc(100% - 200px);
        transform: scaleX(-1);
    }
    50% { 
        bottom: calc(100% - 200px); 
        right: calc(100% - 200px);
        transform: scaleX(-1);
    }
    /* Move across top with bouncing */
    55% { 
        bottom: calc(100% - 190px); 
        right: calc(80% - 160px);
        transform: scaleX(-1) translateY(10px);
    }
    60% { 
        bottom: calc(100% - 210px); 
        right: calc(60% - 120px);
        transform: scaleX(-1) translateY(-10px);
    }
    65% { 
        bottom: calc(100% - 190px); 
        right: calc(40% - 80px);
        transform: scaleX(-1) translateY(10px);
    }
    70% { 
        bottom: calc(100% - 210px); 
        right: calc(20% - 40px);
        transform: scaleX(-1) translateY(-10px);
    }
    /* Turn at top right */
    73% { 
        bottom: calc(100% - 200px); 
        right: 20px;
        transform: scaleX(-1);
    }
    75% { 
        bottom: calc(100% - 200px); 
        right: 20px;
        transform: scaleX(1);
    }
    /* Move down right side with wobble */
    80% { 
        bottom: calc(80% - 160px); 
        right: 25px;
        transform: scaleX(1) translateX(5px);
    }
    85% { 
        bottom: calc(60% - 120px); 
        right: 15px;
        transform: scaleX(1) translateX(-5px);
    }
    90% { 
        bottom: calc(40% - 80px); 
        right: 25px;
        transform: scaleX(1) translateX(5px);
    }
    95% { 
        bottom: calc(20% - 40px); 
        right: 15px;
        transform: scaleX(1) translateX(-5px);
    }
    /* Complete cycle */
    100% { 
        bottom: 20px; 
        right: 20px;
        transform: scaleX(1);
    }
}

/* Leg animations for redesigned rectangular legs */
.elephant-legs .elephant-leg {
    animation: legRun 0.8s infinite ease-in-out;
    transform-origin: center top;
}
.elephant-legs .elephant-leg:nth-child(1),
.elephant-legs .elephant-leg:nth-child(3) {
    animation-delay: 0s;
}
.elephant-legs .elephant-leg:nth-child(2),
.elephant-legs .elephant-leg:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes legRun {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(8deg) translateY(-2px); }
    50%      { transform: rotate(0deg) translateY(0); }
    75%      { transform: rotate(-8deg) translateY(-2px); }
}

/* Tail animation for unified tail path */
.elephant-tail-unified {
    animation: tailSway 2s infinite ease-in-out;
    transform-origin: 300px 200px;
}

@keyframes tailSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
}

/* Realistic body bounce with running motion */
.elephant-body {
    animation: bodyBounce 0.4s infinite ease-in-out !important;
}

@keyframes bodyBounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* Make trunk sway with running motion more naturally */
.elephant-trunk {
    animation: runningTrunkMove 0.4s infinite !important;
    transform-origin: top center;
}

@keyframes runningTrunkMove {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Ears flap with air resistance */
.elephant-ear {
    animation: runningEarFlap 0.8s infinite !important;
    transform-origin: top center;
}

.left-ear {
    animation-delay: 0.1s !important;
}

@keyframes runningEarFlap {
    0% { transform: rotate(0deg) scaleY(1); }
    25% { transform: rotate(-10deg) scaleY(0.95); }
    50% { transform: rotate(-5deg) scaleY(0.98); }
    75% { transform: rotate(-15deg) scaleY(0.93); }
    100% { transform: rotate(0deg) scaleY(1); }
}

/* Blink animation for eyes */
.eye-group {
    animation: eyeBlink 6s infinite;
    transform-origin: center center;
}
.left-eye-group {
    animation-delay: 2s;
}
.right-eye-group {
    animation-delay: 3s;
}

@keyframes eyeBlink {
    0%, 5%, 60%, 100% { transform: scaleY(1); }
    6%, 7% { transform: scaleY(0.1); }
    8% { transform: scaleY(1); }
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .elephant-container {
        width: 120px;
        height: 120px;
    }
    
    @keyframes runAroundScreen {
        /* Same keyframe pattern but with adjusted positions for smaller screens */
        0% { bottom: 15px; right: 15px; transform: scaleX(1); }
        5% { bottom: 20px; right: calc(80% - 100px); transform: scaleX(1) translateY(-5px); }
        10% { bottom: 10px; right: calc(60% - 70px); transform: scaleX(1) translateY(5px); }
        15% { bottom: 20px; right: calc(40% - 40px); transform: scaleX(1) translateY(-5px); }
        20% { bottom: 10px; right: calc(20% - 10px); transform: scaleX(1) translateY(5px); }
        23% { bottom: 15px; right: calc(100% - 140px); transform: scaleX(1); }
        25% { bottom: 15px; right: calc(100% - 140px); transform: scaleX(-1); }
        30% { bottom: calc(20% + 10px); right: calc(100% - 135px); transform: scaleX(-1) translateX(-5px); }
        35% { bottom: calc(40% + 10px); right: calc(100% - 145px); transform: scaleX(-1) translateX(5px); }
        40% { bottom: calc(60% + 10px); right: calc(100% - 135px); transform: scaleX(-1) translateX(-5px); }
        45% { bottom: calc(80% + 10px); right: calc(100% - 145px); transform: scaleX(-1) translateX(5px); }
        48% { bottom: calc(100% - 140px); right: calc(100% - 140px); transform: scaleX(-1); }
        50% { bottom: calc(100% - 140px); right: calc(100% - 140px); transform: scaleX(-1); }
        55% { bottom: calc(100% - 130px); right: calc(80% - 120px); transform: scaleX(-1) translateY(10px); }
        60% { bottom: calc(100% - 150px); right: calc(60% - 80px); transform: scaleX(-1) translateY(-10px); }
        65% { bottom: calc(100% - 130px); right: calc(40% - 50px); transform: scaleX(-1) translateY(10px); }
        70% { bottom: calc(100% - 150px); right: calc(20% - 20px); transform: scaleX(-1) translateY(-10px); }
        73% { bottom: calc(100% - 140px); right: 15px; transform: scaleX(-1); }
        75% { bottom: calc(100% - 140px); right: 15px; transform: scaleX(1); }
        80% { bottom: calc(80% - 120px); right: 20px; transform: scaleX(1) translateX(5px); }
        85% { bottom: calc(60% - 80px); right: 10px; transform: scaleX(1) translateX(-5px); }
        90% { bottom: calc(40% - 50px); right: 20px; transform: scaleX(1) translateX(5px); }
        95% { bottom: calc(20% - 20px); right: 10px; transform: scaleX(1) translateX(-5px); }
        100% { bottom: 15px; right: 15px; transform: scaleX(1); }
    }
}