/* Animation Styles */

/* Keyframes for various animations */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

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

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

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

/* Apply animations to elements */
.play-now-button {
    animation: pulse 2s infinite;
}

.site-name {
    position: relative;
}

.site-name::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffc100"><path d="M12 22l-3.5-6.5L2 12l6.5-3.5L12 2l3.5 6.5L22 12l-6.5 3.5z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 3s ease-in-out infinite;
    z-index: 2;
}

/* Confetti styles */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ff3e7f;
    animation: confetti-fall 5s linear forwards;
}

.confetti.purple {
    background-color: #7e22ce;
    width: 8px;
    height: 8px;
}

.confetti.yellow {
    background-color: #ffc100;
    width: 12px;
    height: 12px;
}

.confetti.blue {
    background-color: #3b82f6;
    width: 7px;
    height: 7px;
}

.confetti.green {
    background-color: #10b981;
    width: 9px;
    height: 9px;
}

/* Logo animations */
.game-logo img {
    animation: float 6s ease-in-out infinite;
    animation-delay: 1s;
}