/* The big SVG with Jupiter + orbiting particles */

.background-orbit{
  width: 100%;
  height: 150dvw;
  display: block;
  position: absolute;
  top: 0;
  z-index: -1;
}

/* Visor */

#visor,
#visor_glow{
  position: absolute;
  top: 0px;
  padding-top: 68.1%;
  left: 34.4%;
  width: 18.2%;
  z-index: 10000;
}

#visor_glow{
  transition: opacity 1s ease-in-out;
  animation: fade1 5s infinite ease-in-out alternate;
  opacity: 0;
  z-index: 10001;
}

@keyframes fade1{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Glow labels */

.neon{
  font-size: 3dvw;
  font-weight: bold;
  color: #fff;
  animation: pulse 5s ease-in-out infinite alternate;
}

.neon-label{
  position: absolute;
}

.neon-top{
  top: 75dvw;
  left: 54dvw;
}

.neon-ups{
  top: 78dvw;
  left: 57dvw;
}

/* Infographic callout */

.orbit-infographic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150dvw;
  z-index: 12000;
  pointer-events: none;
}

.orbit-infographic-copy {
  position: absolute;
  top: 54dvw;
  left: 8dvw;
  width: 28dvw;
  min-height: 9.5dvw;
  color: #fff;
  font-size: min(1.65rem, 1.55dvw);
  line-height: 1.35;
  font-weight: 650;
  white-space: pre-line;
  text-shadow:
    0 0 0.6dvw rgba(255, 199, 71, 0.55),
    0 0 1.6dvw rgba(0, 0, 0, 0.95),
    0 0.18dvw 0.5dvw rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(0.9dvw);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
  pointer-events: none;
}

.orbit-infographic-copy.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.orbit-infographic-copy-link {
  display: inline-block;
  margin-top: 0.3em;
  pointer-events: auto;
}

.orbit-disbursement-status[hidden] {
  display: none;
}

.metric-rail:not(.metric-rail--visible) ~ .orbit-disbursement-status {
  display: none;
}

.orbit-disbursement-status {
  position: absolute;
  top: 22dvw;
  left: 6.5dvw;
  z-index: 12100;
  width: min(23dvw, 16rem);
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  text-wrap: pretty;
  pointer-events: auto;
}

.orbit-disbursement-status::before {
  content: "";
  float: right;
  width: min(8.7dvw, 7.35rem);
  height: 8.2em;
  shape-outside: polygon(150% 0, 100% 100%, 0 100%);
  -webkit-shape-outside: polygon(150% 0, 100% 100%, 0 100%);
  shape-margin: 0.35rem;
}

.orbit-disbursement-status .orbit-infographic-copy-link {
  margin-top: 0.2em;
  color: inherit;
}

.orbit-disbursement-status .orbit-infographic-copy-link:hover,
.orbit-disbursement-status .orbit-infographic-copy-link:focus {
  color: #fff;
}

.orbit-infographic-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#orbit-infographic-line {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.75));
}

#orbit-infographic-marker {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1.4;
  opacity: 0;
  filter: drop-shadow(0 0 11px rgba(255, 255, 255, 0.82));
}

.orbit-infographic-hotspot,
.orbit-infographic-particle-hotspot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1;
  cursor: crosshair;
  pointer-events: all;
}

.orbit-infographic-hotspot:hover,
.orbit-infographic-hotspot:focus,
.orbit-infographic-particle-hotspot:hover,
.orbit-infographic-particle-hotspot:focus {
  fill: transparent;
  stroke: transparent;
  outline: none;
}

@media (max-width: 1024px) {
  /* Hide certain elements on mobile */
  #visor, #visor_glow, .neon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-infographic-copy {
    transition: none;
  }
}

@keyframes pulse{
  0% {
    opacity: .3;
    text-shadow:
      0 0 40px #ff0,
      0 0 80px #ff0,
      0 0 90px #ff0,
      0 0 100px #ff0,
      0 0 150px #ff0;
    filter: saturate(.9);
  }
  100% {
    opacity: .85;
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #ff0,
      0 0 80px #ff0,
      0 0 90px #ff0,
      0 0 100px #ff0,
      0 0 150px #ff0;
    filter: saturate(1.2);
  }
}