/* =========================
   ORBIT WRAPPER (3D)
========================= */
.orbit-wrapper {
    perspective: 800px;
}

.orbit-system {
    position: relative;
    width: 520px;
    height: 520px;
    margin: auto;

    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}

/* =========================
   CORE (JAVA)
========================= */
.core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 120px;
    height: 120px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: radial-gradient(circle, rgba(0,170,255,0.2), transparent);
    border: 1px solid rgba(0,170,255,0.3);

    box-shadow:
        0 0 40px rgba(0,170,255,0.4),
        inset 0 0 20px rgba(0,170,255,0.2);

    transition: 0.3s;
}

.core img {
    width: auto;
    height: 60px;
    filter: drop-shadow(0 0 5px rgba(0,170,255,0.5));
    text-shadow:
        0 0 10px rgba(0,170,255,0.5),
        0 0 25px rgba(0,170,255,0.3);
}

.orbit-wrapper:hover .core {
    box-shadow:
        0 0 60px rgba(0,170,255,0.6),
        inset 0 0 30px rgba(0,170,255,0.3);
}

/* =========================
   ORBITAS
========================= */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbit::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,170,255,0.05), transparent);
}

/* Órbita interna */
.orbit-1 {
    width: 220px;
    height: 220px;
    border: 1px solid rgba(0,170,255,0.15);

    animation: rotateSlow 40s linear infinite;
    --radius: 110px;
}

/* Órbita externa */
.orbit-2 {
    width: 320px;
    height: 320px;
    border: 1px solid rgba(0,170,255,0.1);

    animation: rotateSlowReverse 70s linear infinite;
    --radius: 160px;
}

/* =========================
   SATÉLITES (POSIÇÃO)
========================= */
.sat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    will-change: transform;

    transition: transform 0.3s ease, opacity 0.3s;
    z-index: 10;
    transform:
        rotate(calc(360deg / var(--total, 1) * var(--i)))
        translateX(var(--radius))
        translateZ(20px)
        rotate(calc(-360deg / var(--total, 1) * var(--i)));
}

.sat,
.sat * {
    pointer-events: auto;
}

/* =========================
   SAT INNER (CORREÇÃO REAL)
========================= */

.sat-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    animation: keepUpright 40s linear infinite;
}

.orbit-2 .sat-inner {
    animation: keepUprightReverse 70s linear infinite;
}

.sat .icon-blue {
    font-size: 26px;
    color: #8fdcff;
    opacity: 0.8;

    transition: 0.3s;

    text-shadow:
        0 0 6px rgba(0,170,255,0.4),
        0 0 12px rgba(0,170,255,0.2);
}

.sat:hover .icon-blue {
    color: #ffffff;

    transform: scale(1.15);

    text-shadow:
        0 0 12px rgba(0,170,255,0.9),
        0 0 30px rgba(0,170,255,0.5);
}

.sat.active .icon-blue {
    transform: scale(1.3);
    color: #ffffff;

    text-shadow:
        0 0 15px rgba(0,170,255,1),
        0 0 35px rgba(0,170,255,0.6);
}

/* 
.devicon-java-plain,
.devicon-spring-plain,
.devicon-hibernate-plain,
.devicon-mysql-plain,
.devicon-docker-plain,
.devicon-amazonwebservices-original,
.devicon-git-plain,
.devicon-linux-plain {
    color: #8fdcff !important;
}
    */

/* =========================
   ANIMAÇÕES
========================= */

/* Órbitas */
@keyframes rotateSlow {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotateSlowReverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

/* Corrigir orientação */
@keyframes keepUpright {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes keepUprightReverse {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   TOOLTIP (IRON MAN)
========================= */
#hud-tooltip {
    position: fixed;
    top: 0;
    left: 0;

    padding: 8px 18px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #8fdcff;

    background: rgba(0, 15, 30, 0.75);
    backdrop-filter: blur(8px);

    border: 1px solid rgba(0,170,255,0.5);
    border-radius: 6px;

    pointer-events: none;
    opacity: 0;

    transform: translate(-50%, -120%) scale(0.9);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    box-shadow:
        0 0 12px rgba(0,170,255,0.4),
        inset 0 0 12px rgba(0,170,255,0.2);

    overflow: hidden;
}

#hud-tooltip::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(0,170,255,0.4),
        transparent
    );

    animation: scan 2s linear infinite;
}

#hud-tooltip.active {
    opacity: 1;
    transform: translate(-50%, -140%) scale(1);
}

@keyframes scan {
    0% { left: -100%; }
    100% { left: 120%; }
}