:root{
  --bg: #ffffff;
  --c1: #98D3AE;
  --c2: #98D3AE;
  --c3: #6FBC8E;
  --c4: #ffffff;
  --rw2: #98D3AE;
  --rv2: #7B6CFF;

  --blur: 44px;
  --sat: 1.08;
  --bri: 1.03;
  --bubble-size: min(900px, 78vw);
}

.bubble-v3{
  width: var(--bubble-size);
}

.blob{
  width: 100%;
  height: auto;
  display: block;
  filter: blur(var(--blur)) saturate(var(--sat)) brightness(var(--bri));
  transform-origin: 50% 55%;
  animation: breathe 11s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ transform: translateY(0) scale(1); opacity: .95; }
  50%{ transform: translateY(-1.1%) scale(1.025); opacity: 1; }
}

.rim{
  filter: blur(6px);
  mix-blend-mode: screen;
  transition: opacity 420ms ease;
}

.talk-notch{
  filter: blur(1.5px);
  transition: opacity 320ms ease;
}

.echo-wing{
  filter: blur(3px);
  mix-blend-mode: multiply;
  transition: opacity 380ms ease;
}

.echo-wing--outer{
  filter: blur(4px);
}

@media (prefers-reduced-motion: reduce){
  .blob{ animation: none; }
  .rim, .talk-notch, .echo-wing{ transition: none; }
}
