<template>
  <div class="bubbles">
    <div class="bubble-1"></div>
    <div class="bubble-2"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({});
</script>

<style lang="scss" scoped>
.bubble-1 {
  position: absolute;

  top: 240px;
  right: 70px;

  width: 140px;
  height: 140px;

  background: linear-gradient(248.68deg, #ff7426 13.36%, #ff5f21 66.45%);
  border-radius: 50%;

  animation: levitation-1 30s infinite;
}

.bubble-2 {
  position: absolute;
  top: 80px;
  right: -137px;

  box-sizing: border-box;
  width: 280px;
  height: 280px;

  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0px 40px 40px rgba(4, 4, 4, 0.02);
  backdrop-filter: blur(20px);

  animation: levitation-2 30s infinite;
}
</style>
