- const RING_COUNT = 11;
.container
  .flipper
    .scene
      .plane(style=`--ring-count: ${RING_COUNT}`)
        - let rings = 0;
        while rings < RING_COUNT
          .ring(style=`--index: ${rings}; --name: slink-${rings};`)
          - rings++;

:root
  --border-width 1.2vmin
  --depth 20vmin
  --stack-height 6vmin
  --scene-size 20vmin
  --ring-percentage 0.6
  --ring-size calc(var(--scene-size) * var(--ring-percentage))
  --ring-transform  calc(100% + (var(--scene-size) * ((1 - var(--ring-percentage)) * 0.5))) 50%
  --plane radial-gradient(hsla(0, 0%, 0%, 0.1) 50%, transparent 65%)
  --ring-shadow hsla(0, 0%, 0%, 0.5)
  --hue-one 320
  --hue-two 210
  --blur 10px
  --speed 1.2s
  --bg hsl(0, 0%, 98%)
  --ring-filter brightness(1) drop-shadow(0 0 0 var(--accent))

*
  box-sizing border-box
  transform-style preserve-3d
  
body
  display grid
  place-items center
  min-height 100vh
  
.container
  height var(--scene-size)
  width var(--scene-size)
  transform translate3d(0, 0, 100vmin) rotateX(-24deg) rotateY(-32deg) rotateX(90deg) translate3d(0, 0, calc((var(--depth) + var(--stack-height)) * -1)) rotate(0deg)
 
.scene
.plane
  height 100%
  width 100%
  position relative
  
.scene
  animation step-up var(--speed) infinite linear both

.plane
  transform translate3d(0, 0, var(--depth))
  
.ring
  --origin-z calc(var(--stack-height) - (var(--stack-height) / var(--ring-count)) * var(--index))
  --destination-z calc(((var(--depth) + var(--origin-z)) - (var(--stack-height) - var(--origin-z))) * -1)
  --hue var(--hue-one)
  --accent 'hsl(%s 80% 65%)' % var(--hue)
  height var(--ring-size)
  width var(--ring-size)
  border-radius 50%
  border var(--border-width) solid var(--accent)
  position absolute
  top 50%
  left 50%
  transform-origin var(--ring-transform)
  transform translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg) 
  animation var(--name) var(--speed) both infinite cubic-bezier(.25,0,1,1)
  
  &:nth-of-type(even)
    --hue var(--hue-two)
  
  

// STYLUS GENERATED KEYFRAMES BE HERE...
$ring-count = 10
$animation-window = 45
$animation-step = $animation-window / $ring-count

for $ring in (0..$ring-count)
  // Generate a set of keyframes based on the ring index
  // index is the ring
  $start = $animation-step * ($ring + 1)
  @keyframes slink-{$ring} {
    // In here is where we need to generate the keyframe steps based on ring count and window.
    0%, {$start * 1%} {
      transform translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg)
    }
    // Flip without falling
    {($start + ($animation-window * 0.75)) * 1%} {
      transform translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg)
    }
    // Fall until cut off point
    {($start + $animation-window) * 1%}, 100% {
      transform translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg)
    }
  }
  
@keyframes step-up
  0%
    transform translate3d(-50%, 0, 0)
  100%
    transform translate3d(-50%, 0, var(--depth))
    
.flipper
  animation flip-flop calc(var(--speed) * 2) infinite steps(1)
  height 100%
  width 100%
    
@keyframes flip-flop
  0%
    transform rotate(0deg)
  50%
    transform rotate(180deg)
  100%
    transform rotate(360deg)