.hero-signal {
  transform-origin: center;
  transition: right 240ms ease, width 240ms ease, opacity 240ms ease;
}

/* Keep the motion field visually connected to the copy on wide monitors. */
@media (min-width: 1441px) {
  .hero-signal {
    right: clamp(
      5.5vw,
      calc(27.5vw - 316.8px),
      20vw
    );
    width: clamp(720px, 42vw, 860px);
  }
}

/* Preserve breathing room between the copy and motion on compact desktops. */
@media (min-width: 801px) and (max-width: 1100px) {
  .hero-signal {
    right: -3vw;
    width: 58vw;
    opacity: 0.7;
  }
}

/* On phones the graphic becomes an atmospheric layer behind the hero. */
@media (max-width: 800px) {
  .hero-signal {
    right: -24vw;
    top: 48%;
    width: 116vw;
    opacity: 0.42;
    transform: translateY(-38%);
  }
}

@media (max-width: 430px) {
  .hero-signal {
    right: -28vw;
    width: 122vw;
  }
}