- const RING_COUNT = 10;
.container
  .scene
    .plane(style=`--ring-count: ${RING_COUNT}`)
      - let rings = 0;
      while rings < RING_COUNT
        .ring(style=`--index: ${rings};`)
        - rings++;
        
input(type="range" min=0 max=100 step=1 value=0)

: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
  background hsla(280, 80%, 50%, 0.25)

.plane
  background hsla(200, 80%, 50%, 0.25)
  transform translate3d(0, 0, var(--depth))
  
.ring
  --origin-z calc(var(--stack-height) - (var(--stack-height) / var(--ring-count)) * var(--index))
  --hue var(--hue-one)
  --accent 'hsl(%s 100% 55%)' % 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)) translate3d(0, 0, 0) rotateY(calc(var(--flipped, 0) * 180deg))
  
  &:nth-of-type(odd)
    --hue var(--hue-two)
      
[type="range"]
  position fixed
  top 50%
  left 50%
  transform translate(-50%, 30vmin)

const INPUT = document.querySelector('input')

INPUT.addEventListener('input', () => {
  document.documentElement.style.setProperty('--flipped', INPUT.value / 100)
})