//- you can change these two values
- let n_rings = 18 /* must be even */, n_sides = 24;
- let n = n_rings*n_sides;

style
  - for(let i = 0; i < n_rings; i++)
    | .area:nth-child(n + #{n_sides*i + 1}) { --i: #{i} }
  - for(let i = 0; i < n_sides; i++)
    | .area:nth-child(#{n_sides}n + #{i + 1}) { --j: #{i} }
section.scene
  div(class='🌐' style=`--n-rings: ${n_rings}; --n-sides: ${n_sides}`)
    while n--
      .area
  .prompt scroll

$r: 23vmin; // sphere inradius

body { height: 200vh }

section, div { display: grid }

svg[height='0'], .scene { position: fixed }

div {
  grid-area: 1/ 1;
  place-self: center
}

.scene {
  inset: 0;
  perspective: 25em;
  background: 
    url(https://assets.codepen.io/2017/night_sky.jpg) 
      50%/ cover #212121;
  background-blend-mode: multiply;
  
  &::before, &::after {
    grid-area: 1/ 1;
    margin: 0 auto;
    padding: .5em;
    max-width: 18em;
    color: #121212;
    font: clamp(.625em, 6.5vmin, 3.25em) neonderthaw, cursive;
    text-align: center;
    content: 'Dedicated to the person who taught me about Jupiter some 35 years ago. Missing you.'
  }
  
  &::after {
    align-self: end;
    mix-blend-mode: multiply;
    content: '1 June 1927 - 18 January 2019'
  }
}

.🌐 {
  transform-style: preserve-3d;
  rotate: x -60deg;
  will-change: transform;
  animation: 
    ry 16s linear infinite, 
    rx 1s linear forwards;
}

@supports (animation-timeline: auto, scroll()) {
  .🌐 { animation-timeline: auto, scroll() }
  
  @keyframes rx { to { rotate: x 60deg } }
}

@supports not (animation-timeline: auto, scroll()) {
  .prompt { display: none }
}

@keyframes ry { to { transform: rotatey(1turn) } }

.area { 
  --dif-i: calc(var(--i) - .5*(var(--n-rings) - 1));
  --sgn-i: clamp(-1, 2*var(--dif-i), 1);
  --rnd-i: round(to-zero, var(--dif-i), 1);
  /* get around lack of support for abs() in Firefox */
  --abs-i: max(var(--rnd-i), -1*var(--rnd-i));
  
  --bay: calc(360deg/var(--n-sides));
  --hay: calc(180deg/var(--n-sides));
  --bax: calc(180deg/var(--n-rings));
  --hax: calc(90deg/var(--n-rings));
  
  --l: calc(2*#{$r}*tan(var(--hax)));
  
  --f0: cos(var(--abs-i)*var(--bax));
  --f1: cos((var(--abs-i) + 1)*var(--bax));
  
  --y0: sin(var(--abs-i)*var(--bax));
  --y1: sin((var(--abs-i) + 1)*var(--bax));
  
  --rx: atan2(var(--f0) - var(--f1), var(--y1) - var(--y0));
  
  --oy0: calc((var(--sgn-i) - 1)*-50%);
  --oy1: calc((var(--sgn-i) + 1)*50%);
  
  --w: calc(var(--f0)*2*#{$r}*tan(var(--hay)));
  width: var(--w); 
  height: var(--l);
  //backface-visibility: hidden;
  perspective-origin: 50% var(--oy1);
  perspective: calc(max(.1, var(--f1))*var(--l)/(var(--f0) - var(--f1)));
  transform-origin: 50% var(--oy0);
  transform: 
    rotatey(calc(var(--j)*var(--bay))) 
    translate3d(
      0, 
      calc(var(--sgn-i)*(50% + #{$r}*var(--y0))), 
      calc(var(--f0)*#{$r})) 
    rotatex(calc(-1*var(--sgn-i)*var(--rx)));
  clip-path: 
    polygon(
      calc((1 - var(--f1)/var(--f0))*50%) var(--oy1), 
      calc((1 + var(--f1)/var(--f0))*50%) var(--oy1), 
      100% var(--oy0), 
      0 var(--oy0));
  filter: 
    drop-shadow(0 0 1px wheat) 
    drop-shadow(0 0 1px peachpuff);
  
  &::after {
    transform-origin: inherit;
    transform: 
      matrix3d(1, 0, 0, 0, 
               0, 1, calc(-1*var(--sgn-i)), 0, 
               0, 0, 1, 0, 
               0, 0, 0, 1);
    background: 
      url(https://assets.codepen.io/2017/jupiter_projection.jpg) 
        calc(-1*var(--j)*var(--w)) calc(-1*var(--i)*var(--l))/ 
        calc(var(--n-sides)*100%) calc(var(--n-rings)*100%);
    content: ''
  }
}

/* fallback if round() is not supported in Chrome */
@supports not (z-index: Round(to-zero, 8.5, 1)) {
  @property --rnd-i {
    syntax: '<integer>';
    initial-value: 0;
    inherits: true
  }
  
  .area { --rnd-i: calc(var(--dif-i) - var(--sgn-i)*.5) }
}

.prompt {
  grid-auto-flow: column;
  align-items: center;
  justify-self: end;
  padding: .5em;
  color: ivory;
  font: 1.25em montserrat, sans-serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  
  &::before, &::after { font-size: 1.5em }
  
  &::before { content: '↑' }
  &::after { content: '↓' }
  
  &::selection { background: darkorange }
}