/* ===========================
   ULTRA-AGGRESSIVE ORBITAL FIX WITH ROTATION
   Uses !important to override ALL JavaScript positioning
   AND adds smooth rotation animations
   =========================== */

/* Base positioning for all links */
.quantum-link {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 50% !important;
    left: 50% !important;
}

/* ORBIT 1 - Rotation with 200px radius */
.quantum-link.orbit-1 {
    animation: rotate-orbit-1 20s linear infinite !important;
}

@keyframes rotate-orbit-1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

/* Individual starting positions for orbit-1 */
.quantum-link.orbit-1[data-angle="0"] {
    animation-delay: 0s !important;
}

.quantum-link.orbit-1[data-angle="120"] {
    animation-delay: -6.67s !important; /* 120°/360° * 20s = 6.67s */
}

.quantum-link.orbit-1[data-angle="240"] {
    animation-delay: -13.33s !important; /* 240°/360° * 20s = 13.33s */
}

/* ORBIT 2 - Rotation with 320px radius (slightly faster) */
.quantum-link.orbit-2 {
    animation: rotate-orbit-2 25s linear infinite !important;
}

@keyframes rotate-orbit-2 {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(320px) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(320px) rotate(-360deg);
    }
}

/* Individual starting positions for orbit-2 */
.quantum-link.orbit-2[data-angle="40"] {
    animation-delay: -2.78s !important; /* 40°/360° * 25s = 2.78s */
}

.quantum-link.orbit-2[data-angle="160"] {
    animation-delay: -11.11s !important; /* 160°/360° * 25s = 11.11s */
}

.quantum-link.orbit-2[data-angle="280"] {
    animation-delay: -19.44s !important; /* 280°/360° * 25s = 19.44s */
}

/* ORBIT 3 - Rotation with 440px radius (slowest) */
.quantum-link.orbit-3 {
    animation: rotate-orbit-3 30s linear infinite !important;
}

@keyframes rotate-orbit-3 {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(440px) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(440px) rotate(-360deg);
    }
}

/* Individual starting positions for orbit-3 */
.quantum-link.orbit-3[data-angle="80"] {
    animation-delay: -6.67s !important; /* 80°/360° * 30s = 6.67s */
}

.quantum-link.orbit-3[data-angle="200"] {
    animation-delay: -16.67s !important; /* 200°/360° * 30s = 16.67s */
}

.quantum-link.orbit-3[data-angle="320"] {
    animation-delay: -26.67s !important; /* 320°/360° * 30s = 26.67s */
}

/* Make link cores clearly visible */
.quantum-link .link-core {
    min-width: 120px !important;
    padding: 12px 20px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border: 2px solid currentColor !important;
    border-radius: 8px !important;
}

/* Different border colors per orbit */
.quantum-link.orbit-1 .link-core {
    border-color: #00FFaa !important;
}

.quantum-link.orbit-2 .link-core {
    border-color: #FFD700 !important;
}

.quantum-link.orbit-3 .link-core {
    border-color: #FF006E !important;
}

/* Hover effects - pause rotation on hover */
.quantum-link:hover {
    animation-play-state: paused !important;
}

.quantum-link:hover .link-core {
    transform: scale(1.15) !important;
    z-index: 1000 !important;
    box-shadow: 0 0 30px currentColor !important;
}

/* Mobile responsive - smaller radii */
@media (max-width: 768px) {
    @keyframes rotate-orbit-1 {
        from {
            transform: translate(-50%, -50%) rotate(0deg) translateX(140px) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg) translateX(140px) rotate(-360deg);
        }
    }
    
    @keyframes rotate-orbit-2 {
        from {
            transform: translate(-50%, -50%) rotate(0deg) translateX(220px) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg) translateX(220px) rotate(-360deg);
        }
    }
    
    @keyframes rotate-orbit-3 {
        from {
            transform: translate(-50%, -50%) rotate(0deg) translateX(300px) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg) translateX(300px) rotate(-360deg);
        }
    }
}