:root {
  --vam-earth-backdrop:
    radial-gradient(circle at 82% 18%, rgba(47, 151, 205, 0.2), transparent 28%),
    radial-gradient(circle at 24% 34%, rgba(17, 68, 108, 0.16), transparent 34%),
    linear-gradient(118deg, #01050a 0%, #061624 48%, #02080e 100%);
}

html,
body {
  background-color: #020812;
}

.page.vam-earth-restored,
.portal-page.vam-earth-restored {
  isolation: isolate;
}

.page.vam-earth-restored > .vam-space-backdrop,
.portal-page.vam-earth-restored > .vam-space-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(42, 126, 185, 0.13), transparent 31%),
    radial-gradient(ellipse at 24% 72%, rgba(18, 61, 104, 0.11), transparent 38%),
    linear-gradient(118deg, #01050a 0%, #041321 49%, #02070d 100%);
}

.page.vam-earth-restored > .vam-space-backdrop::before,
.portal-page.vam-earth-restored > .vam-space-backdrop::before {
  content: "";
  position: absolute;
  inset: -5%;
  background-image:
    radial-gradient(circle, rgba(237, 248, 255, 0.82) 0 0.7px, transparent 1.05px),
    radial-gradient(circle, rgba(126, 191, 235, 0.58) 0 0.6px, transparent 1px),
    radial-gradient(circle, rgba(255, 249, 226, 0.7) 0 0.85px, transparent 1.2px);
  background-position: 17px 29px, 83px 61px, 149px 107px;
  background-size: 173px 149px, 263px 211px, 431px 307px;
  opacity: 0.54;
  transform: rotate(-1.5deg) scale(1.04);
}

.page.vam-earth-restored > .vam-space-backdrop::after,
.portal-page.vam-earth-restored > .vam-space-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 68% 42%, rgba(65, 128, 174, 0.075), transparent 30%),
    linear-gradient(112deg, transparent 48%, rgba(87, 137, 168, 0.035) 57%, transparent 68%);
  mix-blend-mode: screen;
}

.page.vam-earth-restored > .earth-canvas,
.portal-page.vam-earth-restored > .earth-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block !important;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition:
    opacity 700ms ease,
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page.vam-earth-restored.earth-ready:not(.webgl-fallback) > .earth-canvas,
.portal-page.vam-earth-restored.earth-ready:not(.webgl-fallback) > .earth-canvas {
  opacity: 1;
}

.page.vam-earth-restored > .earth-fallback,
.portal-page.vam-earth-restored > .earth-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block !important;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  background-color: #020812;
  background-image: url("/assets/earth-horizon.webp");
  background-repeat: no-repeat;
  background-position: var(--orbit-earth-x, 76%) var(--orbit-earth-y, 68%);
  background-size: cover;
  filter: saturate(0.88) contrast(1.1);
  opacity: 0.72;
  transform: translate3d(var(--orbit-earth-dx, 0), var(--orbit-earth-dy, 0), 0)
    scale(var(--orbit-earth-scale, 1));
  transform-origin: center bottom;
  transition:
    opacity 650ms ease,
    transform 1150ms cubic-bezier(0.16, 1, 0.3, 1),
    background-position 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page.vam-earth-restored.earth-ready:not(.webgl-fallback) > .earth-fallback,
.portal-page.vam-earth-restored.earth-ready:not(.webgl-fallback) > .earth-fallback {
  opacity: 0;
}

.page.vam-earth-restored.webgl-fallback > .earth-canvas,
.portal-page.vam-earth-restored.webgl-fallback > .earth-canvas {
  display: none !important;
}

.page.vam-earth-restored > header,
.page.vam-earth-restored > main,
.portal-page.vam-earth-restored > header,
.portal-page.vam-earth-restored > main {
  position: relative;
  z-index: 2;
}

.landing-page.vam-earth-restored {
  background: #020812 !important;
}

.landing-page.vam-earth-restored > .earth-canvas,
.landing-page.vam-earth-restored > .earth-fallback,
.landing-page.vam-earth-restored > .vam-space-backdrop {
  position: absolute;
  height: min(980px, 100dvh);
}

.landing-page.vam-earth-restored .hero {
  background: transparent !important;
}

.landing-page.vam-earth-restored .hero-airspace {
  cursor: default !important;
}

.landing-page.vam-earth-restored .hero-airspace::before,
.landing-page.vam-earth-restored .hero-airspace::after,
.site-aircraft-layer {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .page.vam-earth-restored > .vam-space-backdrop::before,
  .portal-page.vam-earth-restored > .vam-space-backdrop::before {
    animation: vam-star-drift 90s linear infinite alternate;
  }

  html.orbit-earth-travelling .earth-canvas {
    filter: saturate(1.06) brightness(0.98);
  }
}

@keyframes vam-star-drift {
  from { transform: rotate(-1.5deg) translate3d(-0.35%, -0.2%, 0) scale(1.04); }
  to { transform: rotate(-1.5deg) translate3d(0.35%, 0.2%, 0) scale(1.04); }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .page.vam-earth-restored > .earth-fallback,
  .portal-page.vam-earth-restored > .earth-fallback {
    background-image: url("/assets/earth-horizon-mobile.webp");
  }
}