/* Floating Slots Container */
.floating-slots-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Individual floating slot images */
.floating-slot {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.22;
    filter: drop-shadow(0 0 25px rgba(145, 71, 255, 0.5)) drop-shadow(0 0 50px rgba(0, 245, 255, 0.3)) saturate(1.3);
    will-change: transform;
}

/* Slot images - static, no animation for performance */
.slot-1 { top: 8%;  left: 3%;  width: 130px; height: 130px; opacity: 0.10; }
.slot-2 { top: 22%; right: 5%; width: 90px;  height: 90px;  opacity: 0.12; }
.slot-3 { top: 48%; left: 2%;  width: 110px; height: 110px; opacity: 0.10; }
.slot-4 { top: 68%; right: 3%; width: 140px; height: 140px; opacity: 0.08; }
.slot-5 { top: 85%; left: 12%; width: 70px;  height: 70px;  opacity: 0.12; }
.slot-6 { top: 14%; right: 18%; width: 100px; height: 100px; opacity: 0.10; }
.slot-7 { top: 38%; left: 6%;  width: 85px;  height: 85px;  opacity: 0.12; }
.slot-8 { top: 58%; right: 8%; width: 120px; height: 120px; opacity: 0.09; }


/* Cyber Grid Effect - static */
.cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

/* Scan Lines - disabled for performance */
.scan-lines {
    display: none;
}

/* Neon Particles */
.neon-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle {
    display: none;
}

.p1 { top: 20%; left: 10%; background: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan); animation-delay: 0s; }
.p2 { top: 40%; left: 80%; background: var(--neon-magenta); box-shadow: 0 0 10px var(--neon-magenta); animation-delay: -2s; }
.p3 { top: 60%; left: 30%; background: var(--neon-accent); box-shadow: 0 0 10px var(--neon-accent); animation-delay: -4s; }
.p4 { top: 80%; left: 70%; background: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan); animation-delay: -6s; }
.p5 { top: 15%; left: 50%; background: var(--neon-purple); box-shadow: 0 0 10px var(--neon-purple); animation-delay: -8s; }
.p6 { top: 35%; left: 20%; background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); animation-delay: -10s; }
.p7 { top: 55%; left: 90%; background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); animation-delay: -1s; }
.p8 { top: 75%; left: 5%; background: var(--neon-magenta); box-shadow: 0 0 10px var(--neon-magenta); animation-delay: -3s; }
.p9 { top: 10%; left: 85%; background: var(--neon-accent); box-shadow: 0 0 10px var(--neon-accent); animation-delay: -5s; width: 6px; height: 6px; }
.p10 { top: 90%; left: 40%; background: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan); animation-delay: -7s; }
.p11 { top: 45%; left: 60%; background: var(--neon-purple); box-shadow: 0 0 10px var(--neon-purple); animation-delay: -9s; width: 5px; height: 5px; }
.p12 { top: 65%; left: 15%; background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); animation-delay: -11s; }

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-100px) translateX(50px) scale(1.5);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px) translateX(-30px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-80px) translateX(20px) scale(1.2);
        opacity: 0.8;
    }
}

/* Glowing Orbs */
.glow-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    display: none; /* Hidden site-wide — without GPU blur they become solid circles */
}

.orb-cyan {
    width: 400px;
    height: 400px;
    background: var(--neon-cyan);
    top: -10%;
    left: -5%;
    animation-delay: 0s;
}

.orb-magenta {
    width: 350px;
    height: 350px;
    background: var(--neon-magenta);
    top: 30%;
    right: -10%;
    animation-delay: -5s;
}

.orb-purple {
    width: 300px;
    height: 300px;
    background: var(--neon-purple);
    bottom: 10%;
    left: 20%;
    animation-delay: -10s;
}

.orb-gold {
    width: 250px;
    height: 250px;
    background: var(--neon-accent);
    top: 60%;
    right: 30%;
    animation-delay: -15s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.2;
    }
    33% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.4;
    }
    66% {
        transform: translate(-30px, 50px) scale(0.9);
        opacity: 0.3;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .floating-slot {
        display: none;
    }
    .neon-particles {
        display: none;
    }
    .scan-lines,
    .cyber-grid { display: none; }
    .orb { filter: blur(60px); opacity: 0.15; }
    .orb-cyan, .orb-magenta { width: 200px; height: 200px; }
    .orb-purple, .orb-gold { display: none; }
}

@media (max-width: 480px) {
    .floating-slots-container .neon-particles,
    .floating-slots-container .scan-lines,
    .floating-slots-container .cyber-grid,
    .floating-slots-container .floating-slot,
    .floating-slots-container .glow-orbs { display: none; }
}

/* Reduced motion - disable all background animations */
@media (prefers-reduced-motion: reduce) {
    .floating-slot,
    .particle,
    .orb,
    .scan-lines,
    .cyber-grid { animation: none !important; }
    .floating-slot { opacity: 0.1; }
    .particle { opacity: 0.3; }
}