/**
 * Earth & Rings — 3D globe, rings, and orbital planets
 */

/* Rings Container */
.hero-earth-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 2400px;
    max-height: 2400px;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
    perspective: 2000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    right: auto !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(-50%, -50%, 0);
    transition: none !important;
}

/* Background light effect */
.hero-light {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vmax;
    height: 100vmax;
    max-width: 1600px;
    max-height: 1600px;
    transform: translate3d(calc(-50% + var(--light-x, 0) * 1px), calc(-50% + var(--light-y, 0) * 1px), 0) scale(var(--light-scale, 1));
    opacity: var(--light-opacity, 0.15) !important;
    border-radius: 50%;
    transition: none !important;
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.4) 20%,
        rgba(0, 0, 0, 0.2) 40%,
        rgba(0, 0, 0, 0.1) 60%,
        transparent 80%
    );
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Earth container */
.hero-earth {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 1000px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 3;
    will-change: transform;
    transition: none !important;
}

#earth3DContainer {
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
    transition: none !important;
}

#earth3DContainer canvas {
    background: transparent !important;
    display: block;
}

/* Earth Rings */
.earth-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(var(--text-rgb), 0.2);
    border-radius: 50%;
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 1;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* 3 equidistant rings */
.ring-1 {
    width: 1500px;
    height: 1500px;
    max-width: 90vh;
    max-height: 90vh;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

.ring-2 {
    width: 1800px;
    height: 1800px;
    border: 1px solid rgba(var(--text-rgb), 0.22);
    transform-origin: center center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-3 {
    width: 2500px;
    height: 2500px;
    border: 1px solid rgba(var(--text-rgb), 0.18);
    transform-origin: center center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Planets orbiting on rings */
.ring-planet {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(var(--text-rgb), 0.8);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    filter: blur(0.5px);
    box-shadow: 0 0 16px rgba(var(--text-rgb), 0.6), 0 0 24px rgba(var(--text-rgb), 0.3);
    z-index: 10;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border: 1.5px solid rgba(var(--text-rgb), 0.7);
    pointer-events: none;
}

.planet-1 {
    --planet-radius: 749.5px;
    transform: translate(-50%, -50%) translate(var(--planet-radius), 0);
    transform-origin: calc(-1 * var(--planet-radius)) 0;
    animation: orbitRing1 32s linear infinite;
    z-index: 10;
}

.planet-2 {
    transform: translate(-50%, -50%) translate(900px, 0);
    transform-origin: -900px 0;
    animation: orbitRing2 48s linear infinite;
    z-index: 10;
}

.planet-3 {
    transform: translate(-50%, -50%) translate(1250px, 0);
    transform-origin: -1250px 0;
    animation: orbitRing3 62s linear infinite;
    z-index: 10;
}

/* Responsive — Earth & Rings */

/* Mobile */
@media (max-width: 768px) {
    .hero-earth-container {
        max-width: 1600px;
        max-height: 1600px;
    }
    
    .hero-earth {
        max-width: 600px;
        max-height: 600px;
    }
    
    .ring-1 {
        width: 750px;
        height: 750px;
        max-width: 85vh;
        max-height: 85vh;
    }
    
    .ring-2 {
        width: 900px;
        height: 900px;
    }
    
    .ring-3 {
        width: 1250px;
        height: 1250px;
    }
    
    .hero-light {
        max-width: 1200px;
        max-height: 1200px;
    }
    
    .planet-1 {
        transform: translate(-50%, -50%) translate(374.5px, 0);
        transform-origin: -374.5px 0;
        animation: orbitRing1Mobile 32s linear infinite;
    }
    
    .planet-2 {
        transform: translate(-50%, -50%) translate(450px, 0);
        transform-origin: -450px 0;
        animation: orbitRing2Mobile 48s linear infinite;
    }
    
    .planet-3 {
        transform: translate(-50%, -50%) translate(625px, 0);
        transform-origin: -625px 0;
        animation: orbitRing3Mobile 62s linear infinite;
    }
}