.aga-space-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.aga-planet-stage {
  position: absolute;
  top: 10px;
  right: 18px;
  width: min(34vw, 440px);
  aspect-ratio: 1086 / 1448;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .24));
}

.aga-static-planet-glow {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  background: transparent;
  opacity: .58;
  transform: translate(-50%, -50%) scale(.96);
  box-shadow:
    0 0 9px 2px var(--aga-glow-core),
    0 0 22px 6px var(--aga-glow-soft),
    0 0 36px 9px var(--aga-glow-faint);
  will-change: transform, opacity, box-shadow;
  animation: agaStaticPlanetHalo 5.8s ease-in-out infinite alternate;
}

/*
  These coordinates line up with the planets that are baked into
  graphics/planet-aga.png. Because the source PNG has an opaque dark
  background, the halo must sit ABOVE the image. The center of each halo is
  transparent, so the actual planet art remains untouched while the light
  blooms around its outside edge.
*/
.aga-static-planet-glow-moon-left {
  left: 7.4%;
  top: 56.9%;
  width: 4.6%;
  --aga-glow-core: rgba(245, 224, 188, .46);
  --aga-glow-soft: rgba(210, 178, 118, .28);
  --aga-glow-faint: rgba(210, 178, 118, .12);
  animation-duration: 6.4s;
  animation-delay: -2.1s;
}

.aga-static-planet-glow-gold-left {
  left: 8.6%;
  top: 63.8%;
  width: 6.0%;
  --aga-glow-core: rgba(255, 221, 111, .58);
  --aga-glow-soft: rgba(218, 166, 48, .34);
  --aga-glow-faint: rgba(218, 166, 48, .15);
  animation-duration: 5.3s;
  animation-delay: -4.0s;
}

.aga-static-planet-glow-green-left {
  left: 21.6%;
  top: 72.0%;
  width: 7.5%;
  --aga-glow-core: rgba(117, 231, 170, .52);
  --aga-glow-soft: rgba(50, 174, 112, .31);
  --aga-glow-faint: rgba(50, 174, 112, .14);
  animation-duration: 6.9s;
  animation-delay: -1.4s;
}

.aga-static-planet-glow-striped {
  left: 68.8%;
  top: 70.7%;
  width: 5.4%;
  --aga-glow-core: rgba(255, 223, 119, .48);
  --aga-glow-soft: rgba(73, 185, 125, .27);
  --aga-glow-faint: rgba(73, 185, 125, .12);
  animation-duration: 5.7s;
  animation-delay: -3.2s;
}

.aga-static-planet-glow-gold-right {
  left: 83.1%;
  top: 67.4%;
  width: 6.5%;
  --aga-glow-core: rgba(255, 224, 122, .62);
  --aga-glow-soft: rgba(225, 166, 43, .36);
  --aga-glow-faint: rgba(225, 166, 43, .15);
  animation-duration: 6.1s;
  animation-delay: -2.7s;
}

.aga-static-planet-glow-ringed-right {
  left: 91.8%;
  top: 45.7%;
  width: 5.8%;
  --aga-glow-core: rgba(132, 239, 190, .62);
  --aga-glow-soft: rgba(48, 177, 116, .35);
  --aga-glow-faint: rgba(48, 177, 116, .15);
  animation-duration: 5.1s;
  animation-delay: -1.0s;
}

@keyframes agaStaticPlanetHalo {
  0% {
    transform:
      translate(-50%, -50%)
      translate3d(-1px, 1px, 0)
      scale(.92);
    opacity: .38;
    box-shadow:
      0 0 7px 1px var(--aga-glow-core),
      0 0 17px 4px var(--aga-glow-soft),
      0 0 28px 7px var(--aga-glow-faint);
  }

  52% {
    transform:
      translate(-50%, -50%)
      translate3d(2px, -1px, 0)
      scale(1.06);
    opacity: .78;
    box-shadow:
      0 0 11px 3px var(--aga-glow-core),
      0 0 27px 8px var(--aga-glow-soft),
      0 0 44px 12px var(--aga-glow-faint);
  }

  100% {
    transform:
      translate(-50%, -50%)
      translate3d(-2px, -1px, 0)
      scale(1.00);
    opacity: .54;
    box-shadow:
      0 0 8px 2px var(--aga-glow-core),
      0 0 21px 6px var(--aga-glow-soft),
      0 0 34px 9px var(--aga-glow-faint);
  }
}

.aga-planet-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Waterfall-only motion. The river remains untouched. */
.aga-waterfall-motion {
  position: absolute;
  left: 42.2%;
  top: 53.2%;
  width: 14.8%;
  height: 22.5%;
  z-index: 4;
  overflow: hidden;
  opacity: .34;
  mix-blend-mode: screen;
  clip-path: polygon(
    23% 0%,
    81% 0%,
    76% 14%,
    82% 28%,
    72% 42%,
    77% 57%,
    65% 72%,
    69% 88%,
    58% 100%,
    31% 100%,
    37% 88%,
    27% 72%,
    34% 56%,
    24% 39%,
    30% 22%
  );
}

.aga-waterfall-motion::before,
.aga-waterfall-motion::after {
  content: "";
  position: absolute;
  inset: -35% 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0 8px,
      rgba(231, 251, 255, .42) 9px 12px,
      rgba(255, 255, 255, .05) 13px 19px,
      rgba(181, 232, 241, .34) 20px 24px
    );
  filter: blur(.7px);
  animation: agaWaterfallFlow 2.7s linear infinite;
}

.aga-waterfall-motion::after {
  opacity: .48;
  transform: translateX(7%);
  animation-duration: 3.6s;
  animation-direction: reverse;
}

@keyframes agaWaterfallFlow {
  from {
    transform: translateY(-18%);
  }

  to {
    transform: translateY(18%);
  }
}

.aga-waterfall-mist {
  position: absolute;
  left: 39.7%;
  top: 73.4%;
  width: 20%;
  height: 8%;
  z-index: 5;
  opacity: .42;
  filter: blur(5px);
  background:
    radial-gradient(circle at 24% 59%, rgba(255,255,255,.52) 0 14%, transparent 38%),
    radial-gradient(circle at 49% 48%, rgba(255,255,255,.48) 0 18%, transparent 42%),
    radial-gradient(circle at 72% 56%, rgba(255,255,255,.40) 0 16%, transparent 39%);
  animation: agaWaterfallMist 6.5s ease-in-out infinite alternate;
}

@keyframes agaWaterfallMist {
  from {
    transform: translate3d(-3px, 1px, 0) scale(.97);
    opacity: .28;
  }

  to {
    transform: translate3d(5px, -2px, 0) scale(1.04);
    opacity: .47;
  }
}

/* Slow cloud overlays. */
.aga-cloud-motion {
  position: absolute;
  z-index: 5;
  opacity: .24;
  filter: blur(4px);
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 30% 58%, rgba(255,255,255,.76) 0 22%, transparent 45%),
    radial-gradient(circle at 54% 43%, rgba(255,255,255,.72) 0 26%, transparent 49%),
    radial-gradient(circle at 76% 60%, rgba(255,255,255,.66) 0 21%, transparent 43%);
}

.aga-cloud-motion-1 {
  left: 18.8%;
  top: 40.7%;
  width: 17%;
  height: 7.5%;
  animation: agaCloudDriftOne 26s ease-in-out infinite alternate;
}

.aga-cloud-motion-2 {
  right: 18.4%;
  top: 31.6%;
  width: 14.5%;
  height: 6.7%;
  animation: agaCloudDriftTwo 29s ease-in-out infinite alternate;
}

.aga-cloud-motion-3 {
  left: 34.5%;
  top: 72%;
  width: 19%;
  height: 7.5%;
  opacity: .18;
  animation: agaCloudDriftThree 24s ease-in-out infinite alternate;
}

@keyframes agaCloudDriftOne {
  from {
    transform: translate3d(-5px, 1px, 0);
  }

  to {
    transform: translate3d(9px, -4px, 0);
  }
}

@keyframes agaCloudDriftTwo {
  from {
    transform: translate3d(6px, -2px, 0);
  }

  to {
    transform: translate3d(-8px, 4px, 0);
  }
}

@keyframes agaCloudDriftThree {
  from {
    transform: translate3d(-4px, 2px, 0);
  }

  to {
    transform: translate3d(7px, -3px, 0);
  }
}

/* Orbiting planets. JS positions these on the measured outer gold ring. */
.aga-orbiter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset -7px -7px 12px rgba(0,0,0,.24),
    0 0 10px rgba(224,177,58,.22);
  will-change: left, top, transform, opacity;
}

.aga-orbiter::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 27%,
      rgba(255,255,255,.28),
      transparent 30%
    );
}

.aga-orbiter-gold {
  background:
    radial-gradient(
      circle at 32% 28%,
      #ffe8aa 0 12%,
      #d6a535 40%,
      #855611 76%,
      #472b07 100%
    );
}

.aga-orbiter-green {
  background:
    radial-gradient(
      circle at 32% 28%,
      #5a9d75 0 12%,
      #1c5b3c 42%,
      #0b3321 77%,
      #061a11 100%
    );
}

.aga-orbiter-moon {
  background:
    radial-gradient(circle at 30% 30%, rgba(80,61,39,.38) 0 8%, transparent 9%),
    radial-gradient(circle at 67% 58%, rgba(65,49,31,.34) 0 10%, transparent 11%),
    radial-gradient(circle at 42% 72%, rgba(90,68,43,.30) 0 7%, transparent 8%),
    radial-gradient(
      circle at 32% 28%,
      #e8d8b6 0 8%,
      #b69e7a 43%,
      #775f46 78%,
      #493727 100%
    );
}

.aga-bus-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/*
  Bus wrapper contains two stacked PNGs:
  - graphics/aga-bus.png = takeoff / approach view
  - graphics/aga-bus2.png = rear / descent view

  JS crossfades the two views during final approach.
*/
.aga-flying-bus {
  position: absolute;
  left: 0;
  top: 0;
  width: 238px;
  height: auto;
  aspect-ratio: 1672 / 941;
  z-index: 7;
  opacity: 0;
  transform-origin: center center;
  will-change: left, top, transform, opacity;
}

.aga-flying-bus-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity, transform;
  filter:
    drop-shadow(0 13px 18px rgba(0,0,0,.28))
    drop-shadow(0 0 7px rgba(210,161,51,.18));
}

.aga-flying-bus-img-primary {
  opacity: 1;
}

.aga-flying-bus-img-descent {
  opacity: 0;
}

/*
  The descent image may have a slightly different visual crop,
  so a tiny scale nudge keeps the crossfade from looking like a size jump.
*/
.aga-flying-bus-img-descent {
  transform: scale(.985);
}

@media (max-width: 1180px) {
  .aga-planet-stage {
    width: 340px;
    right: 10px;
    top: 14px;
  }

  .aga-flying-bus {
    width: 202px;
  }
}

@media (max-width: 900px) {
  .aga-planet-stage {
    width: 275px;
    right: 6px;
    top: 18px;
    opacity: .82;
  }

  .aga-flying-bus {
    width: 164px;
  }
}

@media (max-width: 720px) {
  .aga-planet-stage,
  .aga-bus-particles,
  .aga-flying-bus,
  .aga-orbiter {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aga-waterfall-motion,
  .aga-waterfall-mist,
  .aga-cloud-motion {
    animation: none !important;
  }

  .aga-flying-bus,
  .aga-bus-particles,
  .aga-orbiter {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aga-static-planet-glow {
    animation: none !important;
    opacity: .46;
    transform: translate(-50%, -50%) scale(1);
  }
}