/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

/* === ENTRANCE ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === ATTENTION ANIMATIONS === */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(1.1);
    }
    20%, 40% {
        transform: scale(1);
    }
}

/* === LOADING ANIMATIONS === */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes dots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}

/* === BACKGROUND ANIMATIONS === */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 202, 58, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 202, 58, 0.8);
    }
}

/* === PARTICLE ANIMATIONS === */
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.5) rotate(360deg);
    }
}

@keyframes confetti {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(300px) rotate(720deg);
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* === STAT BAR ANIMATIONS === */
@keyframes fillBar {
    from {
        width: 0;
    }
    to {
        width: var(--fill-width);
    }
}

@keyframes depletBar {
    from {
        width: 100%;
    }
    to {
        width: var(--fill-width);
    }
}

@keyframes warningPulse {
    0%, 100% {
        background-color: var(--danger-red);
        box-shadow: 0 0 0 rgba(255, 89, 94, 0);
    }
    50% {
        background-color: #ff7b7e;
        box-shadow: 0 0 15px rgba(255, 89, 94, 0.8);
    }
}

/* === PET ANIMATIONS === */
@keyframes petIdle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes petHappy {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

@keyframes petSad {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

@keyframes petSleep {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes petEat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* === BUTTON ANIMATIONS === */
@keyframes buttonPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes buttonSuccess {
    0% {
        background-color: var(--secondary-green);
    }
    50% {
        background-color: #6fdb7f;
    }
    100% {
        background-color: var(--secondary-green);
    }
}

@keyframes buttonError {
    0%, 100% {
        background-color: var(--danger-red);
    }
    50% {
        background-color: #ff7b7e;
    }
}

/* === NOTIFICATION ANIMATIONS === */
@keyframes slideInNotification {
    from {
        transform: translateX(-50%) translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-100px);
        opacity: 0;
    }
}

/* === MODAL ANIMATIONS === */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === LEVEL UP ANIMATIONS === */
@keyframes levelUp {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes starBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(3) rotate(360deg);
        opacity: 0;
    }
}

/* === ACHIEVEMENT UNLOCK === */
@keyframes achievementUnlock {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes achievementGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(138, 201, 38, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(138, 201, 38, 1);
    }
}

/* === COIN ANIMATIONS === */
@keyframes coinFlip {
    0% {
        transform: rotateY(0deg) translateY(0);
    }
    50% {
        transform: rotateY(180deg) translateY(-20px);
    }
    100% {
        transform: rotateY(360deg) translateY(0);
    }
}

@keyframes coinCollect {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.3) translateY(-50px);
        opacity: 0;
    }
}

/* === XP BAR ANIMATION === */
@keyframes xpGain {
    0% {
        width: var(--start-width);
    }
    100% {
        width: var(--end-width);
    }
}

/* === EVOLUTION ANIMATION === */
@keyframes evolve {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.5);
    }
}

@keyframes evolutionLight {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* === DEATH ANIMATION === */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes spiritRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0.5);
        opacity: 0;
    }
}

/* === APPLY ANIMATIONS TO ELEMENTS === */

/* Pet animations */
.pet-canvas.idle {
    animation: petIdle 3s ease-in-out infinite;
}

.pet-canvas.happy {
    animation: petHappy 0.5s ease-in-out;
}

.pet-canvas.sad {
    animation: petSad 0.5s ease-in-out;
}

.pet-canvas.sleeping {
    animation: petSleep 2s ease-in-out infinite;
}

.pet-canvas.eating {
    animation: petEat 0.5s ease-in-out;
}

.pet-canvas.evolving {
    animation: evolve 2s ease-in-out;
}

/* UI entrance animations */
.game-header {
    animation: slideInDown 0.5s ease-out;
}

.tamagotchi-device {
    animation: slideInLeft 0.5s ease-out 0.2s both;
}

.game-controls {
    animation: slideInRight 0.5s ease-out 0.3s both;
}

.control-panel {
    animation: slideInUp 0.5s ease-out;
}

/* Stat bar warnings */
.stat-bar-fill.warning {
    animation: warningPulse 1s ease-in-out infinite;
}

/* Achievement unlock */
.achievement.unlocking {
    animation: achievementUnlock 0.5s ease-out, achievementGlow 2s ease-in-out infinite 0.5s;
}

/* Button feedback */
.device-btn:active {
    animation: buttonPress 0.2s ease-out;
}

.action-btn.success {
    animation: buttonSuccess 0.5s ease-out;
}

.action-btn.error {
    animation: buttonError 0.5s ease-out;
}

/* Notification */
.notification.show {
    animation: slideInNotification 0.3s ease-out;
}

.notification.hide {
    animation: slideOutNotification 0.3s ease-out;
}

/* Modal */
.modal {
    animation: modalFadeIn 0.3s ease-out;
}

.modal-content {
    animation: modalSlideUp 0.3s ease-out;
}

/* Particles */
.particle {
    animation: floatUp 2s ease-out forwards;
}

.particle.confetti {
    animation: confetti 3s ease-out forwards;
}

.particle.sparkle {
    animation: sparkle 1s ease-out forwards;
}

/* Coins */
.coin-particle {
    animation: coinFlip 1s ease-out, floatUp 2s ease-out;
}

/* Level up effect */
.level-up-effect {
    animation: levelUp 0.8s ease-out;
}

.star-burst {
    animation: starBurst 1s ease-out forwards;
}

/* Loading states */
.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Glow effects */
.glow-pulse {
    animation: glow 2s ease-in-out infinite;
}

/* Float effect */
.floating {
    animation: float 3s ease-in-out infinite;
}

/* Wiggle effect */
.wiggle {
    animation: wiggle 0.5s ease-in-out;
}

/* Bounce effect */
.bounce {
    animation: bounce 0.5s ease-in-out;
}

/* Shake effect */
.shake {
    animation: shake 0.5s ease-in-out;
}