/* Kutunun merkeze kayarak gelmesi için .centered-box sınıfı */
.centered-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: top 0.7s ease, left 0.7s ease, transform 0.7s ease;
    z-index: 1050; /* En üstte görünmesi için */
}

.box {
    position: relative;
    cursor: pointer;
    animation: soft-pop-in 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.box-image {
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
}

/* Fade-out animation */
.fade-out {
    opacity: 0;
    transform: scale(0.5);
}

/* Bounce-out and fade-out for smoother box disappearance */
@keyframes bounceOutFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.fade-out {
    animation: bounceOutFade 0.7s ease forwards;
}

/* Stronger shake animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-10px); /* Increased distance */
    }

    40% {
        transform: translateX(10px); /* Increased distance */
    }

    60% {
        transform: translateX(-10px); /* Increased distance */
    }

    80% {
        transform: translateX(10px); /* Increased distance */
    }
}

.shake-animation {
    animation: shake 0.6s ease; /* Increased duration for longer shake effect */
}


/* Improved fade-out animation with scaling, fading, and rotation */
@keyframes smoothDisappear {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(0.9) rotate(10deg); /* Add a slight tilt at halfway */
    }

    100% {
        opacity: 0;
        transform: scale(0) rotate(20deg); /* Complete shrink and rotate */
    }
}

.fade-out {
    animation: smoothDisappear 0.8s ease forwards; /* Increased duration for smoother effect */
}

/* Fireworks Container */
#fireworksContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1050; /* Above the modal */
    display: none;
}

@media (max-width: 450px) {
    .box-image {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }
}