/* Ambient particles: created in JS, styled here */
.particle {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    color: var(--effect-color);
    font-size: 1.2em;
    line-height: 1;
    white-space: nowrap;
    will-change: transform, opacity;
}

.particle--fall {
    top: -30px;
    animation: particle-fall linear forwards, particle-fade-in-out ease-in-out forwards;
}

.particle--fall-sway {
    top: -30px;
    animation: particle-fall-sway linear forwards, particle-fade-in-out ease-in-out forwards;
}

/* Embers: rise with gentle fire-like sway, soft ember glow */
.particle--rise {
    bottom: -20px;
    text-shadow:
        0 0 4px color-mix(in srgb, var(--effect-color) 75%, transparent),
        0 0 10px color-mix(in srgb, var(--effect-color) 45%, transparent);
    animation: particle-rise linear forwards;
}

/* Stars: in-place twinkle with soft halo, no scale shake */
.particle--twinkle {
    text-shadow:
        0 0 3px color-mix(in srgb, var(--effect-color) 70%, transparent),
        0 0 8px color-mix(in srgb, var(--effect-color) 40%, transparent);
    animation: particle-twinkle ease-in-out forwards;
}

/* Rain: straight, uniform fall */
.particle--rain {
    top: -20px;
    animation: particle-rain linear forwards, particle-fade-rain ease-in-out forwards;
}

@keyframes particle-fall {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}

@keyframes particle-fall-sway {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(27vh) translateX(15px) rotate(90deg);
    }
    50% {
        transform: translateY(55vh) translateX(-10px) rotate(180deg);
    }
    75% {
        transform: translateY(82vh) translateX(12px) rotate(270deg);
    }
    100% {
        transform: translateY(110vh) translateX(0) rotate(360deg);
    }
}

@keyframes particle-rise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: var(--particle-opacity-base, 0.7);
    }
    25% {
        transform: translateY(-28vh) translateX(10px) scale(0.85);
    }
    50% {
        transform: translateY(-55vh) translateX(-9px) scale(0.7);
    }
    75% {
        transform: translateY(-82vh) translateX(8px) scale(0.55);
    }
    100% {
        transform: translateY(-110vh) translateX(0) scale(0.4);
        opacity: 0;
    }
}

@keyframes particle-twinkle {
    0% {
        opacity: 0;
    }
    30% {
        opacity: var(--particle-opacity-base, 0.6);
    }
    70% {
        opacity: var(--particle-opacity-base, 0.6);
    }
    100% {
        opacity: 0;
    }
}

@keyframes particle-rain {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(110vh);
    }
}

@keyframes particle-fade-in-out {
    0% {
        opacity: 0;
    }
    8% {
        opacity: var(--particle-opacity-base, 0.6);
    }
    80% {
        opacity: var(--particle-opacity-base, 0.6);
    }
    100% {
        opacity: 0;
    }
}

@keyframes particle-fade-rain {
    0% {
        opacity: 0;
    }
    18% {
        opacity: var(--particle-opacity-base, 0.55);
    }
    88% {
        opacity: var(--particle-opacity-base, 0.55);
    }
    100% {
        opacity: 0;
    }
}