/* Celebration animations for check-ticket results */

@keyframes banner-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

@keyframes ball-drop {
    0% {
        transform: translateY(-40px) scale(0.3) rotate(0deg);
        opacity: 0;
    }
    60% {
        transform: translateY(0) scale(1.1) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1) rotate(360deg);
        opacity: 1;
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(201, 122, 58, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(201, 122, 58, 0.7);
    }
}

.dark @keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(136, 217, 130, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(136, 217, 130, 0.6);
    }
}

.celebrate {
    animation: banner-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
              glow-pulse 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--color-primary-container),
        var(--color-secondary-container),
        var(--color-primary-container)
    );
    background-size: 200% 100%;
}

.ball-drop {
    animation: ball-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modal-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-pop .result-modal-card {
    animation: modal-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    @keyframes banner-pop {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes ball-drop {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes modal-pop {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .celebrate,
    .ball-drop,
    .modal-pop .result-modal-card {
        animation: none;
    }
}