.bc-bubbles {
width: 100%; height: 100vh; overflow: hidden;
background: rgb(108, 0, 162); }
.bc-bubbles > svg{
display: none;
}
.bc-bubbles__content {
position: relative;
z-index: 1;
float: left;
}
.bc-bubbles__wrapper {
--blur: 40px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
width: 100%;
height: 100%;
}
.bc-bubbles__bubble{
position: absolute;
}
.bc-bubbles__bubble{
filter: blur(var(--blur)); -webkit-filter: blur(var(--blur)) ; }
.bricks-draggable-root .bc-bubbles[data-builderedit="1"] .bc-bubbles__bubble{
animation: none !important;
}
.bc-bubbles__bubble--1 {
--inner-background: rgba(18, 113, 255, 0.8);
background: radial-gradient(circle at center, var(--inner-background) 0, rgba(18, 113, 255, 0) 50%) no-repeat; --blending: hard-light; 
mix-blend-mode: var(--blending); --circle-size: 80%;
width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); --speed: 30s;
--easing: ease;
transform-origin: center center;
animation: moveVertical var(--speed) var(--easing) infinite;
}
.bc-bubbles__bubble--2 {
--inner-background: rgba(221, 74, 255, 0.8);
background: radial-gradient(circle at center, var(--inner-background) 0, rgba(221, 74, 255, 0) 50%) no-repeat; --blending: hard-light; 
mix-blend-mode: var(--blending); --circle-size: 80%;
width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); --speed: 20s;
transform-origin: calc(50% - 400px);
animation: moveInCircle var(--speed) reverse infinite;
}
.bc-bubbles__bubble--3 {
--inner-background: rgba(100, 220, 255, 0.8);
background: radial-gradient(circle at center, var(--inner-background) 0, rgba(100, 220, 255, 0) 50%) no-repeat; --blending: hard-light; 
mix-blend-mode: var(--blending); --circle-size: 80%;
width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2 + 200px); left: calc(50% - var(--circle-size) / 2 - 500px); --speed: 40s;
transform-origin: calc(50% + 400px);
animation: moveInCircle var(--speed) linear infinite;
}
.bc-bubbles__bubble--4 {
--inner-background: rgba(200, 50, 50, 0.8);
background: radial-gradient(circle at center, var(--inner-background) 0, rgba(200, 50, 50, 0) 50%) no-repeat; --blending: hard-light; 
mix-blend-mode: var(--blending); --circle-size: 80%;
width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); opacity: 0.7; --speed: 40s;
transform-origin: center center;
animation: moveHorizontal var(--speed) ease infinite;
}
.bc-bubbles__bubble--5 {
--inner-background: rgba(180, 180, 50, 0.8);
background: radial-gradient(circle at center, var(--inner-background) 0, rgba(180, 180, 50, 0) 50%) no-repeat; --blending: hard-light; 
mix-blend-mode: var(--blending); --circle-size: 80%;
width: calc(var(--circle-size) * 2); height: calc(var(--circle-size) * 2); top: calc(50% - var(--circle-size)); left: calc(50% - var(--circle-size)); --speed: 20s;
transform-origin: calc(50% - 800px) calc(50% + 200px);
animation: moveInCircle var(--speed) ease infinite;
}
.bc-bubbles__bubble[data-type="vertical"]{
--speed: 30s;
--easing: ease;
transform-origin: center center;
animation: moveVertical var(--speed) var(--easing) infinite;
}
.bc-bubbles__bubble[data-type="horizontal"]{
--speed: 40s;
transform-origin: center center;
animation: moveHorizontal var(--speed) ease infinite;
}
.bc-bubbles__bubble[data-type="incircle1"]{
--speed: 20s;
transform-origin: calc(50% - 400px);
animation: moveInCircle var(--speed) reverse infinite;
}
.bc-bubbles__bubble[data-type="incircle2"]{
--speed: 40s;
transform-origin: calc(50% + 400px);
animation: moveInCircle var(--speed) linear infinite;
}
.bc-bubbles__bubble[data-type="incircle3"]{
--speed: 20s;
transform-origin: calc(50% - 800px) calc(50% + 200px);
animation: moveInCircle var(--speed) ease infinite;
}
[data-bubble-cursor="1"] .bc-bubbles__bubble--cursor {
--inner-background: rgba(140, 100, 255, 0.8);
background: radial-gradient(circle at center, var(--inner-background) 0, rgba(140, 100, 255, 0) 50%) no-repeat; --blending: hard-light; 
mix-blend-mode: var(--blending); --dimensions: 100%;
width: var(--dimensions); height: var(--dimensions); top: calc(var(--dimensions) / -2); left: calc(var(--dimensions) / -2); opacity: 0.7; }
@keyframes moveInCircle {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes moveVertical {
0% {
transform: translateY(-50%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(-50%);
}
}
@keyframes moveHorizontal {
0% {
transform: translateX(-50%) translateY(-10%);
}
50% {
transform: translateX(50%) translateY(10%);
}
100% {
transform: translateX(-50%) translateY(-10%);
}
}