/* A ball's submerged edge is the source; the simulation supplies its moving origin.
   #water-reaction clips at the liquid surface and floor, while its .beaker-wall
   ancestor supplies the flask silhouette. Keep both clips in the same coordinates. */
.beaker-stage .ball-light-ripple,
.beaker-stage .ball-light-glow {
  --light-tint: color-mix(in srgb, var(--reaction-color, var(--liquid-base, #ba73ff)) 48%, #dffcff);
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* A thin, softly illuminated half-ring expands down and out from the ball.
   Its center sits on the top edge, so no part of the wave travels upward. */
.beaker-stage .ball-light-ripple {
  width: 72px;
  height: 52px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0,
      transparent 72%,
      color-mix(in srgb, var(--light-tint) 74%, transparent) 75%,
      color-mix(in srgb, var(--light-tint) 82%, transparent) 77%,
      transparent 81%),
    radial-gradient(ellipse 50% 100% at 50% 0,
      transparent 61%,
      color-mix(in srgb, var(--light-tint) 18%, transparent) 75%,
      transparent 90%);
  filter: blur(.25px);
}

/* A faint fan of scattered light connects the wave to its source. */
.beaker-stage .ball-light-glow {
  width: 80px;
  height: 64px;
  background:
    radial-gradient(ellipse 48% 96% at 50% 0,
      color-mix(in srgb, var(--light-tint) 43%, transparent) 0%,
      color-mix(in srgb, var(--light-tint) 24%, transparent) 22%,
      color-mix(in srgb, var(--light-tint) 12%, transparent) 49%,
      transparent 88%);
  mask-image: conic-gradient(from 116deg at 50% 0,
    transparent 0deg, #0008 15deg, #000 46deg 82deg, #0008 113deg,
    transparent 128deg 360deg);
  filter: blur(1.2px);
}

@media (prefers-reduced-motion: reduce) {
  .beaker-stage .ball-light-ripple,
  .beaker-stage .ball-light-glow {
    display: none;
    will-change: auto;
  }
}