/* The light a caught dragonfly releases (LightWave in level_controller.js): from the catch
   point, a hot core, a soft flash, then a luminous ring and its echo sweep across the whole
   screen. Each part is a fixed-size radial gradient the compositor only scales and fades
   (transform and opacity), and the layer adds its light to the canvas under it. Above the
   canvas, below the toasts and the Menu button (10); hidden between waves; never takes input.
   Colours: the dragonfly wings' thin film (cyan into pearl into amethyst), the echo tinted with
   the universe's accent. */

.lightwave {
  position: absolute;
  inset: 0;
  z-index: 5;
  contain: strict;
  pointer-events: none;
  mix-blend-mode: screen;
}

@supports (mix-blend-mode: plus-lighter) {
  .lightwave {
    mix-blend-mode: plus-lighter;
  }
}

/* 512 × 512 px (WAVE_RADIUS in the controller), centred on the stage's top left corner: the
   animation translates it to the catch point and scales it. */
.lightwave__glow,
.lightwave__flash,
.lightwave__ring,
.lightwave__echo,
.lightwave__core {
  position: absolute;
  top: -256px;
  left: -256px;
  width: 512px;
  height: 512px;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* The white-hot point where the dragonfly was caught. */
.lightwave__core {
  background: radial-gradient(closest-side,
    #ffffff 0%,
    color-mix(in srgb, var(--pearl) 90%, transparent) 16%,
    color-mix(in srgb, var(--cyan) 45%, transparent) 40%,
    transparent 100%);
}

/* The soft flash that lifts the whole scene as it spreads. */
.lightwave__flash {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--cyan) 34%, transparent) 0%,
    color-mix(in srgb, var(--cyan) 20%, transparent) 30%,
    color-mix(in srgb, var(--amethyst) 12%, transparent) 62%,
    transparent 100%);
}

/* The wavefront: a cyan inner glow, a pearl-white crest, an amethyst edge. */
.lightwave__ring {
  background: radial-gradient(closest-side,
    transparent 62%,
    color-mix(in srgb, var(--cyan) 28%, transparent) 74%,
    color-mix(in srgb, #ffffff 85%, transparent) 83%,
    color-mix(in srgb, var(--amethyst) 50%, transparent) 88%,
    transparent 97%);
}

/* A thinner echo just behind it, in pearl and the universe's accent. */
.lightwave__echo {
  background: radial-gradient(closest-side,
    transparent 78%,
    color-mix(in srgb, var(--pearl) 60%, transparent) 87%,
    color-mix(in srgb, var(--accent) 35%, transparent) 91%,
    transparent 97%);
}

/* Reduced motion: a still glow at the catch point, brightening and fading. */
.lightwave__glow {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--pearl) 45%, transparent) 0%,
    color-mix(in srgb, var(--cyan) 22%, transparent) 40%,
    transparent 100%);
}

/* The dragonfly's icon (levels/show: menu stat and toast) keeps its wings' cyan, like the item icons. */
.icon--dragonfly {
  color: var(--cyan);
}

/* Its toast (level_controller.js, #toast "dragonflies"): the wings' cyan on the rim. */
.toast.is-catch {
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
  box-shadow: inset 0 0 0.75rem color-mix(in srgb, var(--amethyst) 24%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lightwave__flash,
  .lightwave__ring,
  .lightwave__echo,
  .lightwave__core {
    display: none;
  }
}