/* === Hero Particles Animation === */
.fire-sparks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Low z-index to stay behind text */
}

.spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ffc107;
    opacity: 0;
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.8);
    /* Animation will be applied by JS or inline styles usually, but let's define the keyframes here */
    animation: explode var(--d) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    transform: translate(0, 0) scale(0);
}

@keyframes explode {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }

    15% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) scale(0);
    }
}