/* Bubble-rise button: on hover a circle of the fill colour grows out of nothing just under the button's bottom edge
   and rises through it while the label turns white; on leave it shrinks back slower. CSS only.
   Numbers from Webflow IX2 a-2 (hover in) / a-3 (hover out):
     in : bubble scale 0 -> 2 over 1400ms outSine, translateY 0 -> -100% (its own height) over 700ms outSine,
          label colour -> white over 500ms linear after 200ms
     out: bubble scale -> 0 over 1000ms linear, translateY -> 0 over 500ms linear, label colour back over 500ms linear
   outSine is sin(pi/2 * t): written as a 21-point linear() (max error 0.0008), with cubic-bezier(.61,1,.88,1)
   (max error 0.0076) for browsers without linear(). Timing functions are NOT knobs on purpose: a var() that
   resolves to an unsupported linear() would void the whole transition. */
.brb {
  --brb-bg: #fff;                 /* resting face */
  --brb-ink: #2c1457;             /* resting label */
  --brb-fill: #2c1457;            /* the bubble */
  --brb-ink-on: #fff;             /* label once the bubble is in */
  --brb-size: 100%;               /* bubble diameter, share of the button's width */
  --brb-scale: 2;                 /* bubble end scale */
  --brb-rise: -100%;              /* bubble end lift, share of its own height */
  --brb-in-grow: 1400ms;
  --brb-in-rise: 700ms;
  --brb-in-ink: 500ms;
  --brb-in-ink-delay: 200ms;
  --brb-out-grow: 1000ms;
  --brb-out-rise: 500ms;
  --brb-out-ink: 500ms;
  --brb-pad: 1rem 2.5rem;
  --brb-radius: 70px;
  --brb-text: 1.2rem;             /* label size */

  position: relative;
  isolation: isolate;             /* the bubble (z-index -1) paints over the face, under the label */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: var(--brb-pad);
  border: 0;
  border-radius: var(--brb-radius);
  background: var(--brb-bg);
  color: var(--brb-ink);
  font: inherit;
  font-size: var(--brb-text);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: color;
  transition-duration: var(--brb-out-ink);
  transition-timing-function: linear;
  transition-delay: 0ms;
}
.brb::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;                      /* parked just under the bottom edge */
  left: 50%;
  width: var(--brb-size);
  aspect-ratio: 1;
  margin-left: calc(var(--brb-size) / -2);
  border-radius: 50%;
  background: var(--brb-fill);
  scale: 0;
  translate: 0 0;
  pointer-events: none;
  transition-property: scale, translate;
  transition-duration: var(--brb-out-grow), var(--brb-out-rise);
  transition-timing-function: linear;
}

/* in: mouse hover, keyboard focus, or .is-hover (demo autopilot / scripted) */
.brb:focus-visible, .brb.is-hover {
  color: var(--brb-ink-on);
  transition-duration: var(--brb-in-ink);
  transition-delay: var(--brb-in-ink-delay);
}
.brb:focus-visible::before, .brb.is-hover::before {
  scale: var(--brb-scale);
  translate: 0 var(--brb-rise);
  transition-duration: var(--brb-in-grow), var(--brb-in-rise);
  transition-timing-function: cubic-bezier(.61, 1, .88, 1);
  transition-timing-function: linear(0, .0785, .1564, .2334, .309, .3827, .454, .5225, .5878, .6494, .7071, .7604, .809, .8526, .891, .9239, .9511, .9724, .9877, .9969, 1);
}
@media (hover: hover) {
  .brb:hover {
    color: var(--brb-ink-on);
    transition-duration: var(--brb-in-ink);
    transition-delay: var(--brb-in-ink-delay);
  }
  .brb:hover::before {
    scale: var(--brb-scale);
    translate: 0 var(--brb-rise);
    transition-duration: var(--brb-in-grow), var(--brb-in-rise);
    transition-timing-function: cubic-bezier(.61, 1, .88, 1);
    transition-timing-function: linear(0, .0785, .1564, .2334, .309, .3827, .454, .5225, .5878, .6494, .7071, .7604, .809, .8526, .891, .9239, .9511, .9724, .9877, .9969, 1);
  }
}
.brb:focus-visible { outline: 2px solid var(--brb-fill); outline-offset: 3px; }

/* reduced motion: the fill and label swap with a short fade, no growing or rising */
@media (prefers-reduced-motion: reduce) {
  .brb, .brb:hover, .brb:focus-visible, .brb.is-hover { transition-duration: 150ms; transition-delay: 0ms; }
  .brb::before, .brb:hover::before, .brb:focus-visible::before, .brb.is-hover::before {
    scale: 1; translate: 0 0; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0;
    opacity: 0; transition-property: opacity; transition-duration: 150ms;
  }
  .brb:focus-visible::before, .brb.is-hover::before { opacity: 1; }
  @media (hover: hover) { .brb:hover::before { opacity: 1; } }
}