/* Orbitalgüeb V5: Pure Visuals */

/* 1. CONTAINER */
#orbital-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Pass clicks through usually */
    z-index: 99999;
}

@media (min-width: 1025px) {
    #orbital-container {
        display: none !important;
    }
}

/* 2. THE ORB (Zero-Layout Approach) */
#orbital-orb {
    position: fixed;
    /* Fixed to viewport */
    top: 0;
    left: 0;

    /* Dimensions from Variable */
    width: var(--orb-size);
    height: var(--orb-size);
    border-radius: 50%;

    /* VISUALS: BRUTAL GLASS */
    background: rgba(30, 30, 35, 0.45);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);

    /* Centering Content */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    cursor: pointer;
    pointer-events: auto;

    /* Initial OFF-SCREEN safe position managed by CSS to avoid flash? */
    /* No, we leave it at 0,0 and let JS move it instantly on load */
    /* Or we hide opacity until JS Ready */
    opacity: 0;
    transition: opacity 0.2s;
    /* Fade in when JS ready */
}

#orbital-orb.ready {
    opacity: 1;
}

/* ICON Styling */
.orb-icon-wrapper {
    width: 60%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    transition: all 0.4s ease;
}

/* Expanded State: Disintegrate */
#orbital-orb.expanded .orb-icon-wrapper {
    transform: scale(3);
    opacity: 0;
    filter: blur(20px);
}

#orbital-orb.expanded {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.1);
}

/* 3. SATELLITES */
.glass-satellite {
    position: absolute;
    /* Relative to Orb? NO. To Container. */
    width: 55px;
    height: 55px;
    border-radius: 50%;

    background: var(--sat-color, rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    text-decoration: none;

    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
    pointer-events: auto;
    z-index: 2000;
}

.glass-satellite.visible {
    opacity: 1;
    transform: scale(1);
}

.glass-satellite img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 4. OVERLAY */
#orbital-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 100;
}

body.orbital-open #orbital-overlay {
    opacity: 1;
    pointer-events: auto;
}