@layer demo{:root{--blob-size:100dvh;--blob-speed:15s;--blob-speed-scale:calc(2.25 * var(--blob-speed));--blob-speed-move:calc(1 * var(--blob-speed));--blob-speed-rotate:calc(2 * var(--blob-speed));--blob-opacity:0.65;--blob-blur:100px;--blob-color-1:#e9b4eb;--blob-color-2:#b7adf5;--blob-color-3:#a1c7fa}.blobs{position:relative;filter:blur(var(--blob-blur))}.blobs *{backface-visibility:hidden;transform-origin:-150% -250%;transform-style:preserve-3d;will-change:transform}.blobs:after{position:relative;display:block;width:22rem;height:38rem;background:hsla(0,0%,72%,.08);backdrop-filter:blur(8rem) saturate(1.6);border-radius:1.5rem;z-index:2}.blob{width:var(--blob-size);height:calc(.25*var(--blob-size));background-color:var(--blob-color-1);border-radius:100%;opacity:var(--blob-opacity);mix-blend-mode:multiply;animation:blob ease-in-out var(--blob-speed-scale) infinite}.blobs>:nth-child(2) .blob{background-color:var(--blob-color-2);animation-delay:calc(-.8*var(--blob-speed-scale))}.blobs>:nth-child(3) .blob{background-color:var(--blob-color-3);animation-delay:calc(-.2*var(--blob-speed-scale))}@keyframes blob{0%,to{transform:scale(.8,2)}50%{transform:scale(1.4,.8)}}.blob-rotate{position:absolute;left:50%;top:50%;animation:blob-rotate linear var(--blob-speed-rotate) infinite alternate}.blob-rotate:nth-child(2){animation-duration:calc(2*var(--blob-speed-rotate));animation-delay:calc(-1.5*var(--blob-speed-rotate))}.blob-rotate:nth-child(3){animation-direction:alternate-reverse;animation-duration:calc(.8*var(--blob-speed-rotate));animation-delay:calc(-1*var(--blob-speed-rotate))}@keyframes blob-rotate{0%{transform:translate3d(-50%,-50%,0) rotate(-28deg);transform-origin:50% 100%}to{transform:translate3d(-50%,-50%,0) rotate(28deg);transform-origin:50% 0}}.blob-move{animation:blob-move ease-in-out var(--blob-speed-move) infinite}.blobs>:nth-child(2) .blob-move{animation-delay:calc(-.8*var(--blob-speed-move))}.blobs>:nth-child(3) .blob-move{animation-delay:calc(-.4*var(--blob-speed-move))}@keyframes blob-move{0%,to{transform:translateX(30%)}50%{transform:translateX(-30%)}}}