/* Paulchen Phase-Specific Animations */

/* Excitement Phase - Faster and more erratic flying */
.paulchen-excitement {
    animation: paulchenFlyExcitement 8s ease-in-out infinite !important;
}

@keyframes paulchenFlyExcitement {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    10% { 
        transform: translate(20px, -15px) rotate(5deg); 
    }
    20% { 
        transform: translate(-15px, 10px) rotate(-3deg); 
    }
    30% { 
        transform: translate(25px, -5px) rotate(8deg); 
    }
    40% { 
        transform: translate(-10px, -20px) rotate(-5deg); 
    }
    50% { 
        transform: translate(15px, 5px) rotate(3deg); 
    }
    60% { 
        transform: translate(-20px, -10px) rotate(-7deg); 
    }
    70% { 
        transform: translate(10px, 15px) rotate(4deg); 
    }
    80% { 
        transform: translate(-5px, -25px) rotate(-2deg); 
    }
    90% { 
        transform: translate(30px, 0px) rotate(6deg); 
    }
}

/* Urgency Phase - Even faster, more erratic, and spinning */
.paulchen-urgency {
    animation: paulchenFlyUrgency 6s ease-in-out infinite !important;
}

@keyframes paulchenFlyUrgency {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    5% { 
        transform: translate(30px, -20px) rotate(15deg); 
    }
    10% { 
        transform: translate(-25px, 15px) rotate(-10deg); 
    }
    15% { 
        transform: translate(35px, -10px) rotate(25deg); 
    }
    20% { 
        transform: translate(-15px, -30px) rotate(-15deg); 
    }
    25% { 
        transform: translate(20px, 20px) rotate(20deg); 
    }
    30% { 
        transform: translate(-30px, -15px) rotate(-25deg); 
    }
    35% { 
        transform: translate(25px, 25px) rotate(30deg); 
    }
    40% { 
        transform: translate(-20px, -25px) rotate(-20deg); 
    }
    45% { 
        transform: translate(40px, 10px) rotate(35deg); 
    }
    50% { 
        transform: translate(-35px, 20px) rotate(-30deg); 
    }
    55% { 
        transform: translate(15px, -35px) rotate(25deg); 
    }
    60% { 
        transform: translate(-25px, -20px) rotate(-35deg); 
    }
    65% { 
        transform: translate(30px, 15px) rotate(40deg); 
    }
    70% { 
        transform: translate(-15px, 30px) rotate(-25deg); 
    }
    75% { 
        transform: translate(25px, -25px) rotate(30deg); 
    }
    80% { 
        transform: translate(-30px, 10px) rotate(-40deg); 
    }
    85% { 
        transform: translate(20px, 25px) rotate(35deg); 
    }
    90% { 
        transform: translate(-20px, -30px) rotate(-30deg); 
    }
    95% { 
        transform: translate(35px, -15px) rotate(45deg); 
    }
}

/* Celebration Phase - Extremely erratic and constant spinning */
.paulchen-celebration {
    animation: paulchenFlyCelebration 4s ease-in-out infinite !important;
}

@keyframes paulchenFlyCelebration {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    2% { 
        transform: translate(40px, -30px) rotate(45deg); 
    }
    4% { 
        transform: translate(-35px, 25px) rotate(-60deg); 
    }
    6% { 
        transform: translate(50px, -20px) rotate(90deg); 
    }
    8% { 
        transform: translate(-25px, -40px) rotate(-75deg); 
    }
    10% { 
        transform: translate(30px, 30px) rotate(120deg); 
    }
    12% { 
        transform: translate(-45px, -25px) rotate(-90deg); 
    }
    14% { 
        transform: translate(35px, 35px) rotate(150deg); 
    }
    16% { 
        transform: translate(-30px, -35px) rotate(-105deg); 
    }
    18% { 
        transform: translate(45px, 15px) rotate(180deg); 
    }
    20% { 
        transform: translate(-40px, 25px) rotate(-135deg); 
    }
    22% { 
        transform: translate(25px, -45px) rotate(210deg); 
    }
    24% { 
        transform: translate(-35px, -30px) rotate(-150deg); 
    }
    26% { 
        transform: translate(40px, 20px) rotate(240deg); 
    }
    28% { 
        transform: translate(-25px, 35px) rotate(-165deg); 
    }
    30% { 
        transform: translate(30px, -35px) rotate(270deg); 
    }
    32% { 
        transform: translate(-40px, 15px) rotate(-180deg); 
    }
    34% { 
        transform: translate(35px, 30px) rotate(300deg); 
    }
    36% { 
        transform: translate(-30px, -40px) rotate(-195deg); 
    }
    38% { 
        transform: translate(45px, -25px) rotate(330deg); 
    }
    40% { 
        transform: translate(-35px, 30px) rotate(-210deg); 
    }
    42% { 
        transform: translate(25px, 40px) rotate(360deg); 
    }
    44% { 
        transform: translate(-40px, -20px) rotate(-225deg); 
    }
    46% { 
        transform: translate(30px, -40px) rotate(390deg); 
    }
    48% { 
        transform: translate(-25px, 35px) rotate(-240deg); 
    }
    50% { 
        transform: translate(40px, 25px) rotate(420deg); 
    }
    52% { 
        transform: translate(-35px, -30px) rotate(-255deg); 
    }
    54% { 
        transform: translate(35px, 35px) rotate(450deg); 
    }
    56% { 
        transform: translate(-30px, -35px) rotate(-270deg); 
    }
    58% { 
        transform: translate(45px, -20px) rotate(480deg); 
    }
    60% { 
        transform: translate(-40px, 25px) rotate(-285deg); 
    }
    62% { 
        transform: translate(25px, 40px) rotate(510deg); 
    }
    64% { 
        transform: translate(-35px, -25px) rotate(-300deg); 
    }
    66% { 
        transform: translate(30px, -40px) rotate(540deg); 
    }
    68% { 
        transform: translate(-25px, 35px) rotate(-315deg); 
    }
    70% { 
        transform: translate(40px, 30px) rotate(570deg); 
    }
    72% { 
        transform: translate(-30px, -35px) rotate(-330deg); 
    }
    74% { 
        transform: translate(35px, 25px) rotate(600deg); 
    }
    76% { 
        transform: translate(-40px, 20px) rotate(-345deg); 
    }
    78% { 
        transform: translate(25px, -40px) rotate(630deg); 
    }
    80% { 
        transform: translate(-35px, 30px) rotate(-360deg); 
    }
    82% { 
        transform: translate(45px, 35px) rotate(660deg); 
    }
    84% { 
        transform: translate(-30px, -25px) rotate(-375deg); 
    }
    86% { 
        transform: translate(30px, -35px) rotate(690deg); 
    }
    88% { 
        transform: translate(-25px, 40px) rotate(-390deg); 
    }
    90% { 
        transform: translate(40px, 20px) rotate(720deg); 
    }
    92% { 
        transform: translate(-35px, -30px) rotate(-405deg); 
    }
    94% { 
        transform: translate(35px, 30px) rotate(750deg); 
    }
    96% { 
        transform: translate(-40px, 25px) rotate(-420deg); 
    }
    98% { 
        transform: translate(25px, -40px) rotate(780deg); 
    }
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 480px) {
    .paulchen-excitement {
        animation: paulchenFlyExcitementMobile 8s ease-in-out infinite !important;
    }
    
    .paulchen-urgency {
        animation: paulchenFlyUrgencyMobile 6s ease-in-out infinite !important;
    }
    
    .paulchen-celebration {
        animation: paulchenFlyCelebrationMobile 4s ease-in-out infinite !important;
    }
}

@keyframes paulchenFlyExcitementMobile {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    10% { 
        transform: translate(15px, -10px) rotate(3deg); 
    }
    20% { 
        transform: translate(-10px, 8px) rotate(-2deg); 
    }
    30% { 
        transform: translate(18px, -3px) rotate(5deg); 
    }
    40% { 
        transform: translate(-8px, -15px) rotate(-3deg); 
    }
    50% { 
        transform: translate(12px, 4px) rotate(2deg); 
    }
    60% { 
        transform: translate(-15px, -8px) rotate(-4deg); 
    }
    70% { 
        transform: translate(8px, 12px) rotate(3deg); 
    }
    80% { 
        transform: translate(-4px, -18px) rotate(-1deg); 
    }
    90% { 
        transform: translate(20px, 0px) rotate(4deg); 
    }
}

@keyframes paulchenFlyUrgencyMobile {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    5% { 
        transform: translate(20px, -15px) rotate(10deg); 
    }
    10% { 
        transform: translate(-18px, 12px) rotate(-7deg); 
    }
    15% { 
        transform: translate(25px, -8px) rotate(18deg); 
    }
    20% { 
        transform: translate(-12px, -22px) rotate(-12deg); 
    }
    25% { 
        transform: translate(15px, 15px) rotate(15deg); 
    }
    30% { 
        transform: translate(-22px, -12px) rotate(-20deg); 
    }
    35% { 
        transform: translate(18px, 18px) rotate(22deg); 
    }
    40% { 
        transform: translate(-15px, -18px) rotate(-15deg); 
    }
    45% { 
        transform: translate(28px, 8px) rotate(25deg); 
    }
    50% { 
        transform: translate(-25px, 15px) rotate(-22deg); 
    }
    55% { 
        transform: translate(12px, -25px) rotate(18deg); 
    }
    60% { 
        transform: translate(-18px, -15px) rotate(-25deg); 
    }
    65% { 
        transform: translate(22px, 12px) rotate(28deg); 
    }
    70% { 
        transform: translate(-12px, 22px) rotate(-18deg); 
    }
    75% { 
        transform: translate(18px, -18px) rotate(22deg); 
    }
    80% { 
        transform: translate(-22px, 8px) rotate(-28deg); 
    }
    85% { 
        transform: translate(15px, 18px) rotate(25deg); 
    }
    90% { 
        transform: translate(-15px, -22px) rotate(-22deg); 
    }
    95% { 
        transform: translate(25px, -12px) rotate(30deg); 
    }
}

@keyframes paulchenFlyCelebrationMobile {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    2% { 
        transform: translate(30px, -25px) rotate(35deg); 
    }
    4% { 
        transform: translate(-25px, 20px) rotate(-45deg); 
    }
    6% { 
        transform: translate(35px, -15px) rotate(65deg); 
    }
    8% { 
        transform: translate(-20px, -30px) rotate(-55deg); 
    }
    10% { 
        transform: translate(25px, 25px) rotate(85deg); 
    }
    12% { 
        transform: translate(-30px, -20px) rotate(-65deg); 
    }
    14% { 
        transform: translate(25px, 25px) rotate(105deg); 
    }
    16% { 
        transform: translate(-25px, -25px) rotate(-75deg); 
    }
    18% { 
        transform: translate(30px, 12px) rotate(125deg); 
    }
    20% { 
        transform: translate(-30px, 20px) rotate(-95deg); 
    }
    22% { 
        transform: translate(20px, -35px) rotate(145deg); 
    }
    24% { 
        transform: translate(-25px, -25px) rotate(-105deg); 
    }
    26% { 
        transform: translate(30px, 15px) rotate(165deg); 
    }
    28% { 
        transform: translate(-20px, 25px) rotate(-115deg); 
    }
    30% { 
        transform: translate(25px, -25px) rotate(185deg); 
    }
    32% { 
        transform: translate(-30px, 12px) rotate(-125deg); 
    }
    34% { 
        transform: translate(25px, 25px) rotate(205deg); 
    }
    36% { 
        transform: translate(-25px, -30px) rotate(-135deg); 
    }
    38% { 
        transform: translate(30px, -20px) rotate(225deg); 
    }
    40% { 
        transform: translate(-25px, 25px) rotate(-145deg); 
    }
    42% { 
        transform: translate(20px, 30px) rotate(245deg); 
    }
    44% { 
        transform: translate(-30px, -15px) rotate(-155deg); 
    }
    46% { 
        transform: translate(25px, -30px) rotate(265deg); 
    }
    48% { 
        transform: translate(-20px, 25px) rotate(-165deg); 
    }
    50% { 
        transform: translate(30px, 20px) rotate(285deg); 
    }
    52% { 
        transform: translate(-25px, -25px) rotate(-175deg); 
    }
    54% { 
        transform: translate(25px, 25px) rotate(305deg); 
    }
    56% { 
        transform: translate(-25px, -25px) rotate(-185deg); 
    }
    58% { 
        transform: translate(30px, -15px) rotate(325deg); 
    }
    60% { 
        transform: translate(-30px, 20px) rotate(-195deg); 
    }
    62% { 
        transform: translate(20px, 30px) rotate(345deg); 
    }
    64% { 
        transform: translate(-25px, -20px) rotate(-205deg); 
    }
    66% { 
        transform: translate(25px, -30px) rotate(365deg); 
    }
    68% { 
        transform: translate(-20px, 25px) rotate(-215deg); 
    }
    70% { 
        transform: translate(30px, 25px) rotate(385deg); 
    }
    72% { 
        transform: translate(-25px, -25px) rotate(-225deg); 
    }
    74% { 
        transform: translate(25px, 20px) rotate(405deg); 
    }
    76% { 
        transform: translate(-30px, 15px) rotate(-235deg); 
    }
    78% { 
        transform: translate(20px, -30px) rotate(425deg); 
    }
    80% { 
        transform: translate(-25px, 25px) rotate(-245deg); 
    }
    82% { 
        transform: translate(30px, 25px) rotate(445deg); 
    }
    84% { 
        transform: translate(-25px, -20px) rotate(-255deg); 
    }
    86% { 
        transform: translate(25px, -25px) rotate(465deg); 
    }
    88% { 
        transform: translate(-20px, 30px) rotate(-265deg); 
    }
    90% { 
        transform: translate(30px, 15px) rotate(485deg); 
    }
    92% { 
        transform: translate(-25px, -25px) rotate(-275deg); 
    }
    94% { 
        transform: translate(25px, 25px) rotate(505deg); 
    }
    96% { 
        transform: translate(-30px, 20px) rotate(-285deg); 
    }
    98% { 
        transform: translate(20px, -30px) rotate(525deg); 
    }
}