/* assets/css/effects.css */

.product-image {
    position: relative;
    overflow: hidden;
}

.seasonal-particle {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    /* Keep it below z-index: 10 badges */
    top: -30px;
    /* Start slightly above the container */
    user-select: none;
    animation-name: fallDown;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes fallDown {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(260px) rotate(360deg);
        /* 260px covers the standard 200/250px container heights */
        opacity: 0;
    }
}

/* specific effect styling */
.effect-snow .seasonal-particle {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.particle-emoji {
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Homepage Full-Screen Effects */
.homepage-particle {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    top: -50px;
    user-select: none;
    animation-name: fallDownFullscreen;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes fallDownFullscreen {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}