/* "If I had a black hole in the lab": the comic in the middle, questions
   popping up around it as speech bubbles (lab.js), then the ones ringdown
   can answer light up. */

#lab .lab-comic {
  position: absolute;
  left: 50%;
  top: 170px;
  width: 476px;
  margin-left: -238px;
}

#lab .lab-comic img { width: 100%; max-height: none; }

#lab .lab-comic .cite { font-size: 22px; }

/* a speech bubble. The two colours are variables so the tail (an svg that
   lab.js draws inside each bubble) can follow them when the bubble lights up */
.bubble {
  --line: var(--ink);
  --fill: var(--panel);
  position: absolute;
  z-index: 2;
  padding: 20px 38px 24px;
  border: 3px solid var(--line);
  border-radius: 44px;
  background: var(--fill);
  font-size: 36px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;

  opacity: 0;
  transform: scale(0.15);
  transition: opacity 0.2s ease,
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.6s, background-color 0.6s, color 0.6s;
}

.bubble.on {
  opacity: 1;
  transform: none;
}

.bubble-tail {
  position: absolute;
  left: -3px;           /* the svg is laid out from the padding box; the maths uses the border box */
  top: -3px;
  overflow: visible;
  pointer-events: none;
}

.bubble-tail path {
  fill: var(--fill);
  stroke: var(--line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill 0.6s, stroke 0.6s;
}

/* ----- the verdict --------------------------------------------------
   yes: inked and washed.  partly: inked only.  no: fades back. */

#lab.judged .bubble[data-a] {
  --line: var(--accent);
  transform: scale(1.06);
}

#lab.judged .bubble[data-a="yes"] {
  --fill: var(--accent-wash);
}

#lab.judged .bubble:not([data-a]) {
  opacity: 0.25;
  transition: opacity 0.8s ease;
}

#lab.instant .bubble { transition: none; }

@media print {
  .bubble { opacity: 1; transform: none; }
}