/* ==========================================================================
   Particles & Magic Effects
   ========================================================================== */

#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Let clicks pass through */
    z-index: 2;
}

.magic-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #C39D54 60%, transparent 100%);
    box-shadow: 0 0 10px 2px rgba(195, 157, 84, 0.4);
    opacity: 0;
    animation: floatParticle linear forwards;
}

@keyframes floatParticle {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        /* Move right and up (like wind blowing) */
        transform: translate(var(--move-x), var(--move-y)) scale(1.2);
        opacity: 0;
    }
}

/* Breathing animation for the wrapper to not conflict with JS parallax */
.hero-content {
    position: relative; /* ensure absolute children stay inside */
    width: 100%;
    height: 100%;
}

@keyframes breath {
    0% { transform: scale(1); }
    100% { transform: scale(1.04); }
}