/* The supplied x/y is the aperture centre, not the SVG bounding-box centre. */
#stage .horn.source-port,
.horn.source-port {
  --source-port-x: 88px;
  --source-port-y: 158px;
  --source-port-size: 200px;
  position: absolute;
  left: calc(var(--source-port-x) - var(--source-port-size) * .55);
  top: calc(var(--source-port-y) - var(--source-port-size) * .7);
  width: calc(var(--source-port-size) * 1.1);
  height: calc(var(--source-port-size) * 1.4);
  /* No stacking context here: rear z1, host canvas z2, front rim z4. */
  z-index: auto;
  transform: none;
  filter: none;
  pointer-events: none;
  overflow: visible;
}

.source-port-shell,
.source-port-front,
.horn.source-port .source-port-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.source-port-shell,
.source-port-front { position: absolute; inset: 0; pointer-events: none; }
.source-port-shell { z-index: 1; }
.source-port-front { z-index: 4; }

.source-port-response { opacity: 0; }
.source-port-lamp { opacity: .78; }

.source-port[data-port-pulse="true"] .source-port-response {
  animation: source-port-soft-response 250ms ease-out 1;
}

.source-port[data-port-pulse="true"] .source-port-lamp {
  animation: source-port-lamp-response 250ms ease-out 1;
}

@keyframes source-port-soft-response {
  0% { opacity: 0; }
  32% { opacity: .43; }
  100% { opacity: 0; }
}

@keyframes source-port-lamp-response {
  0%, 100% { opacity: .78; }
  32% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .source-port .source-port-response,
  .source-port .source-port-lamp { animation: none !important; }
}