.aletheia-earth {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aletheia-earth__planet {
  position: absolute;
  width: min(900px, 93vw);
  aspect-ratio: 1;
  right: -10%;
  top: 59%;
  transform: translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 5px -3px 22px 5px rgba(94, 144, 241, 0.45);
}

.aletheia-earth__night, .aletheia-earth__day, .aletheia-earth__clouds, .aletheia-earth__shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.aletheia-earth__night {
  z-index: 1;
  background-image: url("../../assets/img/2k_earth_nightmap.jpg");
  background-size: 200% 100%;
  animation: aletheia-rotate-night 180s linear infinite;
}

.aletheia-earth__day {
  z-index: 2;
  margin-left: 15%;
  background-image: url("../../assets/img/2k_earth_daymap.jpg");
  background-size: 200% 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 8px 0 28px 14px rgba(4, 6, 21, 0.95) inset;
  animation: aletheia-rotate-day 180s linear infinite;
}

.aletheia-earth__clouds {
  z-index: 3;
  margin-left: 13%;
  background-image: url("../../assets/img/2k_earth_clouds.jpg");
  background-size: 200% 100%;
  opacity: 0.42;
  box-shadow: 8px 0 28px 14px rgba(4, 6, 21, 0.85) inset, -10px 0 24px 12px rgba(94, 144, 241, 0.45) inset;
  animation: aletheia-rotate-day 135s linear infinite, aletheia-cloud-drift 220s ease-in-out infinite;
}

.aletheia-earth__shadow {
  z-index: 4;
  background: transparent;
  box-shadow: -10px 0 18px 4px rgba(21, 43, 87, 0.8) inset, 14px 0 24px 8px rgba(4, 6, 21, 0.95) inset;
}

@keyframes aletheia-rotate-day {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -80% 0;
  }
}

@keyframes aletheia-rotate-night {
  from {
    background-position: calc(120% + 120px) 0;
  }
  to {
    background-position: calc(-80% + 120px) 0;
  }
}

@keyframes aletheia-cloud-drift {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(12deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.hero-aletheia {
  position: relative;
  background-color: #020712;
}

.hero-aletheia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 5, 15, 0.28);
  pointer-events: none;
  z-index: 0;
}