/* Surface Tension -- Humidity Studios */
/* Gooey magnetic blob effect via blur+contrast, colorized with screen blend */

.st-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

/* Shapes layer: blur + contrast creates the metaball merge effect.
   Blur softens edges so nearby shapes overlap smoothly.
   High contrast snaps the soft gradients into hard blob edges. */
.st-shapes {
  position: absolute;
  inset: 0;
  background: #fff;
  filter: blur(var(--st-blur, 12px)) contrast(var(--st-contrast, 25));
}

/* Screen layer: colorizes the black blobs with brand color.
   Screen on black = color, screen on white = white. */
.st-screen {
  position: absolute;
  inset: 0;
  background: var(--st-color, #2E30B8);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Elements */
.st-el {
  position: absolute;
  background: #000;
  will-change: transform;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.st-el--dragging {
  cursor: grabbing;
}

.st-el--circle {
  border-radius: 50%;
}

.st-el--pill {
  border-radius: 9999px;
}