/* A decorative layer: it never takes focus or intercepts a link or text selection. */
.hero { position: relative; isolation: isolate; }
.hero > :not(.hero-atmosphere) { position: relative; z-index: 1; }
.hero .hero-atmosphere {
  position: absolute; inset: 0 -20px 0 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(to right, transparent 35%, #000 65%), linear-gradient(#000 75%, transparent);
  mask-composite: intersect;
}
.atmosphere-object {
  position: absolute; transform: translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0);
}
.atmosphere-object > i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.atmosphere-orbit { width: clamp(270px, 31vw, 440px); aspect-ratio: 1; right: 5%; top: 2%; }
.atmosphere-orbit > i {
  border: 1px solid var(--accent); opacity: var(--presence, .22);
  filter: blur(var(--softness, 2.5px));
}
.atmosphere-cloud { width: clamp(170px, 19vw, 260px); aspect-ratio: 1; right: 8%; top: 7%; }
.atmosphere-cloud > i {
  background: radial-gradient(circle at 36% 32%, #b9f1f5 0%, var(--cyan) 58%, #99d4eb 100%);
  opacity: var(--presence, .24); filter: blur(var(--softness, 26px));
}
.atmosphere-satellite { width: 52px; aspect-ratio: 1; left: 60%; top: 34%; }
.atmosphere-satellite > i {
  background: var(--accent); opacity: var(--presence, .2);
  filter: blur(var(--softness, 7px));
}
/* One quiet settling motion, then rest. No perpetual animation behind reading. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .hero-atmosphere { animation: atmosphere-arrive 4.5s ease-out both; }
  @keyframes atmosphere-arrive { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 760px) {
  .hero .hero-atmosphere { inset: 0; mask-image: linear-gradient(#000, transparent 66%); mask-composite: add; }
  .atmosphere-orbit { left: auto; right: 12px; top: 1%; width: min(280px, 85%); }
  .atmosphere-cloud { left: auto; right: 28px; top: 4%; width: 160px; }
  .atmosphere-cloud > i { opacity: .16; }
  .atmosphere-satellite { left: 38%; top: 25%; width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere { animation: none; }
  .atmosphere-object { transform: none; }
}
@media (forced-colors: active), print { .hero .hero-atmosphere { display: none; } }