/**
 * Servertop100 - Confetti Animation CSS
 * Additional styles for the vote success animation
 */

/* Animation for the success message */
@keyframes pulseFade {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

/* Glow effect for success message with confetti */
.confetti-active {
    animation: pulseFade 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.5);
    transition: all 0.5s ease;
}

/* Add more emphasis to the success heading */
.confetti-active h4.alert-heading {
    text-shadow: 0 0 10px rgba(40, 167, 69, 0.4);
    color: #1e7e34;
    position: relative;
    display: inline-block;
}

/* Animated checkmark */
.confetti-active h4.alert-heading::before {
    content: "✓";
    margin-right: 10px;
    display: inline-block;
    animation: checkmark 1s ease-in-out;
}

@keyframes checkmark {
    0% {
        transform: scale(0) rotate(-90deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(0);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/* Animate the 'thank you' text */
.confetti-active strong {
    animation: colorCycle 4s infinite;
    font-weight: 700;
}

@keyframes colorCycle {
    0% { color: #28a745; }
    25% { color: #17a2b8; }
    50% { color: #007bff; }
    75% { color: #6f42c1; }
    100% { color: #28a745; }
}

/* Button animations */
.confetti-active + .text-center .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.confetti-active + .text-center .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.confetti-active + .text-center .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.confetti-active + .text-center .btn:hover::after {
    left: 100%;
}

/* Special effects for premium server votes */
.premium-server .confetti-active {
    background: linear-gradient(to right, #28a745, #20c997);
    color: white;
}

.premium-server .confetti-active h4.alert-heading {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    color: white;
}

/* Improve visibility on mobile */
@media (max-width: 768px) {
    .confetti-active {
        padding: 15px;
    }
    
    .confetti-active h4.alert-heading {
        font-size: 1.3rem;
    }
}