/*
 * animations.css - Alle Animationen und Effects für Rocket100 NFT Battle Mini App
 * Enthält: Keyframes, Transitions, Special Effects, Particles
 */

/* --- Background Animations --- */
@keyframes backgroundPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* --- Header Animations --- */
@keyframes titleGlow {
    0%, 100% { 
        text-shadow: 0 0 8px var(--primary-blue), 0 0 15px var(--primary-blue), 0 0 25px var(--primary-blue); 
    }
    50% { 
        text-shadow: 0 0 15px var(--accent-cyan), 0 0 25px var(--accent-cyan), 0 0 35px var(--accent-cyan); 
    }
}

@keyframes creditGlow {
    0%, 100% { 
        box-shadow: var(--shadow-glow) var(--credit-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            var(--shadow-glow) rgba(255, 215, 0, 1),
            0 0 30px var(--credit-gold),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes coinSpinLarge {
    0% { transform: rotateY(0deg) scale(1); }
    25% { transform: rotateY(90deg) scale(1.05); }
    50% { transform: rotateY(180deg) scale(1); }
    75% { transform: rotateY(270deg) scale(1.05); }
    100% { transform: rotateY(360deg) scale(1); }
}

/* --- Page Transitions --- */
@keyframes pageSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* --- Credit Animations --- */
@keyframes userCreditsGlow {
    0%, 100% { 
        box-shadow: 
            var(--shadow-glow) var(--credit-glow),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            var(--shadow-glow) rgba(255, 215, 0, 0.8),
            0 0 40px var(--credit-gold),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes creditShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes creditPulse {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 15px var(--credit-glow), 0 0 30px var(--credit-glow);
    }
    50% { 
        transform: scale(1.05);
        text-shadow: 0 0 25px var(--credit-glow), 0 0 50px var(--credit-glow);
    }
}

@keyframes creditBalanceUpdate {
    0% { 
        transform: scale(1);
        color: var(--text-primary);
    }
    50% { 
        transform: scale(1.2);
        color: var(--accent-green);
        text-shadow: 0 0 15px var(--accent-green);
    }
    100% { 
        transform: scale(1);
        color: var(--text-primary);
    }
}

/* --- Profile Animations --- */
@keyframes profileGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes avatarPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: var(--shadow-glow) rgba(255, 215, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: var(--shadow-glow) rgba(255, 215, 0, 0.8), 0 15px 40px rgba(0, 0, 0, 0.6);
    }
}

@keyframes rocketBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* --- NFT Animations --- */
@keyframes emptyStateFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes crownGlow {
    0%, 100% { 
        text-shadow: 0 0 8px var(--accent-gold);
        transform: scale(1) rotate(0deg);
    }
    50% { 
        text-shadow: 0 0 20px var(--accent-gold), 0 0 30px var(--accent-gold);
        transform: scale(1.1) rotate(2deg);
    }
}

@keyframes crownFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

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

@keyframes nftLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Modal Animations --- */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* --- Battle Animations --- */
@keyframes waitingPulse {
    0%, 100% { 
        box-shadow: var(--shadow-glow) rgba(255, 215, 0, 0.4); 
    }
    50% { 
        box-shadow: var(--shadow-glow) rgba(255, 215, 0, 0.8); 
    }
}

@keyframes activePulse {
    0%, 100% { 
        box-shadow: var(--shadow-glow) rgba(0, 255, 127, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: var(--shadow-glow) rgba(0, 255, 127, 0.8);
        transform: scale(1.05);
    }
}

@keyframes vsGlow {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 12px var(--accent-gold), 0 0 20px var(--accent-gold);
    }
    50% { 
        transform: scale(1.05);
        text-shadow: 0 0 20px var(--accent-gold), 0 0 30px var(--accent-gold), 0 0 40px var(--accent-gold);
    }
}

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

@keyframes votedGlow {
    0%, 100% { 
        box-shadow: var(--shadow-glow) rgba(0, 255, 127, 0.4); 
    }
    50% { 
        box-shadow: var(--shadow-glow) rgba(0, 255, 127, 0.8); 
    }
}

/* --- Navigation Animations --- */
@keyframes navIconGlow {
    0%, 100% { 
        text-shadow: 0 0 12px var(--accent-cyan); 
    }
    50% { 
        text-shadow: 0 0 20px var(--accent-cyan), 0 0 30px var(--accent-cyan); 
    }
}

/* --- Loading Animations --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* --- Message Animations --- */
@keyframes messageSlideOut {
    to { 
        opacity: 0; 
        transform: translateY(-15px) scale(0.95); 
    }
}

@keyframes messageSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(15px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* --- NFT Selection Modal Animations --- */
@keyframes checkBounce {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(-90deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

@keyframes selectedNFTPulse {
    0%, 100% { 
        box-shadow: 
            0 20px 50px rgba(0, 0, 0, 0.7),
            var(--shadow-glow) rgba(0, 255, 255, 0.8);
    }
    50% { 
        box-shadow: 
            0 25px 60px rgba(0, 0, 0, 0.8),
            var(--shadow-glow) rgba(0, 255, 255, 1);
    }
}

@keyframes nftSelectionShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* --- Floating Particles --- */
@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes particleFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.6; 
    }
    50% { 
        transform: translateY(-20px) rotate(180deg); 
        opacity: 1; 
    }
}

/* --- Placeholder Animations --- */
@keyframes placeholderPulse {
    0%, 100% { 
        opacity: 0.6;
        background: linear-gradient(135deg, 
            rgba(128, 128, 128, 0.2) 0%, 
            rgba(64, 64, 64, 0.3) 50%, 
            rgba(128, 128, 128, 0.2) 100%
        );
    }
    50% { 
        opacity: 0.8;
        background: linear-gradient(135deg, 
            rgba(128, 128, 128, 0.4) 0%, 
            rgba(64, 64, 64, 0.5) 50%, 
            rgba(128, 128, 128, 0.4) 100%
        );
    }
}

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

/* --- Button Hover Effects --- */
@keyframes buttonShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes buttonGlow {
    0%, 100% { 
        box-shadow: var(--shadow-soft);
    }
    50% { 
        box-shadow: var(--shadow-glow) rgba(6, 110, 225, 0.6);
    }
}

/* --- Floating Elements --- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

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

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

@keyframes glow {
    0%, 100% { 
        filter: brightness(1) drop-shadow(0 0 5px currentColor); 
    }
    50% { 
        filter: brightness(1.2) drop-shadow(0 0 15px currentColor); 
    }
}

/* --- Success/Error Animations --- */
@keyframes successPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 127, 0.7);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(0, 255, 127, 0);
    }
}

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

/* --- Special State Animations --- */
@keyframes disabled {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.3; }
}

@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

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

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

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

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

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

@keyframes zoomIn {
    from { 
        opacity: 0; 
        transform: scale(0.3); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes zoomOut {
    from { 
        opacity: 1; 
        transform: scale(1); 
    }
    to { 
        opacity: 0; 
        transform: scale(0.3); 
    }
}

/* --- Easing Functions --- */
.ease-in-out-cubic { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ease-in-out-back { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-out-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-in-quad { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
.ease-out-quad { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* --- Animation Utilities --- */
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }

.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-fade-out { animation: fadeOut 0.3s ease-out; }
.animate-slide-in-up { animation: slideInUp 0.4s ease-out; }
.animate-slide-in-down { animation: slideInDown 0.4s ease-out; }
.animate-zoom-in { animation: zoomIn 0.3s ease-out; }

/* --- Performance Optimizations --- */
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }
.will-change-auto { will-change: auto; }

.backface-hidden { backface-visibility: hidden; }
.perspective-1000 { perspective: 1000px; }
.transform-gpu { transform: translateZ(0); }