#icon_visualizer{
position: relative;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}

#icon_visualizer:before,
#icon_visualizer:after{
content: '';
position:absolute;
width:88%;
height:88%;
border-radius: 50%;
}

#icon_visualizer:before{
background: linear-gradient(
        80deg,
        rgba(240,109,15,1) 0%,
        rgba(138, 91, 169,1) 46%
);

background: linear-gradient(
        80deg,
        oklch(65% 0.20 55) 0%,
        oklch(50% 0.18 305) 46%
);
animation:pulse 6s ease-in-out infinite, morph 4s ease-in-out infinite, rotate 20s ease-in-out reverse infinite;
}

#icon_visualizer:after{
background: linear-gradient(
        80deg,
        rgba(240,109,15,1) 0%,
        rgba(138, 91, 169,1) 46%
);

background: linear-gradient(
        80deg,
        oklch(65% 0.20 55) 0%,
        oklch(50% 0.18 305) 46%
);
animation:pulse 5s ease-in-out infinite, morph 3s ease-in-out reverse infinite, rotate 30s ease-in-out infinite;
filter:blur(1px) saturate(150%);
}

#front{
position:absolute;
z-index:100;
width:78%;
height:78%;
background:#fff;
border-radius:50%;
-webkit-backdrop-filter:var(--backdrop-filter-default);
backdrop-filter:var(--backdrop-filter-default);
}

@keyframes pulse{
0% {
transform:scale(.95);
opacity:.9;
filter:blur(1px);
}
50% {
opacity:1;
transform:scale(.85);
filter:blur(3px) saturate(110%);
}
100% {
opacity:.9;
transform:scale(.95);
filter:blur(1px);
}
}

@keyframes morph{

0%{
border-radius: 50% 49% 48% 50%;
transform: translateY(0);
}

50%{
border-radius: 48% 47% 46% 49%;
transform: translateY(0);
}

100%{
border-radius: 48% 48% 49% 48%;
transform: translateY(0);
}

}


@keyframes rotate{

0%{
transform: translateY(0);
}

50%{
transform: translateY(0) rotate(180deg);
}

100%{
transform: translateY(0) rotate(-360deg);
}

}