.portal-ams .nx-ams-branding {
  position: absolute;
  z-index: 2;
  top: max(88px, 11%);
  left: 10%;
  width: 40%;
  height: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.portal-ams .nx-ams-branding .nx-hero-mark {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1;
  object-fit: contain;
  margin: 0;
}

.nx-ams-constellation {
  display: block;
  width: min(270px, 70%);
  height: clamp(45px, 7vh, 66px);
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 0 7px #58dfff70);
}

.nx-ams-connections {
  fill: none;
  stroke: #8ceeff;
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: ams-connect 1.8s ease-out both;
}

.nx-ams-points circle {
  fill: #e1fcff;
  transform-box: fill-box;
  transform-origin: center;
  animation: ams-assemble 1.4s cubic-bezier(.18, .75, .25, 1) both;
  animation-delay: var(--ams-delay, 0s);
}

@keyframes ams-connect {
  from { stroke-dashoffset: 1; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: .65; }
}

@keyframes ams-assemble {
  from { transform: translate(var(--ams-x), var(--ams-y)) scale(.35); opacity: .15; }
  to { transform: translate(0, 0) scale(1); opacity: 1; }
}

.portal-ams:has(#login-motion[aria-pressed="true"]) .nx-ams-constellation * {
  animation-play-state: paused;
}

@media (max-width: 1050px) and (min-width: 761px) {
  .portal-ams .nx-ams-branding { left: 6%; width: 42%; }
}

@media (max-width: 760px) {
  .portal-ams .nx-ams-branding {
    position: relative;
    top: auto;
    left: auto;
    width: min(88%, 360px);
    height: auto;
    margin: 84px auto 0;
    gap: 10px;
  }
  .portal-ams .nx-ams-branding .nx-hero-mark { flex: none; height: 150px; }
  .nx-ams-constellation { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-ams-constellation * { animation: none !important; }
  .nx-ams-connections { stroke-dashoffset: 0; opacity: .65; }
}