improve arc surface

src/_core-elements.scss

@@ -88,24 +88,21 @@ div[class^="ring-"] {
 .surface:before {
     content: '';
     position: absolute;
-    //border: 4px solid purple;
     // calc with of element or distnace of element nis it raidus
     width: 150px;
     height: 300px;
+    border: 1px solid black;
     // 1/2 width - last rings r
-    left: -84px;
     opacity: .6;
-    // rotate: 45deg;
    // radial gradient
-    // background-color: aquamarine;
-    background-image: radial-gradient(circle at 0px 50%, rgba(255, 0, 0, 0) 0, rgba(255, 255, 255, 1) 50px, rgba(255, 193, 7, 1) 51px 100%);
+    background-image: radial-gradient(circle at 0px 50%, orange 0px 5px, transparent 5px 50px, orange 51px 90px, transparent 91px 100%);
     // bordarc
     border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
     // polygon
     clip-path: polygon(100% 0, 0 50%, 100% 100%);
 }
 .surface:hover::before {
-    background-image: radial-gradient(circle at 0px 50%, rgba(255, 0, 0, 0) 0, rgba(255, 255, 255, 1) 50px, rgb(223, 28, 71) 51px 100%);
+    background-image: radial-gradient(circle at 0px 50%, orange 0px 5px, transparent 5px 50px, purple 51px 90px, transparent 91px 100%);
 }
 @each $size,
 $var in $sizes {

src/_radial-grid.scss

@@ -65,8 +65,22 @@
 
 
  @for $i from $min-rings through $max-rings {
+    $resta: 1;
+    @if $i == 1 {
+      $resta: 0
+    }
   @each $size,
    $var in $sizes {
+    .z-container>.ring-#{$i}> .item.#{$size} {
+      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i})), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
+    }
+    .z-container>.ring-#{$i}> .item.#{$size}.surface:before {
+      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i}) - var(--radius-#{$i - $resta}) - #{$var}), 0);
+    }
+
+    .z-container>.ring-#{$i}> .item.stationary.#{$size} {
+      transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i})), 0);
+    }
     @each $class in $align {
       $math: "";
 
@@ -81,10 +95,15 @@
       .z-container>.ring-#{$i}> .item.#{$size}#{$class} {
         transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i}) #{$math}), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
       }
-
+      .z-container>.ring-#{$i}> .item.#{$size}#{$class}.surface:before {
+        transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i - $resta}) #{$math}), 0);
+      }
+
       .z-container>.ring-#{$i}> .item.stationary.#{$size}#{$class} {
         transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i}) #{$math}), 0);
       }
+
+
     }
    }
 
@@ -102,7 +121,15 @@
        // test
        z-index: $max-rings - $i;
      }
+     .item.#{$size}>.ring-#{$i}>.item {
+      --x: calc((#{$var} / 2 * #{$i}));
+      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--x), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
+    }
 
+    .item.#{$size}>.ring-#{$i}> .item.stationary  {
+      --x: calc((#{$var} / 2 * #{$i}));
+      transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--x), 0);
+    }
      @each $class in $align {
        $math: "";
 

src/_variables.scss

@@ -7,7 +7,7 @@ $sizes: "xxs" var(--xxs),
 "xl" var(--xl),
 "xxl" var(--xxl);
 
-$align: "" "",
+$align:
 ".upper",
 ".lower";