/* Estilos para a Celebração de Venda (Estilo Cassino) */

/* Overlay de Fundo */
#celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(50, 50, 50, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 9999;
    display: none; /* Oculto por padrão */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

/* Efeito de Holofotes no Fundo */
#celebration-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 215, 0, 0.1) 20deg,
        transparent 40deg,
        rgba(255, 215, 0, 0.1) 60deg,
        transparent 80deg,
        rgba(255, 215, 0, 0.1) 100deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.1) 140deg,
        transparent 160deg,
        rgba(255, 215, 0, 0.1) 180deg,
        transparent 200deg,
        rgba(255, 215, 0, 0.1) 220deg,
        transparent 240deg,
        rgba(255, 215, 0, 0.1) 260deg,
        transparent 280deg,
        rgba(255, 215, 0, 0.1) 300deg,
        transparent 320deg,
        rgba(255, 215, 0, 0.1) 340deg,
        transparent 360deg
    );
    animation: rotateBG 20s linear infinite;
    z-index: -1;
}

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

/* Container da Animação */
.celebration-content {
    text-align: center;
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 10000;
}

/* Texto Principal "VENDA REALIZADA" */
.celebration-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffd700; /* Dourado */
    text-shadow: 
        0 0 10px #b8860b,
        0 0 20px #b8860b,
        0 0 40px #ffd700,
        2px 2px 0px #000;
    margin-bottom: 20px;
    letter-spacing: 5px;
    animation: glow 1.5s ease-in-out infinite alternate;
}

/* Subtítulo ou Valor */
.celebration-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin-top: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    animation: pulse 1s infinite;
}

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

/* Botão de Fechar (Discreto) */
.celebration-close {
    margin-top: 50px;
    padding: 10px 30px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    z-index: 10001;
}

.celebration-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Chuva de Dinheiro (DOM Elements) */
.money-rain {
    position: fixed;
    top: -50px;
    font-size: 2rem;
    z-index: 9998;
    animation: fall linear forwards;
    user-select: none;
    pointer-events: none;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* Animação de Entrada */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Animação de Brilho do Texto */
@keyframes glow {
    from {
        text-shadow: 
            0 0 10px #b8860b,
            0 0 20px #b8860b,
            0 0 30px #ffd700;
    }
    to {
        text-shadow: 
            0 0 20px #b8860b,
            0 0 30px #ffd700,
            0 0 50px #ffeb3b,
            0 0 70px #ffeb3b;
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .celebration-title {
        font-size: 3rem;
    }
    .celebration-subtitle {
        font-size: 1.5rem;
    }
}