@font-face {
    font-family: "VT323";
src: url("../fonts/vt323/VT323-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--terminal-text: #e8e4d9;
--terminal-text-dim: #8a8780;
--terminal-text-glow: #fffff0;
--terminal-bg: #0a0a0a;
--terminal-bg-light: #121212;
--scanline-opacity: 0.03;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: "VT323", monospace;
background: var(--terminal-bg);
color: var(--terminal-text);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
    );
pointer-events: none;
z-index: 1000;
}
body::after {
content: "";
position: fixed;
inset: 0;
background: rgba(232, 228, 217, 0.008);
pointer-events: none;
z-index: 999;
}
.vignette {
position: fixed;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 0%,
transparent 60%,
rgba(0, 0, 0, 0.45) 100%
    );
pointer-events: none;
z-index: 998;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------- */
/* ASCII HEADER - IMPROVED MOBILE */
/* ---------------------------------------------------------------- */
.ascii-header {
font-family: monospace;
text-align: center;
font-size: 0.62rem;
line-height: 1.12;
letter-spacing: -0.4px;
white-space: pre;
color: var(--terminal-text);
text-shadow: 0 0 10px var(--terminal-text-glow), 0 0 20px rgba(232, 228, 217, 0.3);
animation: glow 3s ease-in-out infinite alternate;
margin-bottom: 1.2rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 8px;
max-width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ascii-header::-webkit-scrollbar {
display: none;
}
@keyframes glow {
from {
text-shadow: 0 0 8px var(--terminal-text-glow), 0 0 15px rgba(232, 228, 217, 0.15);
    }
to {
text-shadow: 0 0 12px var(--terminal-text-glow), 0 0 25px rgba(232, 228, 217, 0.25);
    }
}
/* Strong mobile optimizations */
@media (max-width: 768px) {
.ascii-header {
font-size: 0.385rem;
line-height: 1.05;
letter-spacing: -0.85px;
    }
}
@media (max-width: 480px) {
.ascii-header {
font-size: 0.34rem;
line-height: 1.02;
letter-spacing: -1.05px;
    }
}
@media (max-width: 390px) {
.ascii-header {
font-size: 0.315rem;
letter-spacing: -1.15px;
    }
}
/* ---------------------------------------------------------------- */
/* OTHER STYLES */
/* ---------------------------------------------------------------- */
.tagline {
text-align: center;
font-size: 1.4rem;
letter-spacing: 0.2em;
color: var(--terminal-text-dim);
margin-bottom: 3rem;
}
.tagline::before,
.tagline::after {
content: "---- ";
}
.tagline::after {
content: " ----";
}
.divider {
text-align: center;
color: var(--terminal-text-dim);
opacity: 0.6;
margin: 2rem 0;
}
.mission {
text-align: center;
color: var(--terminal-text-dim);
margin: 1.5rem 0 2.5rem;
letter-spacing: 0.08em;
}
.section {
margin-bottom: 2.5rem;
}
/* Bold ABOUT & SERVICES text */
.section-header.bold-header span {
font-weight: bold;
}
.section-header {
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--terminal-text-dim);
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-header::before {
content: ">";
animation: blink 1s step-end infinite;
}
.blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.service-card {
background: var(--terminal-bg-light);
border: 1px solid var(--terminal-text-dim);
padding: 1.5rem;
position: relative;
transition: all 0.3s ease;
}
.service-card:focus-visible {
outline: 2px solid var(--terminal-text);
outline-offset: 4px;
box-shadow: 0 0 10px rgba(232, 228, 217, 0.2);
}
.service-card:hover {
background: rgba(232, 228, 217, 0.03);
box-shadow: 0 0 20px rgba(232, 228, 217, 0.05), inset 0 0 20px rgba(232, 228, 217, 0.01);
}
.service-card.coming-soon {
opacity: 0.6;
background: #0e0e0e;
border-color: #444;
color: #a0a0a0;
}
.service-card.coming-soon .service-name,
.service-card.coming-soon .service-url,
.service-card.coming-soon .service-description,
.service-card.coming-soon .status-value {
color: #888;
}
.service-card.coming-soon .service-badges .badge {
color: #777;
border-color: #555;
background: rgba(100,100,100,0.08);
}
.service-card.coming-soon:hover {
opacity: 0.8;
}
/* Staggered entrance animation */
.services-grid .service-card {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s ease-out forwards;
}
.services-grid .service-card:nth-child(1) { animation-delay: 0.1s; }
.services-grid .service-card:nth-child(2) { animation-delay: 0.25s; }
.services-grid .service-card:nth-child(3) { animation-delay: 0.45s; }
.services-grid .service-card:nth-child(4) { animation-delay: 0.6s; }
.services-grid .service-card:nth-child(5) { animation-delay: 0.8s; }
.services-grid .service-card:nth-child(6) { animation-delay: 0.95s; }
.system-status {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s ease-out forwards;
animation-delay: 0.9s;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
    }
to {
opacity: 1;
transform: translateY(0);
    }
}
.service-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.service-icon {
font-family: "VT323", monospace;
font-size: 1.4rem;
width: 2.5rem;
text-align: center;
color: var(--terminal-text);
opacity: 0.9;
}
.service-name {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.service-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px #22c55e;
animation: pulse 2s ease-in-out infinite;
}
.status-dot.coming-soon {
background: #6b7280;
border: 1px solid #4b5563;
box-shadow: none;
animation: none;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.service-description {
color: var(--terminal-text-dim);
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.service-url {
color: var(--terminal-text);
text-decoration: none;
display: inline-block;
padding: 0.25rem 0;
border-bottom: 1px dashed var(--terminal-text-dim);
transition: all 0.2s ease;
margin-bottom: 0.6rem;
}
.service-url:hover {
color: var(--terminal-text-glow);
border-bottom-color: var(--terminal-text);
text-shadow: 0 0 8px var(--terminal-text-glow);
}
.service-badges.compact {
display: inline-flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.4rem 0 0.2rem;
vertical-align: middle;
}
.service-badges.compact .badge {
font-size: 0.78rem;
padding: 0.28rem 0.55rem;
min-width: auto;
text-align: center;
border: 1px solid var(--terminal-text-dim);
background: rgba(138,135,128,0.07);
border-radius: 3px;
line-height: 1.2;
white-space: nowrap;
}
.system-status {
background: var(--terminal-bg-light);
border: 1px solid var(--terminal-text-dim);
padding: 1.5rem;
margin-top: 2rem;
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
}
.status-item {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 0.5rem;
font-size: 1.1rem;
padding: 0.4rem 0;
border-bottom: 1px dotted rgba(138, 135, 128, 0.3);
}
.status-item:last-child {
border-bottom: none;
}
.status-label {
color: var(--terminal-text-dim);
position: relative;
}
.status-label::after {
content: ":";
margin-left: 0.2rem;
color: var(--terminal-text-dim);
}
.status-value {
color: var(--terminal-text);
}
.footer {
text-align: center;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px dashed var(--terminal-text-dim);
color: var(--terminal-text-dim);
font-size: 1rem;
}
.footer p {
margin: 0.4rem 0;
}
.footer .copyright {
font-size: 0.88rem;
opacity: 0.65;
color: var(--terminal-text-dim);
margin-top: 0.5rem;
}
@media (max-width: 600px) {
.tagline {
font-size: 1.1rem;
letter-spacing: 0.1em;
    }
.tagline::before,
.tagline::after {
content: "-- ";
    }
.tagline::after {
content: " --";
    }
.services-grid {
grid-template-columns: 1fr;
    }
.container {
padding: 1rem;
    }
}
::selection {
background: var(--terminal-text);
color: var(--terminal-bg);
}
/* Top-to-bottom staggered reveal for status lines */
.status-reveal .status-item {
opacity: 0;
transform: translateY(-15px);
transition: all 0.5s ease-out;
}
.status-reveal.visible .status-item {
opacity: 1;
transform: translateY(0);
}
.status-reveal .status-item:nth-child(1) { transition-delay: 0.1s; }
.status-reveal .status-item:nth-child(2) { transition-delay: 0.3s; }
.status-reveal .status-item:nth-child(3) { transition-delay: 0.5s; }
.status-reveal .status-item:nth-child(4) { transition-delay: 0.7s; }
.status-reveal .status-item:nth-child(5) { transition-delay: 0.9s; }
.status-reveal .status-item:nth-child(6) { transition-delay: 1.1s; }
/* ================================================================
   OUTOFSPACENET — DEEP SPACE BACKGROUND OBJECTS
   ----------------------------------------------------------------
   This layer is completely independent from the existing design.
   It does NOT modify fonts, cards, text, scanlines or effects.
   ================================================================ */
.space-objects {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
isolation: isolate;
}
/*
   Keep the actual website above the space objects.
*/
.container {
z-index: 2;
}
/*
   Keep your existing CRT layers above the objects.
*/
body::after {
z-index: 999;
}
body::before {
z-index: 1000;
}
.vignette {
z-index: 998;
}
/* ================================================================
   COMMON SPACE OBJECT SETTINGS
   ================================================================ */
.space-star,
.space-spark,
.space-planet,
.space-ufo,
.space-satellite,
.space-comet,
.space-asteroid,
.space-blackhole {
position: absolute;
user-select: none;
}
/* ================================================================
   STARS — fixed position, soft twinkle only
   ================================================================ */
.space-star {
width: 2px;
height: 2px;
background: #f5f0e1;
border-radius: 50%;
opacity: 0.4;
box-shadow:
  0 0 4px rgba(255, 252, 240, 0.9),
  0 0 8px rgba(232, 228, 217, 0.35),
  0 0 14px rgba(255, 250, 230, 0.15);
animation: starTwinkle 5.2s ease-in-out infinite alternate;
}

/* Size & depth variation */
.star-01 { left: 7%;  top: 14%; width: 2.5px; height: 2.5px; animation-delay: -1.2s; }
.star-02 { left: 16%; top: 31%; width: 1px;   height: 1px;   animation-delay: -3.1s; }
.star-03 { left: 24%; top: 9%;  width: 2px;   height: 2px;   animation-delay: -4.8s; }
.star-04 { left: 31%; top: 47%; width: 1.5px; height: 1.5px; animation-delay: -2.4s; }
.star-05 { left: 39%; top: 18%; width: 2.5px; height: 2.5px; animation-delay: -5.5s; }
.star-06 { left: 48%; top: 72%; width: 1px;   height: 1px;   animation-delay: -3.8s; }
.star-07 { left: 56%; top: 11%; width: 2px;   height: 2px;   animation-delay: -0.9s; }
.star-08 { left: 63%; top: 38%; width: 1px;   height: 1px;   animation-delay: -6.2s; }
.star-09 { left: 71%; top: 21%; width: 2.5px; height: 2.5px; animation-delay: -2.7s; }
.star-10 { left: 79%; top: 58%; width: 1.5px; height: 1.5px; animation-delay: -4.3s; }
.star-11 { left: 87%; top: 16%; width: 2px;   height: 2px;   animation-delay: -1.6s; }
.star-12 { left: 94%; top: 42%; width: 1px;   height: 1px;   animation-delay: -7.1s; }
.star-13 { left: 4%;  top: 77%; width: 1.5px; height: 1.5px; animation-delay: -5.0s; }
.star-14 { left: 13%; top: 64%; width: 2px;   height: 2px;   animation-delay: -3.4s; }
.star-15 { left: 28%; top: 84%; width: 1px;   height: 1px;   animation-delay: -0.7s; }
.star-16 { left: 67%; top: 81%; width: 2.5px; height: 2.5px; animation-delay: -6.0s; }
.star-17 { left: 76%; top: 91%; width: 1px;   height: 1px;   animation-delay: -2.1s; }
.star-18 { left: 84%; top: 71%; width: 2px;   height: 2px;   animation-delay: -4.6s; }
.star-19 { left: 92%; top: 83%; width: 1.5px; height: 1.5px; animation-delay: -3.0s; }
.star-20 { left: 45%; top: 32%; width: 1px;   height: 1px;   animation-delay: -5.8s; }

/* Soft cross flares on selected brighter stars */
.star-01::before, .star-01::after,
.star-05::before, .star-05::after,
.star-09::before, .star-09::after,
.star-11::before, .star-11::after,
.star-16::before, .star-16::after {
content: "";
position: absolute;
pointer-events: none;
background: linear-gradient(
  to bottom,
  transparent,
  rgba(255, 252, 240, 0.65),
  transparent
);
}

.star-01::before, .star-05::before, .star-09::before,
.star-11::before, .star-16::before {
width: 1px;
height: 12px;
left: 50%;
top: -5px;
transform: translateX(-50%);
}

.star-01::after, .star-05::after, .star-09::after,
.star-11::after, .star-16::after {
width: 12px;
height: 1px;
top: 50%;
left: -5px;
transform: translateY(-50%);
background: linear-gradient(
  to right,
  transparent,
  rgba(255, 252, 240, 0.65),
  transparent
);
}

@keyframes starTwinkle {
0% {
  opacity: 0.18;
  box-shadow:
    0 0 3px rgba(255, 252, 240, 0.5),
    0 0 6px rgba(232, 228, 217, 0.2),
    0 0 10px rgba(255, 250, 230, 0.08);
}
50% {
  opacity: 0.75;
  box-shadow:
    0 0 5px rgba(255, 252, 240, 1),
    0 0 11px rgba(232, 228, 217, 0.5),
    0 0 18px rgba(255, 250, 230, 0.25);
}
100% {
  opacity: 0.28;
  box-shadow:
    0 0 3.5px rgba(255, 252, 240, 0.65),
    0 0 7px rgba(232, 228, 217, 0.28),
    0 0 12px rgba(255, 250, 230, 0.12);
}
}
/* ================================================================
   PARTICLES / SPARKS
   - Star-shaped (✦ ✧) → fixed position, soft opacity pulse only
   - Dust (·) → floats gently
   ================================================================ */
.space-spark {
color: var(--terminal-text-glow);
font-family: monospace;
font-size: 0.9rem;
opacity: 0.28;
text-shadow:
  0 0 5px var(--terminal-text-glow),
  0 0 12px rgba(232,228,217,0.35);
}

/* Star-shaped particles stay fixed and only gently pulse */
.spark-01,
.spark-02,
.spark-03,
.spark-05 {
animation: sparkPulse 6s ease-in-out infinite alternate;
}

.spark-01 { left: 12%; top: 43%; animation-delay: -1.2s; }
.spark-02 { left: 42%; top: 14%; animation-delay: -3.4s; }
.spark-03 { left: 73%; top: 47%; animation-delay: -5.1s; }
.spark-05 { left: 55%; top: 88%; animation-delay: -2.3s; }

/* Dust particles (·) — only these float */
.spark-04,
.spark-06,
.spark-07,
.spark-08,
.spark-09,
.spark-10,
.spark-11,
.spark-12 {
font-size: 1.05rem;
animation: dustFloat 11s ease-in-out infinite;
}

.spark-04 { left: 89%; top: 68%; animation-delay: -4.0s; }
.spark-06 { left: 8%;  top: 22%; animation-delay: -1.5s; }
.spark-07 { left: 27%; top: 58%; animation-delay: -6.2s; }
.spark-08 { left: 51%; top: 9%;  animation-delay: -2.8s; }
.spark-09 { left: 64%; top: 81%; animation-delay: -7.5s; }
.spark-10 { left: 19%; top: 87%; animation-delay: -3.7s; }
.spark-11 { left: 82%; top: 33%; animation-delay: -0.9s; }
.spark-12 { left: 37%; top: 41%; animation-delay: -5.4s; }

@keyframes sparkPulse {
0%   { opacity: 0.15; }
50%  { opacity: 0.45; }
100% { opacity: 0.22; }
}

@keyframes dustFloat {
0% {
  opacity: 0.12;
  transform: translate(0, 0) scale(0.85);
}
25% {
  opacity: 0.38;
  transform: translate(8px, -11px) scale(1.05);
}
50% {
  opacity: 0.48;
  transform: translate(-5px, -18px) scale(1.15);
}
75% {
  opacity: 0.28;
  transform: translate(-11px, -7px) scale(0.95);
}
100% {
  opacity: 0.12;
  transform: translate(0, 0) scale(0.85);
}
}
/* ================================================================
   BLACK HOLE
   ================================================================ */
.space-blackhole {
width: 160px;
height: 160px;
opacity: 0.55;
filter: drop-shadow(0 0 20px rgba(255, 200, 120, 0.25));
}
.blackhole-01 {
left: 68%;
top: 38%;
transform: translate(-50%, -50%);
animation: blackholeDrift 95s ease-in-out infinite alternate;
}
.bh-event-horizon {
position: absolute;
width: 42px;
height: 42px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(
circle at 50% 50%,
#000000 0%,
#000000 70%,
#050505 100%
);
box-shadow:
0 0 0 2px rgba(0,0,0,0.9),
inset 0 0 18px rgba(0,0,0,1),
0 0 30px rgba(0,0,0,0.8);
z-index: 4;
}
.bh-photon-ring {
position: absolute;
width: 58px;
height: 58px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2.5px solid transparent;
background:
linear-gradient(#0a0a0a, #0a0a0a) padding-box,
conic-gradient(
from 0deg,
rgba(255, 220, 150, 0.95),
rgba(255, 180, 80, 0.7),
rgba(255, 140, 40, 0.9),
rgba(255, 200, 120, 0.6),
rgba(255, 220, 150, 0.95)
) border-box;
box-shadow:
0 0 12px rgba(255, 200, 100, 0.7),
0 0 28px rgba(255, 160, 60, 0.35),
inset 0 0 10px rgba(255, 180, 80, 0.25);
animation: photonSpin 18s linear infinite;
z-index: 3;
}
.bh-accretion {
position: absolute;
width: 130px;
height: 42px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateX(72deg);
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
transparent 18%,
rgba(255, 160, 50, 0.15) 28%,
rgba(255, 140, 40, 0.55) 42%,
rgba(255, 200, 100, 0.7) 55%,
rgba(255, 160, 60, 0.4) 70%,
transparent 85%
);
box-shadow:
0 0 20px rgba(255, 160, 50, 0.4),
0 0 40px rgba(255, 120, 30, 0.2);
animation: accretionSpin 28s linear infinite;
z-index: 2;
}
.bh-accretion::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background:
conic-gradient(
from 90deg,
transparent 0%,
rgba(255, 200, 120, 0.35) 15%,
transparent 30%,
rgba(255, 140, 40, 0.4) 50%,
transparent 65%,
rgba(255, 180, 80, 0.3) 80%,
transparent 100%
);
animation: accretionSpin 22s linear infinite reverse;
mix-blend-mode: screen;
}
.bh-glow {
position: absolute;
width: 160px;
height: 160px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 180, 80, 0.18) 0%,
rgba(255, 140, 40, 0.08) 35%,
transparent 65%
);
filter: blur(8px);
z-index: 1;
animation: bhGlowPulse 6s ease-in-out infinite alternate;
}
@keyframes photonSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes accretionSpin {
from { transform: translate(-50%, -50%) rotateX(72deg) rotate(0deg); }
to { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); }
}
@keyframes bhGlowPulse {
from { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes blackholeDrift {
from { transform: translate(-50%, -50%) translate(0, 0); }
to { transform: translate(-50%, -50%) translate(-40px, 25px); }
}
/* ================================================================
   PLANETS
   ================================================================ */
.space-planet {
opacity: 0.22;
filter: drop-shadow(0 0 12px rgba(232,228,217,0.18));
}

/* ---------------- RINGED GAS GIANT (planet-01) — UNCHANGED ---------------- */
.planet-01 {
width: 118px;
height: 118px;
left: -36px;
top: 60%;
animation: planetDrift01 82s ease-in-out infinite alternate;
}

.planet-01 .planet-atmosphere {
position: absolute;
width: 78px;
height: 78px;
left: 20px;
top: 20px;
border-radius: 50%;
background: radial-gradient(
  circle at 38% 32%,
  rgba(255, 236, 200, 0.22) 0%,
  rgba(200, 170, 120, 0.12) 45%,
  transparent 72%
);
filter: blur(4px);
z-index: 1;
pointer-events: none;
}

.planet-01 .planet-body {
position: absolute;
width: 64px;
height: 64px;
left: 27px;
top: 27px;
border-radius: 50%;
background:
  radial-gradient(circle at 32% 28%,
    rgba(255, 245, 220, 0.95) 0%,
    rgba(220, 190, 140, 0.75) 18%,
    rgba(160, 130, 90, 0.55) 42%,
    rgba(90, 70, 45, 0.7) 68%,
    rgba(20, 15, 10, 0.95) 100%
  );
border: 1px solid rgba(232, 220, 190, 0.45);
box-shadow:
  inset -14px -12px 22px rgba(0, 0, 0, 0.75),
  inset 6px 5px 12px rgba(255, 240, 200, 0.15),
  0 0 18px rgba(232, 210, 160, 0.22);
overflow: hidden;
z-index: 3;
}

.planet-01 .planet-body .band {
position: absolute;
left: -8%;
width: 116%;
height: 5px;
border-radius: 50%;
background: linear-gradient(
  to right,
  transparent 5%,
  rgba(255, 230, 180, 0.22) 25%,
  rgba(180, 140, 90, 0.35) 50%,
  rgba(255, 230, 180, 0.18) 75%,
  transparent 95%
);
box-shadow: 0 0 4px rgba(255, 220, 160, 0.15);
}

.planet-01 .planet-body .band:nth-child(1) {
top: 16px;
transform: rotate(-9deg);
opacity: 0.85;
}
.planet-01 .planet-body .band:nth-child(2) {
top: 27px;
height: 4px;
transform: rotate(6deg);
opacity: 0.7;
}
.planet-01 .planet-body .band:nth-child(3) {
top: 38px;
height: 6px;
transform: rotate(-4deg);
opacity: 0.9;
}
.planet-01 .planet-body .band:nth-child(4) {
top: 48px;
height: 3px;
transform: rotate(8deg);
opacity: 0.55;
}

.planet-01 .planet-body .highlight {
position: absolute;
width: 18px;
height: 14px;
left: 10px;
top: 9px;
border-radius: 50%;
background: radial-gradient(
  circle at 40% 40%,
  rgba(255, 250, 230, 0.55),
  transparent 70%
);
filter: blur(1px);
pointer-events: none;
}

/* Dual rings */
.planet-01 .planet-ring {
position: absolute;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateX(74deg) rotateZ(-18deg);
pointer-events: none;
}

.planet-01 .planet-ring-outer {
width: 116px;
height: 32px;
border: 2.5px solid transparent;
background:
  linear-gradient(#0a0a0a, #0a0a0a) padding-box,
  linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 210, 160, 0.15) 12%,
    rgba(255, 230, 180, 0.55) 28%,
    rgba(200, 170, 120, 0.4) 50%,
    rgba(255, 230, 180, 0.5) 72%,
    rgba(232, 210, 160, 0.12) 88%,
    transparent 100%
  ) border-box;
box-shadow:
  0 0 8px rgba(232, 210, 160, 0.25),
  inset 0 0 6px rgba(255, 230, 180, 0.12);
z-index: 2;
}

.planet-01 .planet-ring-inner {
width: 92px;
height: 22px;
border: 1.5px solid rgba(232, 210, 160, 0.35);
box-shadow:
  0 0 5px rgba(232, 210, 160, 0.2),
  inset 0 0 4px rgba(255, 230, 180, 0.1);
z-index: 4;
opacity: 0.85;
}

@keyframes planetDrift01 {
from {
  transform: translate(0, 0) rotate(-4deg);
}
to {
  transform: translate(190px, -70px) rotate(9deg);
}
}

/* ---------------- PLANET 2 — soft ice / methane world ---------------- */
.planet-02 {
width: 68px;
height: 68px;
right: -16px;
top: 23%;
animation: planetDrift02 105s ease-in-out infinite alternate;
}

.planet-02 .planet-atmosphere {
position: absolute;
width: 58px;
height: 58px;
left: 5px;
top: 5px;
border-radius: 50%;
background: radial-gradient(
  circle at 36% 30%,
  rgba(160, 210, 230, 0.28) 0%,
  rgba(100, 160, 200, 0.12) 48%,
  transparent 72%
);
filter: blur(3.5px);
z-index: 1;
pointer-events: none;
}

.planet-02 .planet-body {
position: absolute;
width: 46px;
height: 46px;
left: 11px;
top: 11px;
border-radius: 50%;
background:
  radial-gradient(circle at 32% 27%,
    rgba(210, 235, 250, 0.95) 0%,
    rgba(140, 190, 220, 0.75) 22%,
    rgba(70, 130, 170, 0.6) 52%,
    rgba(25, 55, 85, 0.9) 100%
  );
border: 1px solid rgba(170, 210, 235, 0.45);
box-shadow:
  inset -12px -10px 18px rgba(0, 0, 0, 0.65),
  inset 5px 4px 10px rgba(200, 230, 250, 0.18),
  0 0 16px rgba(140, 190, 220, 0.22);
overflow: hidden;
z-index: 2;
}

.planet-02 .planet-body .band {
position: absolute;
left: -10%;
width: 120%;
height: 4px;
border-radius: 50%;
background: linear-gradient(
  to right,
  transparent 8%,
  rgba(180, 220, 245, 0.25) 30%,
  rgba(100, 160, 200, 0.35) 55%,
  rgba(180, 220, 245, 0.2) 80%,
  transparent 95%
);
}

.planet-02 .planet-body .band:nth-child(1) {
top: 12px;
transform: rotate(-7deg);
opacity: 0.8;
}
.planet-02 .planet-body .band:nth-child(2) {
top: 22px;
height: 3px;
transform: rotate(5deg);
opacity: 0.65;
}
.planet-02 .planet-body .band:nth-child(3) {
top: 31px;
height: 3.5px;
transform: rotate(-4deg);
opacity: 0.75;
}

.planet-02 .planet-body .highlight {
position: absolute;
width: 14px;
height: 11px;
left: 8px;
top: 7px;
border-radius: 50%;
background: radial-gradient(
  circle at 40% 40%,
  rgba(230, 245, 255, 0.55),
  transparent 70%
);
filter: blur(1px);
pointer-events: none;
}

@keyframes planetDrift02 {
from {
  transform: translate(0, 0);
}
to {
  transform: translate(-155px, 90px);
}
}

/* ---------------- PLANET 3 — tiny smooth ice moon ---------------- */
.planet-03 {
width: 26px;
height: 26px;
left: 79%;
top: 74%;
opacity: 0.26;
animation: moonDrift 62s linear infinite alternate;
}

.planet-03 .planet-atmosphere {
position: absolute;
width: 22px;
height: 22px;
left: 2px;
top: 2px;
border-radius: 50%;
background: radial-gradient(
  circle at 35% 30%,
  rgba(190, 220, 240, 0.22) 0%,
  transparent 68%
);
filter: blur(2px);
z-index: 1;
pointer-events: none;
}

.planet-03 .planet-body {
position: absolute;
width: 16px;
height: 16px;
left: 5px;
top: 5px;
border-radius: 50%;
background:
  radial-gradient(circle at 33% 28%,
    rgba(220, 235, 245, 0.9) 0%,
    rgba(150, 180, 200, 0.65) 40%,
    rgba(50, 70, 90, 0.9) 100%
  );
border: 1px solid rgba(190, 215, 230, 0.4);
box-shadow:
  inset -4px -3px 7px rgba(0, 0, 0, 0.65),
  inset 2px 2px 4px rgba(210, 230, 245, 0.15),
  0 0 8px rgba(160, 195, 220, 0.18);
z-index: 2;
}

.planet-03 .planet-body .highlight {
position: absolute;
width: 6px;
height: 5px;
left: 3px;
top: 2px;
border-radius: 50%;
background: radial-gradient(
  circle at 40% 40%,
  rgba(240, 250, 255, 0.55),
  transparent 70%
);
filter: blur(0.6px);
pointer-events: none;
}

@keyframes moonDrift {
from {
  transform: translate(0, 0);
}
to {
  transform: translate(-110px, -40px);
}
}

/* ================================================================
   UFOs
   ----------------------------------------------------------------
   ufo-01: classic saucer — smaller and cleaner than before, with
           a glassy dome, brushed-metal ring and blinking lights.
   ufo-02: triangle craft (TR-3B style) — reuses the same markup
           (glow / dome / body / i lights) but styled as a triangle.
   ================================================================ */
.space-ufo {
width: 60px;
height: 40px;
opacity: 0.24;
filter:
drop-shadow(0 0 4px rgba(255,255,240,0.35))
drop-shadow(0 0 10px rgba(232,228,217,0.12));
}
/* Soft ambient glow behind either craft */
.ufo-glow {
position: absolute;
width: 70px;
height: 70px;
left: -5px;
top: -15px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255,255,240,0.18),
rgba(232,228,217,0.06) 50%,
transparent 75%
    );
filter: blur(4px);
pointer-events: none;
}
@keyframes ufoLightBlink {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* ---------------- CLASSIC SAUCER (ufo-01) ---------------- */
.ufo-01 .ufo-body {
position: absolute;
width: 52px;
height: 14px;
left: 4px;
top: 17px;
background:
linear-gradient(
to bottom,
rgba(255,255,240,0.55) 0%,
rgba(232,228,217,0.55) 35%,
rgba(138,135,128,0.3) 70%,
rgba(80,78,72,0.25) 100%
        );
border: 1px solid rgba(255,255,240,0.6);
border-radius: 50%;
box-shadow:
0 0 6px rgba(255,255,240,0.4),
inset 0 -4px 5px rgba(0,0,0,0.55),
inset 0 2px 3px rgba(255,255,255,0.25);
}
.ufo-01 .ufo-dome {
position: absolute;
width: 22px;
height: 14px;
left: 19px;
top: 6px;
border-radius: 50% 50% 40% 40%;
background:
radial-gradient(
circle at 38% 28%,
rgba(255,255,255,0.85),
rgba(255,255,240,0.4) 45%,
rgba(138,135,128,0.2) 75%,
rgba(0,0,0,0.6)
        );
border: 1px solid rgba(255,255,240,0.55);
box-shadow: 0 0 6px rgba(255,255,240,0.3);
}
.ufo-01 .ufo-body i {
position: absolute;
width: 3.5px;
height: 3.5px;
border-radius: 50%;
background: #fffff0;
box-shadow:
0 0 3px #fffff0,
0 0 6px rgba(255,255,240,0.6);
bottom: 2px;
animation: ufoLightBlink 1.6s ease-in-out infinite;
}
.ufo-01 .ufo-body i:nth-child(1) { left: 9px; animation-delay: 0s; }
.ufo-01 .ufo-body i:nth-child(2) { left: 20px; animation-delay: 0.4s; }
.ufo-01 .ufo-body i:nth-child(3) { left: 31px; animation-delay: 0.8s; }
.ufo-01 .ufo-body i:nth-child(4) { left: 42px; animation-delay: 1.2s; }
.ufo-01 .ufo-beam {
position: absolute;
width: 32px;
height: 22px;
left: 13px;
top: 29px;
background: linear-gradient(
to bottom,
rgba(255,255,240,0.14),
rgba(255,255,240,0)
    );
clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
opacity: 0.5;
filter: blur(2px);
}
/* UFO 1 crosses the screen */
.ufo-01 {
left: -80px;
top: 24%;
animation: ufoFly01 55s linear infinite;
}
@keyframes ufoFly01 {
0% {
transform: translate(-80px, 20px) rotate(-2deg);
    }
15% {
transform: translate(15vw, -20px) rotate(2deg);
    }
35% {
transform: translate(38vw, 35px) rotate(-1deg);
    }
55% {
transform: translate(60vw, -15px) rotate(3deg);
    }
75% {
transform: translate(82vw, 25px) rotate(-2deg);
    }
100% {
transform: translate(calc(100vw + 100px), -30px) rotate(1deg);
    }
}
/* ---------------- TRIANGLE UFO (ufo-02) ---------------- */
.ufo-02 {
width: 56px;
height: 40px;
left: 80%;
top: 78%;
opacity: 0.3;
transform: scale(0.65);
animation: ufoFloat02 42s ease-in-out infinite alternate;
}
.ufo-02 .ufo-body {
position: absolute;
width: 56px;
height: 26px;
left: 0;
top: 8px;
background:
linear-gradient(
160deg,
rgba(232,228,217,0.35),
rgba(138,135,128,0.18) 55%,
rgba(10,10,10,0.5)
        );
border: 1px solid rgba(232,228,217,0.5);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
box-shadow:
0 0 8px rgba(232,228,217,0.2),
inset 0 -6px 8px rgba(0,0,0,0.5);
}
.ufo-02 .ufo-dome {
position: absolute;
width: 8px;
height: 8px;
left: 24px;
top: 15px;
border-radius: 50%;
border: none;
background: radial-gradient(
circle,
rgba(255,255,255,0.9),
rgba(255,255,240,0.4) 60%,
transparent
    );
box-shadow: 0 0 8px rgba(255,255,240,0.6);
animation: ufoLightBlink 2.4s ease-in-out infinite;
}
.ufo-02 .ufo-body i {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fffff0;
box-shadow:
0 0 3px #fffff0,
0 0 6px rgba(255,255,240,0.55);
animation: ufoLightBlink 1.8s ease-in-out infinite;
}
.ufo-02 .ufo-body i:nth-child(1) { left: 26px; top: 2px; animation-delay: 0s; }
.ufo-02 .ufo-body i:nth-child(2) { left: 3px; top: 22px; animation-delay: 0.6s; }
.ufo-02 .ufo-body i:nth-child(3) { left: 49px; top: 22px; animation-delay: 1.2s; }
@keyframes ufoFloat02 {
from {
transform: scale(0.65) translate(0, 0) rotate(3deg);
    }
to {
transform: scale(0.65) translate(-220px, -90px) rotate(-4deg);
    }
}
/* ================================================================
   SATELLITES — improved design
   ================================================================ */
.space-satellite {
position: absolute;
width: 110px;
height: 60px;
opacity: 0.22;
filter: drop-shadow(0 0 6px rgba(232,228,217,0.3));
transform-origin: center;
}
/* Soft ambient glow */
.sat-glow {
position: absolute;
width: 90px;
height: 50px;
left: 10px;
top: 5px;
border-radius: 50%;
background: radial-gradient(
ellipse,
rgba(255,255,240,0.12),
transparent 70%
  );
filter: blur(6px);
pointer-events: none;
}
/* ---------- Body ---------- */
.sat-body {
position: absolute;
width: 28px;
height: 22px;
left: 41px;
top: 18px;
background:
linear-gradient(
160deg,
rgba(255,255,240,0.55) 0%,
rgba(180,176,165,0.35) 40%,
rgba(90,88,80,0.45) 100%
    );
border: 1px solid rgba(232,228,217,0.7);
border-radius: 3px;
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.25),
inset 0 -3px 6px rgba(0,0,0,0.55),
0 0 8px rgba(232,228,217,0.15);
}
/* Tiny window / sensor */
.sat-window {
position: absolute;
width: 8px;
height: 5px;
left: 4px;
top: 4px;
background: rgba(255,255,240,0.35);
border: 1px solid rgba(255,255,240,0.5);
border-radius: 1px;
box-shadow: 0 0 4px rgba(255,255,240,0.4);
}
/* Status LEDs */
.sat-led {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fffff0;
box-shadow: 0 0 4px #fffff0, 0 0 8px rgba(255,255,240,0.6);
right: 4px;
top: 5px;
animation: satLedBlink 2.4s ease-in-out infinite;
}
.sat-led-2 {
top: 12px;
animation-delay: 1.1s;
}
@keyframes satLedBlink {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
/* ---------- Solar Panels ---------- */
.sat-panel {
position: absolute;
width: 32px;
height: 20px;
top: 19px;
border: 1px solid rgba(232,228,217,0.55);
background:
linear-gradient(
90deg,
rgba(60,58,52,0.4) 0%,
rgba(120,116,105,0.25) 50%,
rgba(60,58,52,0.4) 100%
    ),
repeating-linear-gradient(
0deg,
transparent 0,
transparent 6px,
rgba(232,228,217,0.18) 6px,
rgba(232,228,217,0.18) 7px
    );
box-shadow:
inset 0 0 6px rgba(0,0,0,0.4),
0 0 4px rgba(232,228,217,0.1);
overflow: hidden;
}
/* Cell grid lines */
.sat-panel span {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(232,228,217,0.35);
}
.sat-panel span:nth-child(1) { left: 10px; }
.sat-panel span:nth-child(2) { left: 20px; }
.sat-panel span:nth-child(3) { left: 30px; }
.sat-panel-left {
left: 5px;
transform: perspective(60px) rotateY(12deg);
transform-origin: right center;
}
.sat-panel-right {
right: 5px;
transform: perspective(60px) rotateY(-12deg);
transform-origin: left center;
}
/* ---------- Antenna ---------- */
.sat-antenna {
position: absolute;
width: 1.5px;
height: 16px;
left: 54px;
top: 2px;
background: linear-gradient(
to top,
rgba(232,228,217,0.7),
rgba(232,228,217,0.35)
  );
}
.sat-antenna::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
left: -2.5px;
top: -3px;
border: 1px solid rgba(232,228,217,0.6);
border-radius: 50%;
box-shadow: 0 0 4px rgba(232,228,217,0.3);
}
/* ================================================================
   SATELLITE ANIMATIONS
   ================================================================ */
.satellite-01 {
left: -130px;
top: 48%;
animation: satelliteFly01 88s linear infinite;
}
@keyframes satelliteFly01 {
0% {
transform: translate(-130px, 40px) rotate(-8deg) scale(1);
  }
20% {
transform: translate(20vw, -30px) rotate(4deg) scale(1.05);
  }
45% {
transform: translate(48vw, 25px) rotate(-3deg) scale(1);
  }
70% {
transform: translate(75vw, -45px) rotate(6deg) scale(0.95);
  }
100% {
transform: translate(calc(100vw + 160px), -20px) rotate(-5deg) scale(1);
  }
}
.satellite-02 {
right: 8%;
top: 12%;
width: 80px;
height: 48px;
opacity: 0.13;
transform: scale(0.7);
animation: satelliteFloat02 68s ease-in-out infinite alternate;
}
.satellite-02 .sat-body {
width: 22px;
height: 18px;
left: 29px;
top: 15px;
}
.satellite-02 .sat-panel {
width: 24px;
height: 16px;
top: 16px;
}
.satellite-02 .sat-panel-left { left: 2px; }
.satellite-02 .sat-panel-right { right: 2px; }
.satellite-02 .sat-antenna {
left: 39px;
height: 13px;
}
@keyframes satelliteFloat02 {
from {
transform: scale(0.7) translate(0, 0) rotate(4deg);
  }
to {
transform: scale(0.7) translate(-180px, 140px) rotate(-9deg);
  }
}
/* Mobile scaling */
@media (max-width: 768px) {
.satellite-01 {
transform: scale(0.7);
  }
.satellite-02 {
transform: scale(0.55);
  }
}
/* ================================================================
   COMETS
   ================================================================ */
.space-comet {
width: 150px;
height: 26px;
opacity: 0;
transform: rotate(-25deg);
}
/* HEAD */
.comet-head {
position: absolute;
width: 7px;
height: 7px;
right: 10px;
top: 9.5px;
border-radius: 50%;
background: radial-gradient(
circle at 35% 35%,
#ffffff,
#fffff0 45%,
rgba(232,228,217,0.6) 100%
    );
box-shadow:
0 0 4px #fffff0,
0 0 10px rgba(255,255,240,0.75),
0 0 20px rgba(232,228,217,0.4),
0 0 32px rgba(232,228,217,0.15);
}
/* TAIL — layered so it tapers off softer and looks more natural */
.comet-tail {
position: absolute;
width: 135px;
height: 3px;
right: 15px;
top: 12px;
background: linear-gradient(
to left,
rgba(255,255,240,0.55),
rgba(232,228,217,0.22) 35%,
transparent 90%
    );
filter: blur(1px);
transform-origin: right center;
border-radius: 4px;
}
.comet-tail::before,
.comet-tail::after {
content: "";
position: absolute;
right: 0;
background: linear-gradient(
to left,
rgba(255,255,240,0.35),
transparent 85%
    );
filter: blur(2px);
border-radius: 6px;
}
.comet-tail::before {
width: 110px;
height: 7px;
top: -3px;
opacity: 0.5;
}
.comet-tail::after {
width: 90px;
height: 10px;
top: -5px;
opacity: 0.25;
}
/* COMET 1 */
.comet-01 {
left: -190px;
top: 20%;
animation: cometFly01 32s linear infinite;
}
@keyframes cometFly01 {
0% {
opacity: 0;
transform: translate(-190px, 90px) rotate(-25deg) scale(0.65);
    }
8% {
opacity: 0.32;
    }
22% {
opacity: 0.26;
    }
40% {
opacity: 0.14;
    }
55% {
opacity: 0;
    }
100% {
opacity: 0;
transform: translate(calc(100vw + 260px), -300px) rotate(-25deg) scale(1);
    }
}
/* COMET 2 */
.comet-02 {
left: -190px;
top: 82%;
transform: rotate(-18deg) scale(0.55);
animation: cometFly02 48s linear infinite;
animation-delay: -20s;
}
@keyframes cometFly02 {
0% {
opacity: 0;
transform: translate(-190px, 130px) rotate(-18deg) scale(0.55);
    }
10% {
opacity: 0.2;
    }
28% {
opacity: 0.16;
    }
48% {
opacity: 0;
    }
100% {
opacity: 0;
transform: translate(calc(100vw + 260px), -250px) rotate(-18deg) scale(0.75);
    }
}
/* ================================================================
   ASTEROIDS — irregular non-round shapes + surface craters
   ================================================================ */
.space-asteroid {
opacity: 0.2;
filter: drop-shadow(0 0 5px rgba(190, 180, 160, 0.18));
}

.space-asteroid .rock-core {
position: absolute;
inset: 0;
background:
  radial-gradient(circle at 38% 32%,
    rgba(195, 185, 165, 0.85) 0%,
    rgba(130, 120, 105, 0.6) 45%,
    rgba(45, 40, 35, 0.95) 100%
  );
box-shadow:
  inset -5px -4px 9px rgba(0, 0, 0, 0.7),
  inset 3px 2px 5px rgba(210, 200, 180, 0.12);
}

.space-asteroid .rock-shine {
position: absolute;
border-radius: 50%;
background: radial-gradient(
  circle at 40% 35%,
  rgba(230, 220, 200, 0.35),
  transparent 70%
);
pointer-events: none;
}

.space-asteroid .rock-crater {
position: absolute;
border-radius: 50%;
background: radial-gradient(
  circle at 40% 35%,
  rgba(25, 22, 18, 0.85),
  rgba(50, 45, 38, 0.45) 55%,
  transparent 100%
);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.55);
pointer-events: none;
}

/* Asteroid 01 — medium irregular */
.asteroid-01 {
width: 21px;
height: 16px;
left: 18%;
top: 75%;
transform: rotate(18deg);
animation: asteroidFloat01 38s linear infinite alternate;
}

.asteroid-01 .rock-core {
clip-path: polygon(
  12% 22%,
  28% 5%,
  58% 0%,
  85% 18%,
  100% 48%,
  88% 82%,
  55% 100%,
  22% 90%,
  0% 58%
);
border: 1px solid rgba(190, 180, 160, 0.3);
}

.asteroid-01 .rock-shine {
width: 8px;
height: 6px;
left: 4px;
top: 3px;
}

.asteroid-01 .rock-crater:nth-child(3) {
width: 5px;
height: 4px;
left: 7px;
top: 5px;
}

.asteroid-01 .rock-crater:nth-child(4) {
width: 3.5px;
height: 3px;
right: 4px;
bottom: 4px;
}

/* Asteroid 02 — smaller, sharper-ish but organic */
.asteroid-02 {
width: 14px;
height: 12px;
left: 61%;
top: 28%;
opacity: 0.16;
animation: asteroidFloat02 52s linear infinite alternate;
}

.asteroid-02 .rock-core {
clip-path: polygon(
  18% 8%,
  55% 0%,
  88% 22%,
  100% 55%,
  72% 100%,
  25% 92%,
  0% 58%,
  5% 28%
);
border: 1px solid rgba(190, 180, 160, 0.28);
}

.asteroid-02 .rock-shine {
width: 5px;
height: 4px;
left: 2px;
top: 2px;
}

.asteroid-02 .rock-crater {
width: 3.5px;
height: 3px;
left: 5px;
top: 4px;
}

/* Asteroid 03 — larger distant irregular chunk */
.asteroid-03 {
width: 27px;
height: 20px;
left: 90%;
top: 54%;
opacity: 0.14;
animation: asteroidFloat03 68s linear infinite alternate;
}

.asteroid-03 .rock-core {
clip-path: polygon(
  8% 25%,
  25% 3%,
  55% 0%,
  82% 15%,
  100% 42%,
  92% 78%,
  60% 100%,
  22% 95%,
  0% 65%,
  2% 38%
);
border: 1px solid rgba(190, 180, 160, 0.25);
}

.asteroid-03 .rock-shine {
width: 10px;
height: 7px;
left: 5px;
top: 3px;
}

.asteroid-03 .rock-crater:nth-child(3) {
width: 6px;
height: 5px;
left: 9px;
top: 6px;
}

.asteroid-03 .rock-crater:nth-child(4) {
width: 4px;
height: 3.5px;
right: 5px;
bottom: 5px;
}

@keyframes asteroidFloat01 {
from {
  transform: translate(0, 0) rotate(18deg);
}
to {
  transform: translate(195px, -90px) rotate(230deg);
}
}

@keyframes asteroidFloat02 {
from {
  transform: translate(0, 0) rotate(0deg);
}
to {
  transform: translate(-135px, 110px) rotate(195deg);
}
}

@keyframes asteroidFloat03 {
from {
  transform: translate(0, 0) rotate(0deg);
}
to {
  transform: translate(-220px, -80px) rotate(255deg);
}
}

/* ================================================================
   MOBILE
   ----------------------------------------------------------------
   Smaller / fainter objects so they don't compete with content.
   ================================================================ */
@media (max-width: 768px) {
.planet-01 {
transform: scale(0.65);
    }
.planet-02 {
transform: scale(0.6);
    }
.ufo-01 {
transform: scale(0.65);
    }
.satellite-01 {
transform: scale(0.65);
    }
.comet-01 {
transform: scale(0.65);
    }
.comet-02 {
transform: scale(0.5);
    }
.space-spark {
font-size: 0.7rem;
    }
.blackhole-01 {
transform: translate(-50%, -50%) scale(0.7);
    }
}
/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
.space-objects *,
.space-objects {
animation: none !important;
    }
.space-star {
opacity: 0.25;
    }
.space-spark {
opacity: 0.2;
    }
.space-ufo,
.space-satellite,
.space-comet,
.space-planet,
.space-asteroid,
.space-blackhole {
opacity: 0.1;
    }
}
/* v59: all decorative planes share one stable coordinate system on touch devices. */
@media(hover:none) and (pointer:coarse){
 html{background-color:var(--terminal-bg,#0a0a0a);color-scheme:dark;overscroll-behavior-y:none}
 body{min-height:100lvh;overscroll-behavior-y:none}
 .space-objects,body::before,body::after,.vignette{
  position:fixed;top:0;right:0;bottom:auto;left:0;
  width:100%;height:var(--scene-height,100lvh);min-height:0;
  transform:translate3d(0,0,0);
 }
}

/* Nightwatch artwork; original terminal typography and CRT styles are preserved. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background-color:#000}
.nightwatch-scene{position:fixed;inset:0;height:100lvh;overflow:hidden;pointer-events:none;z-index:0;isolation:isolate;background:#000}
.nightwatch-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.82}
.nightwatch-mobile{display:none}
.nightwatch-lights{position:absolute;inset:0;width:100%;height:100%}
.nightwatch-beacon{opacity:0;animation:nightwatchBeacon 3.5s linear infinite;animation-delay:-.8s}
@keyframes nightwatchBeacon{0%,15%,100%{opacity:0}19%{opacity:.9}36%{opacity:.9}43%{opacity:0}}
.nightwatch-shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.24) 32%,rgba(0,0,0,.24) 68%,transparent)}
.nightwatch-mist{position:absolute;inset:46% -10% 13%;opacity:.1;filter:blur(20px);background:radial-gradient(ellipse at 14% 70%,#8ca3af55,transparent 46%),radial-gradient(ellipse at 88% 47%,#97a9b140,transparent 37%);animation:nightwatchMist 48s ease-in-out infinite alternate}
.mist-far{inset:38% -8% 25%;opacity:.065;animation-duration:67s;animation-delay:-29s;animation-direction:alternate-reverse}
@keyframes nightwatchMist{from{transform:translateX(-2%) scale(1)}to{transform:translateX(5%) scale(1.04)}}
@media(max-width:768px) and (orientation:portrait){
 .nightwatch-desktop{display:none}.nightwatch-mobile{display:block}
 img.nightwatch-mobile{height:auto;width:100%;object-fit:contain;object-position:center top;opacity:.82}
}
@media(hover:none) and (pointer:coarse){
 .nightwatch-scene{height:var(--scene-height,100lvh)}
 .nightwatch-shade{background:linear-gradient(to bottom,#000 0,rgba(0,0,0,.65) 48px,transparent 140px,transparent calc(100svh - 190px),rgba(0,0,0,.6) calc(100svh - 90px),#000 calc(100svh - 25px))}
 .nightwatch-mist{opacity:.065}.mist-far{opacity:.045}
}
@media(prefers-reduced-motion:reduce){.nightwatch-mist,.nightwatch-beacon{animation:none}.nightwatch-beacon{opacity:.65}}

/* A restrained red halo follows the same flash envelope as the photographic lamp. */
.nightwatch-beacon{filter:drop-shadow(0 0 1.6px rgba(226,43,31,.28))}