#twinkling-stars {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
}

.twinkling-star.twinkle {
  animation: twinkle 10s infinite;
}

.twinkling-star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

#satellite-hero {
  height: calc(100vh - 70px);
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 600px;
}



.hero-bio {
  text-align: center;
  color: var(--global-text-color);
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.scene {
  perspective: 1500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.scroll-arrow {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: bounce 2s infinite;
}

.satellite {
  width: 900px;
  height: 120px;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: hover 20s infinite ease-in-out;
  transform: rotateX(60deg) rotateZ(-10deg) translateY(-10%);
}

.body {
  transform-style: preserve-3d;
  position: absolute;
  width: 80px;
  height: 120px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.body-box {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(-10px);
}

.body-face {
  position: absolute;
  background-color: #1f2123;
  border: 1px solid #444;
}

.body-front, .body-back { width: 80px; height: 120px; }
.body-top, .body-bottom { width: 80px; height: 20px; }

.body-front {
  transform: translateZ(10px);
  background-image:
    repeating-linear-gradient(0deg, #444, #444 1px, transparent 1px, transparent 39px),
    repeating-linear-gradient(90deg, #444, #444 1px, transparent 1px, transparent 39px);
}
.body-back { transform: rotateY(180deg) translateZ(10px); }
.body-top { transform: rotateX(90deg) translateZ(10px); }
.body-bottom { transform: rotateX(-90deg) translateZ(110px); }

.solar-panel {
  width: 340px;
  height: 120px;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
}

.solar-panel .face {
  position: absolute;
  background-color: #283542; /* Solar panel color */
}

.solar-panel .front, .solar-panel .back {
  width: 340px;
  height: 120px;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, #1c2630 19px, #1c2630 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, #1c2630 19px, #1c2630 20px);
  overflow: hidden;
}

.solar-panel .front  { transform: translateZ(2px); }
.solar-panel .back   { transform: rotateY(180deg) translateZ(2px); }
.solar-panel .top    { transform: rotateX(90deg) translateZ(2px); height: 4px; width: 340px; background-color: #2a3a4a; }
.solar-panel .bottom { transform: rotateX(-90deg) translateZ(118px); height: 4px; width: 340px; background-color: #2a3a4a; }


.solar-panel .front::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: spectral-highlight 5s infinite linear;
}

@keyframes spectral-highlight {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

.panel-1 {
  left: 0;
}

.panel-2 {
  right: 0;
}

.prong {
  position: absolute;
  width: 70px;
  height: 4px;
  background-color: #e2e2e2; /* Shiny highlight color */
}

.prong-1, .prong-3 {
  left: 340px;
}
.prong-2, .prong-4 {
  right: 340px;
}
.prong-1, .prong-2 {
    top: 50px;
}
.prong-3, .prong-4 {
    top: 70px;
}

.phased-array {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: radial-gradient(circle at 50% 30%, #fff 0%, #e2e2e2 50%, #ccc 100%);
    border-radius: 50%;
}

.array-1, .array-3 {
    left: 370px;
}
.array-2, .array-4 {
    right: 370px;
}
.array-1, .array-2 {
    top: 10px;
}
.array-3, .array-4 {
    top: 80px;
}

.phased-prong {
  position: absolute;
  width: 10px;
  height: 4px;
  background-color: #e2e2e2; /* Shiny highlight color */
  top: 50%;
  transform: translateY(-50%);
}

.pp-1, .pp-3 {
  left: 400px;
}

.pp-2, .pp-4 {
  right: 400px;
}

.pp-1, .pp-2 {
  top: 25px;
}

.pp-3, .pp-4 {
  top: 95px;
}

@media (max-width: 768px) {
  .scene {
    perspective: 1000px;
  }
  .satellite-wrapper {
    transform: scale(0.4);
  }
  .hero-title {
    max-width: 90%;
  }
  .hero-title h1 {
    font-size: 1.5rem;
  }
  .hero-bio p {
    font-size: 1rem;
  }
}

.hero-title, .hero-bio {
  animation: intro 0.3s both;
  animation-delay: 0.35s;
}

@keyframes intro {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scroll-arrow {
  width: 20px;
  height: 20px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 2px 2px 0;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.5;
  }
  50% {
    transform: translateY(10px) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.5;
  }
}

@keyframes hover {
  0% {
    transform: rotateX(50deg) rotateZ(-10deg) translateY(0px);
  }
  50% {
    transform: rotateX(70deg) rotateZ(10deg) translateY(20px);
  }
  100% {
    transform: rotateX(50deg) rotateZ(-10deg) translateY(0px);
  }
}