/**
 * FunCards - VIP Easter Egg Styles
 * Styles for VIP badge easter egg effects
 */

/* ================================================
   SHAKE ANIMATION
   ================================================ */

@keyframes vipShake {
    0%, 100% { 
        transform: translateX(0) rotate(0deg); 
    }
    10% { 
        transform: translateX(-10px) rotate(-2deg); 
    }
    20% { 
        transform: translateX(10px) rotate(2deg); 
    }
    30% { 
        transform: translateX(-10px) rotate(-2deg); 
    }
    40% { 
        transform: translateX(10px) rotate(2deg); 
    }
    50% { 
        transform: translateX(-5px) rotate(-1deg); 
    }
    60% { 
        transform: translateX(5px) rotate(1deg); 
    }
    70% { 
        transform: translateX(-5px) rotate(-1deg); 
    }
    80% { 
        transform: translateX(5px) rotate(1deg); 
    }
    90% { 
        transform: translateX(-2px) rotate(-0.5deg); 
    }
}

/* ================================================
   POPUP ANIMATIONS
   ================================================ */

@keyframes vipPopup {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes vipPopupOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* ================================================
   POPUP STYLES
   ================================================ */

.vip-easter-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: white;
    padding: 30px 40px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.5);
    animation: vipPopup 0.5s ease-out;
    max-width: 90%;
    box-sizing: border-box;
}

.vip-easter-popup-out {
    animation: vipPopupOut 0.3s ease-out;
}