/* The soap bubble button: a pill of soap film on a white page. Slow thin-film colours swim in it, a white shine sits
   on its upper edge, and a fine rim of pink and blue runs around the inside. When it pops the film is gone and a
   plain outline holds the "Invite sent" state until the bubble blows back up. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #15161c;           /* the words */
  --outline: #e2dfec;       /* the edge of the pill once the bubble has popped */
  --focus: #5a4bff;         /* the keyboard focus ring */
  --done: #1f8f5f;          /* the tick after the pop */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Geist Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.soap {
  position: relative;
}

/* ---------------------------------------------------------------- the button */
.soap__btn {
  position: relative;
  display: block;
  height: 60px;
  padding: 0 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.soap__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
}

.soap__btn[aria-disabled='true'] {
  cursor: default;
}

/* ---------------------------------------------------------------- the film */
.soap__film {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 16px 28px -22px rgba(70, 60, 150, 0.6);
}

/* the rim: pink under the edge, blue over it, a hairline of violet all round */
.soap__film::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1.25px rgba(130, 150, 255, 0.55),
    inset 0 -9px 16px -8px rgba(255, 110, 200, 0.5),
    inset 0 9px 16px -8px rgba(110, 215, 255, 0.55);
  pointer-events: none;
}

/* the middle of the film is clearer than its edge, so the words stay easy to read */
.soap__film::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

/* the colours: a big conic gradient (the script writes it from the tints) that turns slowly and is blurred soft */
.soap__swirl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  opacity: 0.7;
  filter: blur(12px);
  background: conic-gradient(from 0deg, #ff7ac8, #7ad0ff, #b8ff8f, #ffd978, #ff7ac8);
  will-change: transform;
}

.soap__shine {
  position: absolute;
  z-index: 2;
  left: 8%;
  top: 8%;
  width: 40%;
  height: 24%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  transform: rotate(-4deg);
}

.soap__shine::after {
  content: '';
  position: absolute;
  left: 170%;
  top: 250%;
  width: 26%;
  height: 52%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------- after the pop */
.soap__outline {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--outline);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the words */
.soap__label {
  position: relative;
  z-index: 3;
  display: grid;
  height: 100%;
  align-items: center;
  overflow: hidden;
}

.soap__word {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.soap__word--done {
  opacity: 0;
}

.soap__tick {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--done);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the droplets */
.soap__drops {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.soap__drop {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}