/* ==========================================================
   ORBITAL VIEWPORT
========================================================== */

#orbitViewport{

position:relative;

width:100%;
height:700px;

margin:30px auto;

overflow:hidden;

border:1px solid currentColor;

background:
radial-gradient(circle at center,
rgba(255,255,255,.04),
rgba(255,255,255,.015) 35%,
transparent 80%);

cursor:grab;

user-select:none;

}

#orbitViewport:active{

cursor:grabbing;

}

/* ==========================================================
   CANVAS
========================================================== */

#skyCanvas{

position:absolute;

inset:0;

width:100%;
height:100%;

display:block;

background:transparent;

}

/* ==========================================================
   OVERLAY
========================================================== */

#overlay{

position:absolute;

inset:0;

pointer-events:none;

}

/* ==========================================================
   BLUE OYSTER
========================================================== */

#blueOyster{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

z-index:10;

display:flex;
flex-direction:column;
align-items:center;

}

.satelliteDot{

width:10px;
height:10px;

border-radius:50%;

background:currentColor;

box-shadow:

0 0 8px currentColor,
0 0 16px currentColor,
0 0 28px currentColor;

animation:bluePulse 2.2s ease-in-out infinite;

}

.satelliteLabel{

margin-top:10px;

font-size:12px;

text-align:center;

opacity:.85;

line-height:1.5;

letter-spacing:1px;

}

@keyframes bluePulse{

0%{

transform:scale(1);

opacity:.7;

}

50%{

transform:scale(1.35);

opacity:1;

}

100%{

transform:scale(1);

opacity:.7;

}

}

/* ==========================================================
   EARTH
========================================================== */

#earth{

    position:absolute;

    display:none;

    width:60px;
    height:60px;

    transform:translate(-50%,-50%);

    pointer-events:none;

    z-index:8;

}

/* ==========================================================
   PLANET
========================================================== */

.earthPlanet{

    position:absolute;

    inset:0;

    border-radius:50%;

    overflow:hidden;

    background:
    radial-gradient(

        circle at 28% 25%,

        #62c8ff 0%,

        #2b84d8 20%,

        #1555b0 45%,

        #072a67 70%,

        #02112d 100%

    );

    box-shadow:

        inset -12px -10px 18px rgba(0,0,0,.55),

        0 0 14px rgba(80,170,255,.25);

}

/* ==========================================================
   NIGHT SIDE
========================================================== */

.terminator{

    position:absolute;

    left:48%;

    top:-20%;

    width:110%;

    height:150%;

    border-radius:50%;

    background:rgba(0,0,0,.52);

    filter:blur(5px);

}

/* ==========================================================
   ATMOSPHERE
========================================================== */

.earthAtmosphere{

    position:absolute;

    inset:-2px;

    border-radius:50%;

    border:2px solid rgba(120,210,255,.42);

    filter:blur(2px);

}

/* ==========================================================
   OUTER GLOW
========================================================== */

.earthGlow{

    position:absolute;

    inset:-18px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(80,180,255,.22) 0%,

        rgba(80,180,255,.10) 35%,

        rgba(80,180,255,.03) 55%,

        transparent 75%

    );

    filter:blur(12px);

}

/* ==========================================================
   SUBTLE PULSE
========================================================== */

#earth{

    animation:earthFloat 9s ease-in-out infinite;

}

@keyframes earthFloat{

    0%{

        transform:
        translate(-50%,-50%)
        scale(1);

    }

    50%{

        transform:
        translate(-50%,-50%)
        scale(1.03);

    }

    100%{

        transform:
        translate(-50%,-50%)
        scale(1);

    }

}

/* ==========================================================
   LIGHT MODE
========================================================== */

body.light .earthGlow{

    opacity:.55;

}

body.light .earthAtmosphere{

    border-color:rgba(70,160,255,.45);

}

/* ==========================================================
   TELEMETRY
========================================================== */

.orbitTelemetry{

margin-top:20px;

padding:14px 18px;

border:1px solid currentColor;

font-family:monospace;

font-size:13px;

line-height:1.8;

white-space:pre-line;

opacity:.9;

}

/* ==========================================================
   HINT
========================================================== */

.orbitHint{

margin-top:15px;

text-align:center;

font-size:13px;

opacity:.6;

font-style:italic;

}

/* ==========================================================
   CRT EFFECT
========================================================== */

#orbitViewport::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
repeating-linear-gradient(

0deg,

rgba(255,255,255,.025),

rgba(255,255,255,.025) 1px,

transparent 2px,

transparent 4px

);

opacity:.3;

z-index:20;

}

#orbitViewport::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
radial-gradient(circle,
transparent 45%,
rgba(0,0,0,.18));

z-index:21;

}

/* ==========================================================
   LIGHT MODE
========================================================== */

body.light #orbitViewport{

background:
radial-gradient(circle at center,
rgba(0,0,0,.05),
rgba(0,0,0,.02) 40%,
transparent 80%);

}

body.light #orbitViewport::before{

background:
repeating-linear-gradient(

0deg,

rgba(0,0,0,.03),

rgba(0,0,0,.03) 1px,

transparent 2px,

transparent 4px

);

}

body.light .satelliteDot{

box-shadow:

0 0 6px currentColor,
0 0 12px currentColor;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

#orbitViewport{

height:500px;

}

.satelliteLabel{

font-size:11px;

}

.orbitTelemetry{

font-size:12px;

}