/* =============================================================================
   RAKUN DOJO - ANIMATIONS
   Complete animation system for Rakun sprites and UI elements
   ============================================================================= */

/* =============================================================================
   RAKUN SPRITE ANIMATIONS
   ============================================================================= */

/* Base Rakun Animations */
.rakun-sprite {
  transition: all var(--transition-base);
  transform-origin: center bottom;
}

/* Idle Animation (default) */
.rakun-idle .rakun-sprite {
  animation: idleBreathe 4s ease-in-out infinite;
}

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

/* Happy Animation */
.rakun-sprite.happy,
.rakun-happy .rakun-sprite {
  animation: happyBounce 2s ease-in-out infinite;
}

@keyframes happyBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) scale(1);
  }
  10% {
    transform: translateY(-8px) scale(1.05);
  }
  40% {
    transform: translateY(-6px) scale(1.03);
  }
  60% {
    transform: translateY(-4px) scale(1.02);
  }
}

/* Sad Animation */
.rakun-sprite.sad,
.rakun-sad .rakun-sprite {
  animation: sadSway 3s ease-in-out infinite;
}

@keyframes sadSway {
  0%, 100% {
    transform: translateX(0) scale(0.95);
  }
  25% {
    transform: translateX(-2px) scale(0.93);
  }
  75% {
    transform: translateX(2px) scale(0.93);
  }
}

/* Sick Animation */
.rakun-sprite.sick,
.rakun-sick .rakun-sprite {
  animation: sickSway 3s ease-in-out infinite;
  filter: hue-rotate(120deg) saturate(0.7);
}

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

/* Tired Animation */
.rakun-sprite.tired,
.rakun-tired .rakun-sprite {
  animation: tiredNod 4s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes tiredNod {
  0%, 90%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  5% {
    transform: translateY(2px) rotate(1deg);
  }
  10% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Sleeping Animation */
.rakun-sleeping .rakun-sprite {
  animation: sleeping 6s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes sleeping {
  0%, 100% {
    transform: scale(0.9) translateY(5px);
  }
  50% {
    transform: scale(0.92) translateY(3px);
  }
}

/* Sleep Z's Effect */
.rakun-sleeping::after {
  content: '💤';
  position: absolute;
  top: -20px;
  right: 20px;
  font-size: 1.5rem;
  animation: sleepZ 3s ease-in-out infinite;
}

@keyframes sleepZ {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
}

/* =============================================================================
   ACTION ANIMATIONS
   ============================================================================= */

/* Eating Animation */
.rakun-eating .rakun-sprite {
  animation: eating 0.8s ease-in-out 3;
}

@keyframes eating {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-2deg);
  }
  50% {
    transform: scale(0.95) rotate(2deg);
  }
  75% {
    transform: scale(1.05) rotate(-1deg);
  }
}

/* Playing Animation */
.rakun-playing .rakun-sprite {
  animation: playing 1.2s ease-in-out infinite;
}

@keyframes playing {
  0%, 100% {
    transform: scale(1) rotate(0deg) translateY(0);
  }
  25% {
    transform: scale(1.1) rotate(-10deg) translateY(-8px);
  }
  50% {
    transform: scale(1.05) rotate(5deg) translateY(-4px);
  }
  75% {
    transform: scale(1.08) rotate(-5deg) translateY(-6px);
  }
}

/* Training Animation */
.rakun-training .rakun-sprite {
  animation: training 1s ease-in-out 2;
}

@keyframes training {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  15% {
    transform: scale(1.2) rotate(-15deg) translateX(-5px);
  }
  30% {
    transform: scale(1.1) rotate(10deg) translateX(5px);
  }
  45% {
    transform: scale(1.25) rotate(-10deg) translateX(-3px);
  }
  60% {
    transform: scale(1.15) rotate(15deg) translateX(3px);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
  }
}

/* Training Energy Aura */
.rakun-training::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: trainingAura 1s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes trainingAura {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Cleaning Animation */
.rakun-cleaning .rakun-sprite {
  animation: cleaning 0.6s ease-in-out infinite;
}

@keyframes cleaning {
  0%, 100% {
    transform: scale(1) rotate(0deg) translateX(0);
  }
  25% {
    transform: scale(1.05) rotate(-5deg) translateX(-3px);
  }
  50% {
    transform: scale(1.02) rotate(0deg) translateX(0);
  }
  75% {
    transform: scale(1.05) rotate(5deg) translateX(3px);
  }
}

/* =============================================================================
   RAKUN ACTION ANIMATIONS (NEW)
   ============================================================================= */

.rakun-display.performing-action {
    position: relative;
    z-index: 10;
}

/* Feed animations */
.rakun-display.eatingNomNom {
    animation: eatingAction 2s ease-in-out;
}

@keyframes eatingAction {
    0%, 100% { transform: scale(1); }
    25%, 75% { transform: scale(1.1); }
    50% { transform: scale(1.05); }
}

/* Play animations */
.rakun-display.playFootballKick {
    animation: kicking 1.5s ease-in-out;
}

@keyframes kicking {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    50% { transform: translateX(10px) rotate(5deg); }
    75% { transform: translateX(-5px) rotate(-2deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

.rakun-display.singDanceSway {
    animation: dancing 3s ease-in-out;
}

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

.rakun-display.playRCCarFocus {
    animation: playingRC 2s ease-in-out;
}

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

/* Train animations */
.rakun-display.trainingSpinHorizontalEnhanced {
    animation: trainingAction 1s ease-in-out;
}

@keyframes trainingAction {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Rest animations */
.rakun-display.restingSleepZzz {
    animation: resting 2s ease-in-out;
}

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

/* Clean animations */
.rakun-display.cleaningScrubBubbles {
    animation: cleaningAction 2s ease-in-out;
}

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

/* Success particle effect */
.rakun-display.performing-action::after {
    content: '✨';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    animation: sparkle 2s ease-out;
    pointer-events: none;
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(0.8);
    }
}

/* =============================================================================
   UI ELEMENT ANIMATIONS
   ============================================================================= */

/* Action Button Success */
@keyframes actionSuccess {
  0% {
    transform: scale(1);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  }
  50% {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.1) 100%);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  }
  100% {
    transform: scale(1);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  }
}

.action-success {
  animation: actionSuccess 0.6s ease-out;
}

/* Stat Bar Fill Animation */
.stat-fill {
  position: relative;
  overflow: hidden;
}

.stat-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: statShine 2s ease-in-out infinite;
}

@keyframes statShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Progress Bar Animation */
.progress-bar-animated .progress-fill {
  animation: progressPulse 2s ease-in-out infinite;
}

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

/* XP Bar Pulse */
.xp-fill {
  position: relative;
}

.xp-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  opacity: 0;
  animation: xpPulse 3s ease-in-out infinite;
}

@keyframes xpPulse {
  0%, 100% {
    opacity: 0;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.5;
    transform: scaleY(1.5);
  }
}

/* =============================================================================
   LEVEL UP ANIMATIONS
   ============================================================================= */

.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--transition-slow);
  animation: overlayFadeIn 0.5s ease-out;
}

.level-up-overlay.show {
  opacity: 1;
}

.level-up-overlay.hide {
  animation: overlayFadeOut 0.5s ease-in;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

@keyframes overlayFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

.level-up-content {
  text-align: center;
  color: white;
  animation: levelUpBounce 0.6s ease-out;
}

@keyframes levelUpBounce {
  0% {
    transform: scale(0.3) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.level-up-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  animation: levelUpSpin 2s ease-out;
}

@keyframes levelUpSpin {
  0% {
    transform: rotate(0deg) scale(0.5);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.level-up-sparkles {
  animation: levelUpSparkle 2s ease-out infinite;
}

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

.level-up-text {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
  background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: levelUpGradient 2s ease-in-out infinite;
}

@keyframes levelUpGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.level-up-level {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-accent-blue);
}

@keyframes levelUpPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  20% {
    transform: scale(1.2);
    opacity: 1;
  }
  40% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* =============================================================================
   NOTIFICATION AND MESSAGE ANIMATIONS
   ============================================================================= */

/* Message slide-in animation */
.message {
  animation: messageSlideIn 0.3s ease-out;
}

.message.fade-out {
  animation: messageSlideOut 0.3s ease-in;
}

@keyframes messageSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes messageSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Notification bounce */
.notification-bounce {
  animation: notificationBounce 0.6s ease-out;
}

@keyframes notificationBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* =============================================================================
   LOADING AND TRANSITION ANIMATIONS
   ============================================================================= */

/* Loading spinner */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Loading shimmer effect */
.loading-shimmer {
  background: linear-gradient(90deg, 
    var(--bg-secondary) 25%, 
    var(--bg-tertiary) 50%, 
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Loading dots */
.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

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

/* Pulse Animation for Loading States */
.loading-pulse {
  animation: pulse 2s ease-in-out infinite;
}

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

/* Fade in/out transitions */
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.fade-out {
  animation: fadeOut 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Slide up animation */
.slide-up {
  animation: slideUp 0.3s ease-out;
}

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

/* Scale in animation */
.scale-in {
  animation: scaleIn 0.3s ease-out;
}

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

/* =============================================================================
   SPECIAL EFFECTS ANIMATIONS
   ============================================================================= */

/* Floating particles */
.particle-float {
  animation: particleFloat 3s ease-out forwards;
}

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

/* Glowing effect */
.glow-effect {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
}

/* Pulse effect */
.pulse-effect {
  animation: pulseEffect 2s ease-in-out infinite;
}

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

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

@keyframes bounceEffect {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

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

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

/* =============================================================================
   CONFETTI AND CELEBRATION ANIMATIONS
   ============================================================================= */

@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotateX(0deg) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotateX(720deg) rotateY(360deg);
    opacity: 0;
  }
}

.confetti-particle {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  animation: confettiFall 3s linear forwards;
}

/* Celebration burst effect */
.celebration-burst {
  animation: celebrationBurst 0.8s ease-out;
}

@keyframes celebrationBurst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Star twinkle effect */
.star-twinkle {
  animation: starTwinkle 1.5s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* =============================================================================
   INTERACTION FEEDBACK ANIMATIONS
   ============================================================================= */

/* Click ripple effect */
.click-ripple {
  position: relative;
  overflow: hidden;
}

.click-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Success feedback */
.success-feedback {
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Error feedback */
.error-feedback {
  animation: errorShake 0.6s ease-out;
}

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

/* Warning feedback */
.warning-feedback {
  animation: warningPulse 1s ease-in-out infinite;
}

@keyframes warningPulse {
  0%, 100% {
    background-color: var(--color-warning);
    transform: scale(1);
  }
  50% {
    background-color: var(--color-warning-dark);
    transform: scale(1.02);
  }
}

/* =============================================================================
   HOVER AND FOCUS ANIMATIONS
   ============================================================================= */

/* Enhanced hover lift */
.hover-lift {
  transition: all var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Hover glow effect */
.hover-glow {
  transition: all var(--transition-base);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
  border-color: var(--color-accent-blue);
}

/* Hover scale effect */
.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Hover rotate effect */
.hover-rotate {
  transition: transform var(--transition-base);
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Focus ring animation */
.focus-ring:focus {
  outline: none;
  animation: focusRing 0.3s ease-out;
}

@keyframes focusRing {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
  }
}

/* =============================================================================
   BACKGROUND AND ENVIRONMENTAL ANIMATIONS
   ============================================================================= */

/* Floating background elements */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

.float-animation.delay-1 { animation-delay: 1s; }
.float-animation.delay-2 { animation-delay: 2s; }
.float-animation.delay-3 { animation-delay: 3s; }

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

/* Rotating glow background */
.rotating-glow {
  animation: rotateGlow 20s linear infinite;
}

@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Breathing glow effect */
.breathing-glow {
  animation: breathingGlow 4s ease-in-out infinite;
}

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

/* =============================================================================
   HAMBURGER MENU ANIMATIONS
   ============================================================================= */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hamburger button animation */
.hamburger-btn {
  transition: all var(--transition-base);
}

.hamburger-line {
  transition: all var(--transition-base);
  transform-origin: center;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* =============================================================================
   MODAL ANIMATIONS
   ============================================================================= */

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

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* =============================================================================
   WALLET CONNECTION ANIMATIONS
   ============================================================================= */

.wallet-connecting {
  animation: walletConnecting 1s ease-in-out;
}

@keyframes walletConnecting {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
}

.wallet-connected {
  animation: walletConnected 0.6s ease-out;
}

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

/* =============================================================================
   AGE TRANSITION ANIMATIONS
   ============================================================================= */

/* Baby to Teen Transition */
.rakun-aging-up {
  animation: ageUp 2s ease-in-out;
}

@keyframes ageUp {
  0% {
    transform: scale(1) rotateY(0deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.2) rotateY(90deg);
    filter: brightness(1.5);
  }
  50% {
    transform: scale(1.3) rotateY(180deg);
    filter: brightness(2);
  }
  75% {
    transform: scale(1.2) rotateY(270deg);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1) rotateY(360deg);
    filter: brightness(1);
  }
}

/* =============================================================================
   SPECIAL EFFECTS
   ============================================================================= */

/* Glow Effect for Special Moments */
.special-glow {
  animation: specialGlow 2s ease-in-out infinite alternate;
}

@keyframes specialGlow {
  from {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

/* Floating Element Animation */
.floating {
  animation: floating 3s ease-in-out infinite;
}

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

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

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

/* =============================================================================
   CUSTOM ANIMATION UTILITIES
   ============================================================================= */

/* Bounce In */
.bounce-in {
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* =============================================================================
   ANIMATION UTILITIES
   ============================================================================= */

/* Animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* Animation durations */
.duration-fast { animation-duration: 0.15s; }
.duration-normal { animation-duration: 0.3s; }
.duration-slow { animation-duration: 0.5s; }
.duration-slower { animation-duration: 1s; }

/* Animation iteration counts */
.animate-once { animation-iteration-count: 1; }
.animate-twice { animation-iteration-count: 2; }
.animate-infinite { animation-iteration-count: infinite; }

/* Animation play states */
.animate-pause { animation-play-state: paused; }
.animate-play { animation-play-state: running; }

/* =============================================================================
   CUSTOM TIMING FUNCTIONS
   ============================================================================= */

.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-elastic { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.ease-back { animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); }

/* =============================================================================
   COMBINED ANIMATION CLASSES
   ============================================================================= */

/* Fade and slide up combination */
.fade-slide-up {
  animation: fadeSlideUp 0.5s ease-out;
}

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

/* Scale and fade combination */
.scale-fade {
  animation: scaleFade 0.4s ease-out;
}

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

/* Bounce and glow combination */
.bounce-glow {
  animation: bounceGlow 1s ease-in-out infinite;
}

@keyframes bounceGlow {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.5);
  }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* GPU acceleration for smooth animations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

/* Prefers reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Essential animations only */
  .rakun-sprite {
    animation: none !important;
  }
  
  .status-indicator {
    animation: none !important;
  }
  
  .loading-spinner {
    animation: spin 1s linear infinite;
  }
}

/* GPU Acceleration for Smooth Animations */
.rakun-sprite,
.action-btn,
.stat-fill,
.modal-content,
.message,
.hamburger-overlay,
.confetti-particle,
.level-up-overlay,
.rakun-display {
  will-change: transform;
  transform: translateZ(0);
}