/* Two quiet celestial neighbors frame the current chapter from behind its text. */
.orbit-neighbor-planets {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.orbit-neighbor {
  position: absolute;
  width: clamp(130px, 18vw, 270px);
  pointer-events: none;
  animation: orbit-neighbor-float 13s ease-in-out -4s infinite alternate;
}

.orbit-neighbor[hidden] { display: none; }
.orbit-neighbor-previous { left: 9%; top: 19%; animation-delay: -9s; }
.orbit-neighbor-next { right: 1%; bottom: 10%; }
.orbit-neighbor-ringed { width: clamp(190px, 25vw, 380px); }

.orbit-neighbor img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .32;
  filter: saturate(.72) brightness(.82);
}

.orbit-neighbor img[data-reveal="0"] {
  animation: orbit-neighbor-reveal-a .55s ease-out both;
}
.orbit-neighbor img[data-reveal="1"] {
  animation: orbit-neighbor-reveal-b .55s ease-out both;
}

@keyframes orbit-neighbor-float {
  from { translate: -8px 10px; rotate: -4deg; }
  to { translate: 9px -12px; rotate: 3deg; }
}
@keyframes orbit-neighbor-reveal-a {
  from { opacity: 0; }
  to { opacity: .32; }
}
@keyframes orbit-neighbor-reveal-b {
  from { opacity: 0; }
  to { opacity: .32; }
}

#portfolio.page-hidden .orbit-neighbor,
#portfolio.page-hidden .orbit-neighbor img { animation-play-state: paused; }
#portfolio.intro-pending .orbit-neighbor-planets { visibility: hidden; }

@media (max-width: 700px) {
  .orbit-neighbor { width: clamp(110px, 29vw, 160px); }
  .orbit-neighbor-previous { left: -9%; top: 19%; }
  .orbit-neighbor-next { right: -8%; bottom: 15%; }
  .orbit-neighbor-ringed { width: clamp(170px, 43vw, 230px); }
  .orbit-neighbor img { filter: saturate(.6) brightness(.64); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-neighbor,
  .orbit-neighbor img[data-reveal] {
    animation: none;
    translate: none;
    rotate: none;
  }
}