@layer components {
  .dm-fun-footer-bubbles {
    position: absolute;
    top:0;
    left:0;
    right:0;
    height:1rem;
    background: var(--footer-bg-color);

    .dm-fun-footer-bubble {
        position: absolute;
        left:var(--position, 50%);
        background: var(--footer-bg-color);
        border-radius:100%;
        animation: dm-fun-bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
          dm-fun-bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
        transform:translate(-50%, 100%);
    }
  }

  @keyframes dm-fun-bubble-size {
    0%, 75% {
        width:var(--size, 4rem);
        height:var(--size, 4rem);
    }
    100% {
        width:0rem;
        height:0rem;
    }
  }
  @keyframes dm-fun-bubble-move {
    0% {
        bottom:-4rem;
    }
    100% {
        bottom:var(--distance, 10rem);
    }
  }
}