/* bloom.css — the button that sits in the sunflower bloom (bloom.js adds
   .bloom-button to it). Shared by See MathStar on the home page and Get
   MathStar on Quest on the MathStar page.

   A raised glass pill floating above the disc: a gloss on its top half,
   a lit top edge and a shaded bottom edge, and a drop shadow below. Its
   rim and halo take the colour now leaving the bloom's centre
   (--bloom-glow, set by bloom.js each frame), so the button reads as the
   source of the colour flowing outward. bloom.js also draws its shadow
   onto the disc itself. */

a.bloom-button {
  --bloom-glow: 179, 85, 201;              /* r, g, b; bloom.js keeps it moving */
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(var(--bloom-glow), 0.75);
  background-color: #6a22ad;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #9a52e6 0%, #7029b8 55%, #4d1688 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),          /* lit top edge */
    inset 0 -3px 8px rgba(25, 0, 50, 0.5),            /* shaded underside */
    0 0 26px -4px rgba(var(--bloom-glow), 0.7),       /* halo in the bloom's colour */
    0 16px 24px -12px rgba(0, 0, 0, 0.75);            /* drop shadow: it floats */
  text-shadow: 0 1px 2px rgba(25, 0, 50, 0.6);
}

a.bloom-button:hover,
a.bloom-button:focus-visible {
  background-color: #7b2fbe;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #a865f0 0%, #8036c8 55%, #5a1c9c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 8px rgba(25, 0, 50, 0.45),
    0 0 40px -2px rgba(var(--bloom-glow), 0.85),
    0 22px 30px -12px rgba(0, 0, 0, 0.8);
  outline: none;
}

a.bloom-button:focus-visible {
  border-color: #ffffff;
}

a.bloom-button:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(25, 0, 50, 0.55),
    0 0 26px -4px rgba(var(--bloom-glow), 0.7),
    0 8px 14px -8px rgba(0, 0, 0, 0.75);
}