/* Animation Styles */

/* Particle Effects */
.particle {
    position: fixed;
    pointer-events: none;
    font-size: 2em;
    z-index: 9999;
    animation: particle-float 1.5s ease-out forwards;
}

@keyframes particle-float {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, -100px)) scale(0.5) rotate(var(--rotate, 360deg));
        opacity: 0;
    }
}

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

@keyframes particle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

/* Success Particles */
.success-particle {
    position: fixed;
    font-size: 2.5em;
    pointer-events: none;
    z-index: 9999;
    animation: success-float 2s ease-out forwards;
}

@keyframes success-float {
    0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, -150px)) scale(0.8) rotate(var(--rotate, 720deg));
        opacity: 0;
    }
}

/* Confetti */
.confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(var(--rotate, 720deg)) translateX(var(--drift, 0));
        opacity: 0;
    }
}

/* Combo Text Animation */
.combo-text {
    position: fixed;
    font-size: 3em;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 9999;
    animation: combo-popup 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes combo-popup {
    0% {
        transform: translate(-50%, 0) scale(0);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -30px) scale(1.3);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -80px) scale(0.8);
        opacity: 0;
    }
}

/* Score Popup */
.score-popup {
    position: fixed;
    font-size: 2em;
    font-weight: bold;
    color: #38ef7d;
    text-shadow: 
        0 0 10px rgba(56, 239, 125, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 9999;
    animation: score-rise 1.5s ease-out forwards;
}

@keyframes score-rise {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* Button Press Animation */
.btn-press {
    animation: btn-press 0.2s ease;
}

@keyframes btn-press {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
}

/* Shimmer Effect */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 2s infinite;
}

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

/* Bounce In */
.bounce-in {
    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fade In */
.fade-in {
    animation: fade-in 0.5s ease;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide In From Bottom */
.slide-in-bottom {
    animation: slide-in-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-in-bottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In From Top */
.slide-in-top {
    animation: slide-in-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-in-top {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Rotate In */
.rotate-in {
    animation: rotate-in 0.6s ease;
}

@keyframes rotate-in {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

/* Wobble */
.wobble {
    animation: wobble 0.8s ease;
}

@keyframes wobble {
    0%, 100% {
        transform: translateX(0) rotate(0);
    }
    15% {
        transform: translateX(-10px) rotate(-5deg);
    }
    30% {
        transform: translateX(10px) rotate(5deg);
    }
    45% {
        transform: translateX(-10px) rotate(-5deg);
    }
    60% {
        transform: translateX(10px) rotate(5deg);
    }
    75% {
        transform: translateX(-5px) rotate(-2deg);
    }
}

/* Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}

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

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

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

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
    }
}

/* Star Animation */
.star-animate {
    animation: star-twinkle 1s ease-in-out;
}

@keyframes star-twinkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.8;
    }
}

/* Level Complete Animation */
.level-complete {
    animation: level-complete 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes level-complete {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Achievement Unlock */
.achievement-unlock {
    position: fixed;
    top: 20px;
    right: -400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: white;
    z-index: 9999;
    animation: achievement-slide 4s ease-in-out forwards;
}

@keyframes achievement-slide {
    0% {
        right: -400px;
    }
    15%, 85% {
        right: 20px;
    }
    100% {
        right: -400px;
    }
}

/* Disabled state fade */
.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(50%);
}

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

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