/* Magnetic Field Button Styles */
.btn-magnetic {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Ensure text stays on top */
.btn-magnetic span,
.btn-magnetic i {
    position: relative;
    z-index: 2;
}

.particles-field {
    position: absolute;
    inset: -100%;
    width: 300%;
    height: 300%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
    top: -100%;
    left: -100%;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.btn-magnetic:hover .particles-field {
    opacity: 1;
}

@keyframes particleFloat {
    0% {
        transform: translate(var(--x), var(--y)) scale(0);
    }

    50% {
        transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) scale(1);
    }

    100% {
        transform: translate(var(--x), var(--y)) scale(0);
    }
}