/*
 * Halloween Effect - storefront stylesheet.
 * Every selector is namespaced under .halloween-effect to avoid any
 * collision with theme styles. Animations only use transform/opacity
 * (GPU-friendly), never top/left/width/height/margin.
 */

.halloween-effect {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1200;
}

.halloween-effect__item {
    position: absolute;
    top: -12%;
    left: var(--halloween-x, 50%);
    width: var(--halloween-size, 32px);
    height: var(--halloween-size, 32px);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.halloween-effect__item img,
.halloween-effect__item svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Straight, gently rotating fall - used for pumpkins */
@keyframes halloween-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: var(--halloween-opacity, 0.8);
    }
    90% {
        opacity: var(--halloween-opacity, 0.8);
    }
    100% {
        transform: translateY(115vh) rotate(var(--halloween-rotate, 20deg));
        opacity: 0;
    }
}

/* Gentle side-to-side sway - used for ghosts */
@keyframes halloween-fall-sway {
    0% {
        transform: translate(0, -10vh) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: var(--halloween-opacity, 0.8);
    }
    25% {
        transform: translate(calc(var(--halloween-drift, 20px) * 0.6), 18vh) rotate(calc(var(--halloween-rotate, 10deg) * 0.3));
    }
    50% {
        transform: translate(calc(var(--halloween-drift, 20px) * -0.8), 52vh) rotate(calc(var(--halloween-rotate, 10deg) * -0.4));
    }
    75% {
        transform: translate(calc(var(--halloween-drift, 20px) * 0.5), 85vh) rotate(calc(var(--halloween-rotate, 10deg) * 0.2));
    }
    90% {
        opacity: var(--halloween-opacity, 0.8);
    }
    100% {
        transform: translate(calc(var(--halloween-drift, 20px) * -0.3), 115vh) rotate(0deg);
        opacity: 0;
    }
}

/* Diagonal flutter - used for bats */
@keyframes halloween-fall-diagonal {
    0% {
        transform: translate(0, -10vh) rotate(var(--halloween-rotate, -8deg));
        opacity: 0;
    }
    8% {
        opacity: var(--halloween-opacity, 0.8);
    }
    50% {
        transform: translate(calc(var(--halloween-drift, 40px) * 1), 55vh) rotate(calc(var(--halloween-rotate, -8deg) * -1));
    }
    90% {
        opacity: var(--halloween-opacity, 0.8);
    }
    100% {
        transform: translate(calc(var(--halloween-drift, 40px) * 2), 115vh) rotate(var(--halloween-rotate, -8deg));
        opacity: 0;
    }
}

.halloween-effect__item--pumpkin {
    animation-name: halloween-fall;
}

.halloween-effect__item--ghost {
    animation-name: halloween-fall-sway;
}

.halloween-effect__item--bat {
    animation-name: halloween-fall-diagonal;
}

/* Paused while the browser tab is hidden, to save CPU/battery. */
.halloween-effect--paused .halloween-effect__item {
    animation-play-state: paused;
}

/* Accessibility: fully respect the visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .halloween-effect.halloween-effect--respect-reduced-motion {
        display: none;
    }
}