/* Enhanced Interactive Elephant Animation System with screen impact */
.elephant-container {
    position: fixed;
    width: 220px;
    height: 220px;
    z-index: 9999;
    opacity: 0.95;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(119, 123, 180, 0.3));
    pointer-events: none;
    animation: runAroundScreen 25s linear infinite;
    transform-origin: center center;
    will-change: transform;
    touch-action: manipulation; /* Prevents default touch behaviors */
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none;
}

.elephant-container svg {
    width: 100%;
    height: 100%;
}

/* Only apply hover pause effect on devices that support hover (not touch devices) */
@media (hover: hover) and (pointer: fine) {
    .elephant-container:hover {
        animation-play-state: paused;
        transform: scale(1.2) rotateY(15deg);
        filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)) 
                drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2))
                drop-shadow(0 0 40px rgba(119, 123, 180, 0.6))
                brightness(1.15) saturate(1.3);
        z-index: 15;
    }
}

/* Ensure animation always runs on touch-only devices */
@media (hover: none) {
    .elephant-container,
    .elephant-container:hover,
    .elephant-container:active {
        animation-play-state: running !important;
    }
}

/* Ensure party mode and other modes always keep running */
.elephant-container.party-mode,
.elephant-container.turbo-mode,
.elephant-container.celebration-mode {
    animation-play-state: running !important;
}

.elephant-container.clicked {
    animation-direction: reverse;
}

.elephant-container.party-mode {
    animation: runAroundScreen 15s linear infinite;
}

.elephant-container.party-mode svg {
    animation: partyGlow 0.5s ease-in-out infinite alternate,
               partyBounce 1s ease-in-out infinite;
}

.elephant-container.turbo-mode {
    animation: runAroundScreen 8s linear infinite;
}

.elephant-container.celebration-mode {
    animation: runAroundScreen 20s ease-in-out infinite;
}

.elephant-container.celebration-mode svg {
    animation: celebrationSpin 2s ease-in-out infinite,
               celebrationGlow 1s ease-in-out infinite alternate;
}

/* Elephant trail effects for enhanced visual feedback */
.elephant-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(119, 123, 180, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.elephant-container:active::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
}

.elephant-container.party-mode::after {
    animation: partyTrail 0.5s ease-in-out infinite;
}

.elephant-container.celebration-mode::after {
    animation: celebrationTrail 1s ease-in-out infinite;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 70%);
}

@keyframes screenImpact {
    0%, 90%, 100% { 
        transform: translate(0, 0);
    }
    5% { 
        transform: translate(0.5px, -0.5px);
    }
    55% { 
        transform: translate(-0.5px, 0.5px);
    }
}

@keyframes runAroundScreen {
    /* Start at bottom right with subtle bounce preparation */
    0% { 
        bottom: 20px; 
        right: 20px;
        transform: scaleX(1) translateY(0) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
    
    /* Acceleration phase with dynamic bouncing */
    2% { 
        bottom: 18px; 
        right: calc(95% - 140px);
        transform: scaleX(1) translateY(-2px) rotate(-1deg);
    }
    5% { 
        bottom: 28px; 
        right: calc(85% - 140px);
        transform: scaleX(1) translateY(-8px) rotate(2deg);
        filter: brightness(1.1) saturate(1.1);
    }
    8% { 
        bottom: 12px; 
        right: calc(70% - 100px);
        transform: scaleX(1) translateY(8px) rotate(-1deg);
    }
    12% { 
        bottom: 30px; 
        right: calc(55% - 80px);
        transform: scaleX(1) translateY(-10px) rotate(1deg);
    }
    15% { 
        bottom: 10px; 
        right: calc(40% - 60px);
        transform: scaleX(1) translateY(10px) rotate(-2deg);
    }
    18% { 
        bottom: 32px; 
        right: calc(25% - 40px);
        transform: scaleX(1) translateY(-12px) rotate(1deg);
    }
    21% { 
        bottom: 8px; 
        right: calc(10% - 20px);
        transform: scaleX(1) translateY(12px) rotate(-1deg);
    }
    
    /* Deceleration and turn preparation at bottom left */
    23% { 
        bottom: 22px; 
        right: calc(100% - 200px);
        transform: scaleX(1) translateY(-2px) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
    24% { 
        bottom: 20px; 
        right: calc(100% - 200px);
        transform: scaleX(0.9) translateY(0) rotate(0deg);
    }
    25% { 
        bottom: 20px; 
        right: calc(100% - 200px);
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }
    26% { 
        bottom: 18px; 
        right: calc(100% - 195px);
        transform: scaleX(-1) translateY(-2px) rotate(1deg);
    }
    
    /* Running up left side with enhanced physics */
    28% { 
        bottom: calc(15% + 20px); 
        right: calc(100% - 190px);
        transform: scaleX(-1) translateX(-8px) translateY(-4px) rotate(-1deg);
    }
    32% { 
        bottom: calc(30% + 20px); 
        right: calc(100% - 208px);
        transform: scaleX(-1) translateX(8px) translateY(-6px) rotate(2deg);
        filter: brightness(1.05) saturate(1.05);
    }
    36% { 
        bottom: calc(45% + 20px); 
        right: calc(100% - 192px);
        transform: scaleX(-1) translateX(-10px) translateY(-8px) rotate(-1deg);
    }
    40% { 
        bottom: calc(60% + 20px); 
        right: calc(100% - 210px);
        transform: scaleX(-1) translateX(10px) translateY(-10px) rotate(2deg);
    }
    44% { 
        bottom: calc(75% + 20px); 
        right: calc(100% - 195px);
        transform: scaleX(-1) translateX(-8px) translateY(-6px) rotate(-1deg);
    }
    47% { 
        bottom: calc(90% + 20px); 
        right: calc(100% - 205px);
        transform: scaleX(-1) translateX(6px) translateY(-4px) rotate(1deg);
    }
    
    /* Enhanced turn at top left with momentum */
    48% { 
        bottom: calc(100% - 200px); 
        right: calc(100% - 200px);
        transform: scaleX(-1) translateX(0) translateY(0) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
    49% { 
        bottom: calc(100% - 195px); 
        right: calc(100% - 195px);
        transform: scaleX(-1) translateX(2px) translateY(-5px) rotate(-2deg);
    }
    50% { 
        bottom: calc(100% - 200px); 
        right: calc(100% - 200px);
        transform: scaleX(-1) translateX(0) translateY(0) rotate(0deg);
    }
    51% { 
        bottom: calc(100% - 195px); 
        right: calc(100% - 195px);
        transform: scaleX(-1) translateX(-2px) translateY(-5px) rotate(2deg);
    }
    
    /* Running across top with enhanced bouncing physics */
    54% { 
        bottom: calc(100% - 185px); 
        right: calc(85% - 160px);
        transform: scaleX(-1) translateY(15px) rotate(-2deg);
        filter: brightness(1.1) saturate(1.1);
    }
    57% { 
        bottom: calc(100% - 215px); 
        right: calc(70% - 140px);
        transform: scaleX(-1) translateY(-15px) rotate(1deg);
    }
    60% { 
        bottom: calc(100% - 180px); 
        right: calc(55% - 120px);
        transform: scaleX(-1) translateY(20px) rotate(-2deg);
    }
    63% { 
        bottom: calc(100% - 220px); 
        right: calc(40% - 100px);
        transform: scaleX(-1) translateY(-20px) rotate(1deg);
    }
    66% { 
        bottom: calc(100% - 175px); 
        right: calc(25% - 80px);
        transform: scaleX(-1) translateY(25px) rotate(-2deg);
    }
    69% { 
        bottom: calc(100% - 225px); 
        right: calc(10% - 60px);
        transform: scaleX(-1) translateY(-25px) rotate(1deg);
    }
    
    /* Enhanced turn at top right */
    72% { 
        bottom: calc(100% - 195px); 
        right: 25px;
        transform: scaleX(-1) translateX(0) translateY(5px) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
    73% { 
        bottom: calc(100% - 200px); 
        right: 20px;
        transform: scaleX(-0.9) translateX(0) translateY(0) rotate(0deg);
    }
    74% { 
        bottom: calc(100% - 200px); 
        right: 20px;
        transform: scaleX(-0.1) translateX(0) translateY(0) rotate(0deg);
    }
    75% { 
        bottom: calc(100% - 200px); 
        right: 20px;
        transform: scaleX(1) translateX(0) translateY(0) rotate(0deg);
    }
    76% { 
        bottom: calc(100% - 195px); 
        right: 25px;
        transform: scaleX(1) translateX(2px) translateY(-5px) rotate(-1deg);
    }
    
    /* Enhanced descent on right side with realistic gravity */
    78% { 
        bottom: calc(85% - 140px); 
        right: 30px;
        transform: scaleX(1) translateX(8px) translateY(0) rotate(1deg);
    }
    81% { 
        bottom: calc(70% - 120px); 
        right: 10px;
        transform: scaleX(1) translateX(-10px) translateY(5px) rotate(-2deg);
        filter: brightness(1.05) saturate(1.05);
    }
    84% { 
        bottom: calc(55% - 100px); 
        right: 35px;
        transform: scaleX(1) translateX(12px) translateY(10px) rotate(1deg);
    }
    87% { 
        bottom: calc(40% - 80px); 
        right: 5px;
        transform: scaleX(1) translateX(-12px) translateY(15px) rotate(-2deg);
    }
    90% { 
        bottom: calc(25% - 60px); 
        right: 30px;
        transform: scaleX(1) translateX(10px) translateY(20px) rotate(1deg);
    }
    93% { 
        bottom: calc(10% - 40px); 
        right: 10px;
        transform: scaleX(1) translateX(-8px) translateY(25px) rotate(-1deg);
    }
    96% { 
        bottom: calc(5% - 20px); 
        right: 25px;
        transform: scaleX(1) translateX(6px) translateY(15px) rotate(1deg);
    }
    98% { 
        bottom: 22px; 
        right: 18px;
        transform: scaleX(1) translateX(-2px) translateY(2px) rotate(0deg);
    }
    
    /* Complete cycle with gentle landing */
    100% { 
        bottom: 20px; 
        right: 20px;
        transform: scaleX(1) translateY(0) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
}

/* Enhanced leg animations with more realistic running motion */
.elephant-legs .elephant-leg {
    animation: legRun 1.2s infinite cubic-bezier(0.4, 0.0, 0.6, 1);
    transform-origin: top center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Walk cycle: Back Left -> Front Left -> Back Right -> Front Right */
/* Order in DOM: FL(1), FR(2), BL(3), BR(4) */
.elephant-legs .elephant-leg:nth-child(3) { /* Back Left */
    animation-delay: 0s;
}
.elephant-legs .elephant-leg:nth-child(1) { /* Front Left */
    animation-delay: 0.3s;
}
.elephant-legs .elephant-leg:nth-child(4) { /* Back Right */
    animation-delay: 0.6s;
}
.elephant-legs .elephant-leg:nth-child(2) { /* Front Right */
    animation-delay: 0.9s;
}

@keyframes legRun {
    0% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(12deg) translateY(-4px); } /* Lift forward */
    50% { transform: rotate(0deg) translateY(0); } /* Plant */
    75% { transform: rotate(-8deg) translateY(0); } /* Push back */
    100% { transform: rotate(0deg) translateY(0); }
}

/* Enhanced tail animation with more dynamic movement and inertia */
.elephant-tail-unified {
    animation: tailSway 2.7s infinite cubic-bezier(0.4, 0.0, 0.6, 1),
               tailInertia 0.9s infinite ease-in-out;
    transform-origin: 300px 200px;
}

@keyframes tailSway {
    0% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(18deg) scale(1.02); }
    40% { transform: rotate(-5deg) scale(0.98); }
    60% { transform: rotate(22deg) scale(1.03); }
    80% { transform: rotate(-8deg) scale(0.97); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes tailInertia {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-2px) translateY(1px); }
    50% { transform: translateX(1px) translateY(-1px); }
    75% { transform: translateX(2px) translateY(1px); }
}

/* Enhanced body bounce with more realistic physics */
.elephant-body {
    animation: bodyBounce 0.9s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94),
               bodyTexture 8s infinite ease-in-out,
               bodyMomentum 1.8s infinite ease-in-out,
               heartbeat 4.5s infinite ease-in-out;
}

@keyframes bodyBounce {
    0% { transform: translateY(0) scaleY(1) translateX(0); }
    30% { transform: translateY(-6px) scaleY(0.98) translateX(-1px); }
    60% { transform: translateY(-2px) scaleY(1.01) translateX(1px); }
    100% { transform: translateY(0) scaleY(1) translateX(0); }
}

@keyframes bodyMomentum {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-1px) rotate(-0.5deg); }
    50% { transform: translateX(0) rotate(0deg); }
    75% { transform: translateX(1px) rotate(0.5deg); }
}

@keyframes bodyTexture {
    0%, 100% { 
        filter: brightness(1) saturate(1);
    }
    50% { 
        filter: brightness(1.05) saturate(1.1);
    }
}

@keyframes heartbeat {
    0%, 50%, 100% { transform: scale(1); }
    5% { transform: scale(1.008); }
    10% { transform: scale(1); }
    15% { transform: scale(1.005); }
    20% { transform: scale(1); }
}

/* Enhanced trunk movement with more natural sway and running response */
.elephant-trunk {
    animation: runningTrunkMove 0.45s infinite cubic-bezier(0.4, 0.0, 0.6, 1),
               trunkInertia 0.9s infinite ease-in-out;
    transform-origin: top center;
}

@keyframes runningTrunkMove {
    0% { transform: rotate(0deg) scaleX(1) translateX(0); }
    20% { transform: rotate(12deg) scaleX(1.02) translateX(-2px); }
    40% { transform: rotate(-4deg) scaleX(0.98) translateX(1px); }
    60% { transform: rotate(-14deg) scaleX(0.96) translateX(3px); }
    80% { transform: rotate(4deg) scaleX(1.01) translateX(-1px); }
    100% { transform: rotate(0deg) scaleX(1) translateX(0); }
}

@keyframes trunkInertia {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-1px) translateY(1px); }
    50% { transform: translateX(0) translateY(-1px); }
    75% { transform: translateX(1px) translateY(1px); }
}

/* Enhanced ear flapping with wind resistance effect and directional awareness */
.elephant-ear {
    animation: runningEarFlap 1.0s infinite cubic-bezier(0.4, 0.0, 0.6, 1),
               earWindResistance 3.0s infinite ease-in-out;
    transform-origin: top center;
}

.left-ear {
    animation-delay: 0.15s, 0.45s;
}

.right-ear {
    animation-delay: 0.075s, 0.225s;
}

@keyframes runningEarFlap {
    0% { transform: rotate(0deg) scaleY(1) scaleX(1); }
    15% { transform: rotate(-12deg) scaleY(0.92) scaleX(1.03); }
    30% { transform: rotate(-8deg) scaleY(0.96) scaleX(1.01); }
    45% { transform: rotate(-18deg) scaleY(0.88) scaleX(1.05); }
    60% { transform: rotate(-5deg) scaleY(0.98) scaleX(1.02); }
    75% { transform: rotate(-15deg) scaleY(0.90) scaleX(1.04); }
    90% { transform: rotate(-2deg) scaleY(0.99) scaleX(1.01); }
    100% { transform: rotate(0deg) scaleY(1) scaleX(1); }
}

@keyframes earWindResistance {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(1px) translateY(-1px); }
    50% { transform: translateX(-1px) translateY(1px); }
    75% { transform: translateX(1px) translateY(0); }
}

/* Enhanced eye blinking with more realistic timing */
.eye-group {
    animation: eyeBlink 8s infinite cubic-bezier(0.4, 0.0, 0.6, 1);
    transform-origin: center center;
}

.left-eye-group {
    animation-delay: 3s;
}

.right-eye-group {
    animation-delay: 4.5s;
}

@keyframes eyeBlink {
    0%, 8%, 70%, 100% { transform: scaleY(1); }
    9%, 10% { transform: scaleY(0.05); }
    11% { transform: scaleY(1); }
    72%, 73% { transform: scaleY(0.05); }
    74% { transform: scaleY(1); }
}

/* Add pupil tracking animation for more liveliness */
.elephant-eye-pupil {
    animation: pupilLook 12s infinite ease-in-out;
    transform-origin: center center;
}

.left-pupil {
    animation-delay: 1s;
}

.right-pupil {
    animation-delay: 1.5s;
}

@keyframes pupilLook {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(1px, -1px); }
    40% { transform: translate(-1px, 0); }
    60% { transform: translate(0, 1px); }
    80% { transform: translate(1px, 0); }
}

/* Add breathing effect to the head with running momentum */
.elephant-head {
    animation: headBreathe 4s infinite ease-in-out,
               headMomentum 0.9s infinite ease-in-out;
}

@keyframes headBreathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.02) translateY(-1px); }
}

@keyframes headMomentum {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-1px) rotate(-1.2deg); }
    50% { transform: translateX(0) rotate(0deg); }
    75% { transform: translateX(1px) rotate(1.2deg); }
}

/* Add subtle tusk movement */
.elephant-tusk {
    animation: tuskGleam 6s infinite ease-in-out;
}

.left-tusk {
    animation-delay: 0s;
}

.right-tusk {
    animation-delay: 3s;
}

@keyframes tuskGleam {
    0%, 100% { opacity: 0.9; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.2); }
}

/* Enhanced responsive design for mobile devices */
@media (max-width: 768px) {
    .elephant-container {
        width: 120px;
        height: 120px;
        animation-duration: 40s; /* Slightly slower on mobile for better visibility */
    }
    
    @keyframes runAroundScreen {
        /* Enhanced mobile keyframes with adjusted positions and smoother motion */
        0% { 
            bottom: 15px; 
            right: 15px; 
            transform: scaleX(1) translateY(0) rotate(0deg);
            filter: brightness(1) saturate(1);
        }
        3% { 
            bottom: 22px; 
            right: calc(85% - 90px);
            transform: scaleX(1) translateY(-7px) rotate(1deg);
        }
        8% { 
            bottom: 8px; 
            right: calc(65% - 70px);
            transform: scaleX(1) translateY(7px) rotate(-1deg);
            filter: brightness(1.1) saturate(1.1);
        }
        15% { 
            bottom: 25px; 
            right: calc(45% - 50px);
            transform: scaleX(1) translateY(-10px) rotate(1deg);
        }
        22% { 
            bottom: 5px; 
            right: calc(25% - 30px);
            transform: scaleX(1) translateY(10px) rotate(-1deg);
        }
        25% { 
            bottom: 15px; 
            right: calc(100% - 140px);
            transform: scaleX(-1) translateY(0) rotate(0deg);
            filter: brightness(1) saturate(1);
        }
        30% { 
            bottom: calc(20% + 10px); 
            right: calc(100% - 135px);
            transform: scaleX(-1) translateX(-6px) translateY(-3px) rotate(-1deg);
        }
        40% { 
            bottom: calc(50% + 10px); 
            right: calc(100% - 145px);
            transform: scaleX(-1) translateX(6px) translateY(-6px) rotate(1deg);
            filter: brightness(1.05) saturate(1.05);
        }
        48% { 
            bottom: calc(100% - 140px); 
            right: calc(100% - 140px);
            transform: scaleX(-1) translateX(0) translateY(0) rotate(0deg);
        }
        50% { 
            bottom: calc(100% - 140px); 
            right: calc(100% - 140px);
            transform: scaleX(-1) translateX(0) translateY(0) rotate(0deg);
            filter: brightness(1) saturate(1);
        }
        58% { 
            bottom: calc(100% - 125px); 
            right: calc(70% - 100px);
            transform: scaleX(-1) translateY(15px) rotate(-1deg);
            filter: brightness(1.1) saturate(1.1);
        }
        66% { 
            bottom: calc(100% - 155px); 
            right: calc(40% - 70px);
            transform: scaleX(-1) translateY(-15px) rotate(1deg);
        }
        73% { 
            bottom: calc(100% - 140px); 
            right: 15px;
            transform: scaleX(-1) translateX(0) translateY(0) rotate(0deg);
        }
        75% { 
            bottom: calc(100% - 140px); 
            right: 15px;
            transform: scaleX(1) translateX(0) translateY(0) rotate(0deg);
            filter: brightness(1) saturate(1);
        }
        82% { 
            bottom: calc(70% - 100px); 
            right: 20px;
            transform: scaleX(1) translateX(6px) translateY(8px) rotate(1deg);
            filter: brightness(1.05) saturate(1.05);
        }
        90% { 
            bottom: calc(40% - 70px); 
            right: 10px;
            transform: scaleX(1) translateX(-6px) translateY(15px) rotate(-1deg);
        }
        97% { 
            bottom: calc(10% - 30px); 
            right: 20px;
            transform: scaleX(1) translateX(4px) translateY(8px) rotate(1deg);
        }
        100% { 
            bottom: 15px; 
            right: 15px;
            transform: scaleX(1) translateY(0) rotate(0deg);
            filter: brightness(1) saturate(1);
        }
    }
}

/* Ultra-mobile optimization for very small screens */
@media (max-width: 480px) {
    .elephant-container {
        width: 100px;
        height: 100px;
        opacity: 0.8;
    }
}

/* Performance optimizations for all screen sizes */
.elephant-container {
    contain: layout style paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.elephant-container * {
    will-change: transform;
    backface-visibility: hidden;
}

/* Pause animations when not visible (Intersection Observer support) */
@media (prefers-reduced-motion: reduce) {
    .elephant-container,
    .elephant-container * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .elephant-container {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8)) contrast(1.2);
    }
}

/* Enhanced particle trail effects with sound waves */
.elephant-container::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(119, 123, 180, 0.6), transparent);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: trailParticle 0.5s infinite ease-out;
    pointer-events: none;
    z-index: -1;
}

.elephant-container::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(180, 183, 212, 0.4), transparent);
    border-radius: 50%;
    top: 60%;
    left: 30%;
    transform: translate(-50%, -50%);
    animation: trailParticle 0.7s infinite ease-out 0.2s;
    pointer-events: none;
    z-index: -1;
}

/* Add sound wave effect for footsteps */
.elephant-container {
    position: relative;
}

.elephant-container:before,
.elephant-container:after {
    animation-name: trailParticle, soundWave;
    animation-duration: 0.5s, 1.2s;
    animation-timing-function: ease-out, ease-out;
    animation-iteration-count: infinite, infinite;
    animation-delay: 0s, 0.3s;
}

@keyframes trailParticle {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) translateY(20px);
    }
}

@keyframes soundWave {
    0% {
        box-shadow: 0 0 0 0 rgba(119, 123, 180, 0.3);
        border-radius: 50%;
    }
    50% {
        box-shadow: 0 0 0 20px rgba(119, 123, 180, 0.1);
        border-radius: 50%;
    }
    100% {
        box-shadow: 0 0 0 40px rgba(119, 123, 180, 0);
        border-radius: 50%;
    }
}

/* Add dynamic shadow that responds to movement */
.elephant-container {
    position: fixed;
    width: 180px;
    height: 180px;
    z-index: 10;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
            drop-shadow(0 0 20px rgba(119, 123, 180, 0.1));
    pointer-events: none;
    animation: runAroundScreen 35s cubic-bezier(0.4, 0.0, 0.6, 1) infinite,
               dynamicGlow 3s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform, filter;
    backface-visibility: hidden;
}

@keyframes dynamicGlow {
    0%, 100% {
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 20px rgba(119, 123, 180, 0.1));
    }
    50% {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) 
                drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))
                drop-shadow(0 0 30px rgba(119, 123, 180, 0.2));
    }
}

/* Add subtle hover interaction when user gets close */
.elephant-container:hover {
    animation-play-state: paused;
    transform: scale(1.1) !important;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4)) 
            drop-shadow(0 0 40px rgba(119, 123, 180, 0.3)) !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.6, 1);
}

/* Enhanced body texture with breathing effect */
.elephant-body {
    animation: bodyBounce 0.3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94),
               bodyTexture 8s infinite ease-in-out !important;
}

@keyframes bodyBounce {
    0% { transform: translateY(0) scaleY(1); }
    30% { transform: translateY(-6px) scaleY(0.98); }
    60% { transform: translateY(-2px) scaleY(1.01); }
    100% { transform: translateY(0) scaleY(1); }
}

@keyframes bodyTexture {
    0%, 100% { 
        filter: brightness(1) saturate(1);
    }
    50% { 
        filter: brightness(1.05) saturate(1.1);
    }
}

/* Add ear detail animation */
.ear-detail {
    animation: earDetailShimmer 4s infinite ease-in-out;
}

@keyframes earDetailShimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Add trunk tip animation for more liveliness */
.trunk-tip {
    animation: trunkTipTwitch 2s infinite ease-in-out;
}

@keyframes trunkTipTwitch {
    0%, 90%, 100% { transform: translateX(0) translateY(0); }
    5% { transform: translateX(1px) translateY(-1px); }
    10% { transform: translateX(-1px) translateY(1px); }
    15% { transform: translateX(0) translateY(0); }
}

/* Enhanced leg shadows for depth */
.elephant-leg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Add subtle ground impact effect during running with dust particles */
.elephant-legs {
    animation: groundImpact 1.8s infinite ease-in-out;
    position: relative;
}

.elephant-legs::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 80px;
    height: 8px;
    background: radial-gradient(ellipse, rgba(119, 123, 180, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: dustCloud 1.8s infinite ease-out;
}

@keyframes groundImpact {
    0%, 100% { 
        filter: drop-shadow(0 0 0 transparent);
    }
    25% { 
        filter: drop-shadow(0 1px 6px rgba(119, 123, 180, 0.2));
    }
    50% { 
        filter: drop-shadow(0 2px 8px rgba(119, 123, 180, 0.3));
    }
    75% { 
        filter: drop-shadow(0 1px 6px rgba(119, 123, 180, 0.2));
    }
}

@keyframes dustCloud {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.5);
    }
}

/* New Party Mode Animations */
@keyframes partyGlow {
    0% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 20px rgba(255, 0, 128, 0.4));
    }
    100% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 30px rgba(0, 255, 255, 0.6));
    }
}

@keyframes partyBounce {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-10px) rotate(5deg); 
    }
    50% { 
        transform: translateY(-20px) rotate(0deg); 
    }
    75% { 
        transform: translateY(-10px) rotate(-5deg); 
    }
}

@keyframes dynamicGlow {
    0% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 20px rgba(119, 123, 180, 0.1));
    }
    50% { 
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) 
                drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))
                drop-shadow(0 0 25px rgba(119, 123, 180, 0.3));
    }
    100% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 20px rgba(119, 123, 180, 0.1));
    }
}

/* Turbo Mode Animations */
@keyframes turboGlow {
    0% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 30px rgba(255, 165, 0, 0.8));
    }
    100% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 40px rgba(255, 69, 0, 0.9));
    }
}

@keyframes turboShake {
    0%, 100% { 
        transform: translateX(0) translateY(0); 
    }
    25% { 
        transform: translateX(-2px) translateY(1px); 
    }
    50% { 
        transform: translateX(2px) translateY(-1px); 
    }
    75% { 
        transform: translateX(-1px) translateY(2px); 
    }
}

/* Celebration Mode Animations */
@keyframes celebrationSpin {
    0%, 100% { 
        transform: rotateZ(0deg) scale(1); 
    }
    25% { 
        transform: rotateZ(90deg) scale(1.1); 
    }
    50% { 
        transform: rotateZ(180deg) scale(1.2); 
    }
    75% { 
        transform: rotateZ(270deg) scale(1.1); 
    }
}

@keyframes celebrationGlow {
    0% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
    }
    100% { 
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
                drop-shadow(0 0 50px rgba(255, 20, 147, 0.9));
    }
}

/* Trail Effect Animations */
@keyframes partyTrail {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }
}

@keyframes turboTrail {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.8;
    }
}

@keyframes celebrationTrail {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    33% { 
        transform: translate(-50%, -50%) scale(1.8) rotate(120deg);
        opacity: 0.7;
    }
    66% { 
        transform: translate(-50%, -50%) scale(2.2) rotate(240deg);
        opacity: 0.5;
    }
}

/* PHP Logo Glow Animation */
.php-logo {
    animation: phpLogoGlow 2.5s ease-in-out infinite;
    transform-origin: center center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes phpLogoGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 8px rgba(119, 123, 180, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(119, 123, 180, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transform: scale(1.08);
    }
}

/* Elephant pulsing glow animation - only affects filter, not transform */
@keyframes elephantGlow {
    0%, 100% { 
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(119, 123, 180, 0.2));
    }
    50% { 
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 30px rgba(119, 123, 180, 0.4));
    }
}



/* Confetti Animation */
@keyframes confettiFall {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rz));
        opacity: 0;
    }
}

/* Firework Particle Animation */
@keyframes fireworkParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* Enhanced click interaction */
.elephant-container {
    transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.elephant-container:active {
    transform: scale(0.95) !important;
}

/* Cursor hint */
.elephant-container:hover {
    cursor: pointer;
}

/* Door Styles */
.door-container {
    position: relative;
    width: 120px;
    height: 150px;
    z-index: 50;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.door-container:hover {
    transform: scale(1.02);
}

.door-frame-outer {
    width: 100%;
    height: 100%;
    background: #5D4037; /* Dark wood */
    border: 10px solid #3E2723;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    box-shadow: -5px 0 20px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.2);
    /* Wood texture */
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 4px);
}

.door-lintel {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    height: 20px;
    background: #3E2723;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 2;
    /* Carving detail */
    background-image: radial-gradient(circle at 50% 50%, #5D4037 2px, transparent 3px);
    background-size: 10px 10px;
}

.door-panel {
    width: 50%;
    height: 100%;
    background: #8D6E63;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 1px solid #4E342E;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 15px;
    transform-style: preserve-3d;
    /* Wood grain */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
}

.left-panel {
    transform-origin: left;
    border-right: 1px solid #3E2723;
}

.right-panel {
    transform-origin: right;
    border-left: 1px solid #3E2723;
}

.door-container.open .left-panel {
    transform: rotateY(-110deg);
}

.door-container.open .right-panel {
    transform: rotateY(110deg);
}

.panel-inner {
    width: 85%;
    height: 90%;
    border: 2px inset #6D4C41;
    background: #795548;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-shadow: inset 1px 1px 5px rgba(0,0,0,0.3);
}

.door-carving {
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 0px rgba(255,255,255,0.1)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.5));
}

.carving-shape {
    fill: #5D4037;
    stroke: #4E342E;
    stroke-width: 0.5;
}

.carving-eye {
    fill: #3E2723;
}

.carving-tusk {
    fill: none;
    stroke: #D7CCC8;
    stroke-width: 2;
    stroke-linecap: round;
}

.door-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 24px;
    z-index: 5;
}

.left-panel .door-handle {
    right: 4px;
    width: 14px;
    height: 14px;
    border: 3px solid #FFD700;
    border-radius: 50%;
    border-right: 1px solid transparent; /* Open ring look */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.right-panel .door-handle {
    left: 4px;
    width: 14px;
    height: 14px;
    border: 3px solid #FFD700;
    border-radius: 50%;
    border-left: 1px solid transparent;
    box-shadow: -1px 1px 2px rgba(0,0,0,0.4);
}

.door-message {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #FFD700;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 4px;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
}

.door-container.open .door-message {
    opacity: 0;
}

/* Elephant Transition Classes */
.elephant-container.returning-home {
    animation: none !important;
    transition: bottom 1.5s cubic-bezier(0.4, 0.0, 0.2, 1), right 1.5s cubic-bezier(0.4, 0.0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: scale(0.5) !important; /* Face right and shrink */
    filter: brightness(0.8);
    pointer-events: none !important;
}

.elephant-container.hidden-behind-door {
    animation: none !important;
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.5s ease;
}

.elephant-container.exiting-door {
    animation: none !important;
    transition: all 1s cubic-bezier(0.0, 0.0, 0.2, 1);
    opacity: 1;
    transform: scaleX(-1) !important; /* Face left */
}