/* Kawaii Emoji Gachapon - Animations */

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 1s ease;
}

/* Spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s ease-in-out;
}

/* Pop animation for new emoji */
@keyframes pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pop {
    animation: pop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Shake animation for gachapon machine */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Fade out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

/* Slide in from bottom animation */
@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-bottom {
    animation: slideInBottom 0.3s ease-in-out;
}

/* Rainbow animation for holographic emojis - enhanced */
@keyframes rainbow {
    0% { color: #ff0000; text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); }
    14% { color: #ff7f00; text-shadow: 0 0 5px rgba(255, 127, 0, 0.7); }
    28% { color: #ffff00; text-shadow: 0 0 5px rgba(255, 255, 0, 0.7); }
    42% { color: #00ff00; text-shadow: 0 0 5px rgba(0, 255, 0, 0.7); }
    57% { color: #0000ff; text-shadow: 0 0 5px rgba(0, 0, 255, 0.7); }
    71% { color: #4b0082; text-shadow: 0 0 5px rgba(75, 0, 130, 0.7); }
    85% { color: #8b00ff; text-shadow: 0 0 5px rgba(139, 0, 255, 0.7); }
    100% { color: #ff0000; text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); }
}

.rainbow {
    animation: rainbow 3s linear infinite;
    filter: brightness(1.2);
    transform-style: preserve-3d;
    position: relative;
}

.rainbow::after {
    content: attr(data-emoji);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    transform: translateZ(-1px);
    filter: blur(1px);
}

/* Sparkle animation for glitter emojis - enhanced */
@keyframes sparkle {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
                     0 0 10px rgba(255, 215, 0, 0.5);
    }
    25% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                     0 0 20px rgba(255, 215, 0, 0.7),
                     0 0 30px rgba(255, 215, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                     0 0 30px rgba(255, 215, 0, 0.5);
    }
    75% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
                     0 0 25px rgba(255, 215, 0, 0.6),
                     0 0 35px rgba(255, 215, 0, 0.4);
    }
}

.sparkle {
    animation: sparkle 1.5s ease-in-out infinite;
    position: relative;
}

.sparkle::before, .sparkle::after {
    content: "✨";
    position: absolute;
    font-size: 0.5em;
    opacity: 0;
    animation: twinkle 3s ease-in-out infinite;
}

.sparkle::before {
    top: -0.5em;
    right: -0.2em;
    animation-delay: 0.5s;
}

.sparkle::after {
    bottom: -0.3em;
    left: -0.3em;
    animation-delay: 1.5s;
}

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

/* Floating animation for icons */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.float {
    animation: float 2s ease-in-out infinite;
}

/* Pulse animation for buttons */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 1.5s infinite;
}

/* Crank rotation animation */
@keyframes crankRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.crank-rotate {
    animation: crankRotate 1s cubic-bezier(0.35, 0.01, 0.7, 1);
    transform-origin: center center;
}

/* Emoji drop animation */
@keyframes emojiDrop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    70% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.emoji-drop {
    animation: emojiDrop 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Special shine effect */
@keyframes shine {
    0% {
        background-position: -100px;
    }
    40%, 100% {
        background-position: 300px;
    }
}

.shine {
    background: linear-gradient(to right, 
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.8) 50%,
                rgba(255,255,255,0) 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    background-position: -100px;
    animation: shine 2s infinite;
}

/* Blink animation */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.blink {
    animation: blink 1s ease-in-out infinite;
}

/* Scale animation for buttons */
.scale-on-hover {
    transition: transform 0.2s ease;
}

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

/* Transitions for modal display */
.modal {
    transition: opacity 0.3s ease;
}

.modal-content {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Inverted animation for inverted emojis */
.inverted {
    filter: invert(1) hue-rotate(180deg);
    position: relative;
    z-index: 1;
    animation: pulse-inverted 3s infinite alternate;
}

@keyframes pulse-inverted {
    0% { text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
    100% { text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
}

.inverted::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
    animation: rotate 10s linear infinite;
}

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