.widget.spatial-animation{
    position:relative;
    padding:0;
    display:table;
}

.widget.spatial-animation::before{
    width:100%;
    font-size  : calc( 2* var(--c) );
    display: table-cell;
    vertical-align: middle;    
}

.widget.spatial-animation > menu{
    visibility:hidden;
    margin:0;
    padding:0;
    position:absolute;
    top: calc( var(--delta) * -100% );
    left:0;
    list-style-type:none;
    border-radius:1rem;
    overflow:hidden;
    z-index: 2;
}

.widget.spatial-animation.dragging > menu{
  visibility:visible;
} 

.widget.spatial-animation > figure{
    padding: 1rch;
    margin:0;
    pointer-events:none;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.widget.spatial-animation.dragging > figure{
   display:none;
}


.widget.spatial-animation.dragging::before{
    visibility:hidden;
}

.widget.spatial-animation > menu > li{
    width:100%;
    aspect-ratio:1/1;
    font-size: 1rem;
    padding:1rch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align:center;
    background:var(--main-background);
    color:var(--main-foreground);
    opacity: 1;
	cursor: pointer;    
}

.widget.spatial-animation > menu > li.selected{
    opacity: 1;
}

.widget.spatial-animation svg.svg-icon {
    width:100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.widget.spatial-animation svg.svg-icon:where(.u2d,.f2b,.sparks,.radial,.beacon)  circle{
    animation:ppp;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode:forwards;
    animation-timing-function:linear;
    animation-play-state: paused;
}
.widget.spatial-animation.dragging menu li:not(.selected) svg.svg-icon circle{
    -animation-play-state: paused;
} 

.widget.spatial-animation.dragging menu:has(li:active)  li:not(.selected) svg.svg-icon circle{
    -animation-name:none;/*resets animation but uggly*/
} 

.widget.spatial-animation :where(figure,.selected) svg.svg-icon circle{
    animation-play-state:running;
}

@keyframes ppp{
    0%{
        -fill:var(--dominant-color);
        opacity:1;
    }
    100%{
        -fill:var(--dominant-contrast);
        opacity:0;
    }
}
.widget.spatial-animation svg.svg-icon circle{
    fill:var(--dominant-color);
    stroke:var(--main-background);
    stroke-width:0.1px;
}

.widget.spatial-animation  svg.svg-icon.u2d circle[cy='4']{
    animation-delay: -0.0s;
}
.widget.spatial-animation  svg.svg-icon.u2d circle[cy='3']{
    animation-delay: -0.3s;
}
.widget.spatial-animation  svg.svg-icon.u2d circle[cy='2']{
    animation-delay: -0.6s;
}
.widget.spatial-animation  svg.svg-icon.u2d circle[cy='1']{
    animation-delay: -0.9s;
}
.widget.spatial-animation  svg.svg-icon.u2d circle[cy='0']{
    animation-delay: -1.2s;
}

.widget.spatial-animation  svg.svg-icon.f2b circle[cz='4']{
    animation-delay: -1.2s;
}
.widget.spatial-animation  svg.svg-icon.f2b circle[cz='3']{
    animation-delay: -0.9s;
}
.widget.spatial-animation  svg.svg-icon.f2b circle[cz='2']{
    animation-delay: -0.6s;
}
.widget.spatial-animation  svg.svg-icon.f2b circle[cz='1']{
    animation-delay: -0.3s;
}
.widget.spatial-animation  svg.svg-icon.f2b circle[cz='0']{
    animation-delay: -0.0s;
}


.widget.spatial-animation svg.svg-icon.sparks  circle{
    animation-name: spark-frames;
    animation-duration: 5s;
    animation-timing-function:ease-in-out;
}
@keyframes spark-frames{
    0%{
        -fill:var(--dominant-contrast);
        opacity:0;
    }
    50%{
        -fill:var(--dominant-color);
        opacity:1;
    }
    75%{
        -fill:var(--dominant-color);
        opacity:1;
    }
    100%{
        -fill:var(--dominant-contrast);
        opacity:0;
    }
}

.widget.spatial-animation  svg.svg-icon.sparks circle:not([data-rnd50]){
    animation:none;
    fill:var(--dominant-color);
}

.widget.spatial-animation  svg.svg-icon.sparks circle[data-rnd50]{
    animation-delay: calc( var(--rnd) * -5s);
}


@keyframes radial-frames{
    0%{
        -fill:var(--main-background);
        opacity:calc( 1 - clamp(0, var(--r), 1) );
    }
    100%{
        -fill:var(--dominant-color);
        opacity:0;
    }   
}
.widget.spatial-animation svg.svg-icon.radial  circle{
    animation-name: radial-frames;
    animation-duration: 2s;
    animation-timing-function:ease-in-out;
    animation-direction: alternate;    
}
.widget.spatial-animation  svg.svg-icon.radial circle{
    animation-delay: calc(1.1s + var(--r) * -2s);
}

.widget.spatial-animation svg.svg-icon.beacon  circle{
    animation-name: ppp;
    animation-duration: 2.5s;
    animation-timing-function:ease-in-out;
    animation-direction: normal;
    animation-delay: calc( var(--w) * -2.5s);
}

.widget.spatial-animation.dragging svg.svg-icon circle, .widget.spatial-animation  li:hover svg.svg-icon circle{
    animation-play-state: running;
}
.widget.spatial-animation.dragging li:not(.selected){
    background:black;
}