/* Small, independent effects. The original globe is deliberately untouched. */
.nebula-effects-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}

.nebula-fx-particle,
.nebula-fx-connection {
  position: absolute;
  display: block;
  pointer-events: none;
}

.nebula-fx-particle {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a1e7b8;
  opacity: .17;
  box-shadow: 0 0 10px #8adaaf42;
  animation: nebula-fx-drift 23s ease-in-out infinite alternate;
}

.nebula-fx-particle:nth-child(1) { left: 3%; top: 19%; animation-delay: -4s; }
.nebula-fx-particle:nth-child(2) { left: 96%; top: 12%; animation-delay: -17s; animation-duration: 28s; }
.nebula-fx-particle:nth-child(3) { left: 8%; top: 77%; animation-delay: -9s; animation-duration: 26s; }
.nebula-fx-particle:nth-child(4) { left: 93%; top: 64%; animation-delay: -21s; }
.nebula-fx-particle:nth-child(5) { left: 19%; top: 94%; animation-delay: -13s; animation-duration: 31s; }
.nebula-fx-particle:nth-child(6) { left: 72%; top: 5%; animation-delay: -6s; animation-duration: 29s; }
.nebula-fx-particle:nth-child(7) { left: 1%; top: 47%; animation-delay: -19s; animation-duration: 34s; }
.nebula-fx-particle:nth-child(8) { left: 99%; top: 89%; animation-delay: -11s; animation-duration: 25s; }

.nebula-fx-connection {
  width: 130px;
  height: 48px;
  border-top: 1px solid #a2dfb918;
  border-right: 1px solid #a2dfb918;
  border-radius: 0 10px 0 0;
  opacity: .55;
}

.nebula-fx-connection::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a7e3bf;
  opacity: .2;
  animation: nebula-fx-signal 8s ease-in-out infinite;
}

.nebula-fx-connection:nth-child(9) { top: 8%; left: -58px; transform: rotate(30deg); }
.nebula-fx-connection:nth-child(10) { top: 47%; right: -62px; transform: rotate(160deg); }
.nebula-fx-connection:nth-child(11) { bottom: 9%; left: -82px; transform: rotate(-20deg); }
.nebula-fx-connection:nth-child(12) { bottom: 4%; right: -88px; transform: rotate(195deg); }
.nebula-fx-connection:nth-child(10)::after { animation-delay: -3s; }
.nebula-fx-connection:nth-child(11)::after { animation-delay: -6s; }
.nebula-fx-connection:nth-child(12)::after { animation-delay: -1s; }

.nebula-effects-active :is(.catalog-service-card,.need-card,.real-work-card,.commercial-plan,.commercial-tech-card,.commercial-project-card,.commercial-owned-grid>article,.commercial-demo-grid>article,.model-card,.ready-model-card,.portal-game-card,.portal-tool-card,.game-card,.tool-card) {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.nebula-effects-active :is(.catalog-service-card,.need-card,.real-work-card,.commercial-plan,.commercial-tech-card,.commercial-project-card,.commercial-owned-grid>article,.commercial-demo-grid>article,.model-card,.ready-model-card,.portal-game-card,.portal-tool-card,.game-card,.tool-card):focus-within {
  border-color: #93cfa6;
  box-shadow: 0 0 0 1px #92d9ad24, 0 9px 28px #00000029;
}

.nebula-effects-active :is(.button,.commercial-button,.service-explore):focus-visible {
  outline: 2px solid #b4f2cd;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .nebula-effects-active :is(.catalog-service-card,.need-card,.real-work-card,.commercial-plan,.commercial-tech-card,.commercial-project-card,.commercial-owned-grid>article,.commercial-demo-grid>article,.model-card,.ready-model-card,.portal-game-card,.portal-tool-card,.game-card,.tool-card):hover {
    border-color: #739e83;
    box-shadow: 0 9px 30px #00000030, 0 0 20px #8fd3a70b;
  }
  .nebula-effects-active :is(.button-light,.commercial-button:not(.is-secondary)):hover {
    box-shadow: 0 0 0 1px #c2f5d433, 0 5px 21px #81e4a226;
  }
}

.nebula-fx-enter { animation: nebula-fx-arrive .44s ease-out both; }
.nebula-fx-enter.nebula-fx-delay-1 { animation-delay: .045s; }
.nebula-fx-enter.nebula-fx-delay-2 { animation-delay: .09s; }
.nebula-fx-enter:focus-within { animation: none; }
.nebula-effects-paused :is(.nebula-fx-particle,.nebula-fx-enter),
.nebula-effects-paused .nebula-fx-connection::after { animation-play-state: paused; }

@keyframes nebula-fx-arrive {
  from { opacity: .78; }
  to { opacity: 1; }
}
@keyframes nebula-fx-drift {
  from { transform: translate3d(0, 0, 0); opacity: .1; }
  to { transform: translate3d(8px, -26px, 0); opacity: .29; }
}
@keyframes nebula-fx-signal {
  0%, 78%, 100% { opacity: .14; }
  87% { opacity: .6; }
}

@media (max-width: 760px) {
  .nebula-fx-particle:nth-child(n+5), .nebula-fx-connection { display: none; }
  .nebula-fx-particle { opacity: .14; animation-duration: 35s; }
}

.nebula-effects-reduced .nebula-effects-backdrop { display: none; }
.nebula-effects-reduced .nebula-fx-enter { animation: none; }
.nebula-effects-reduced :is(.catalog-service-card,.need-card,.real-work-card,.commercial-plan,.commercial-tech-card,.commercial-project-card,.commercial-owned-grid>article,.commercial-demo-grid>article,.model-card,.ready-model-card,.portal-game-card,.portal-tool-card,.game-card,.tool-card) { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .nebula-effects-backdrop { display: none; }
  .nebula-fx-enter { animation: none; }
  .nebula-effects-active :is(.catalog-service-card,.need-card,.real-work-card,.commercial-plan,.commercial-tech-card,.commercial-project-card,.commercial-owned-grid>article,.commercial-demo-grid>article,.model-card,.ready-model-card,.portal-game-card,.portal-tool-card,.game-card,.tool-card) { transition: none; }
}