<input type="checkbox" name="playPause" id="playPause">

<div class="scene">
  <div class="pivot">
    <div class="starhedron">
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta lid">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta side">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
      <div class="penta lid">
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
        <div class="triangle"></div>
      </div>
    </div>
  </div>
</div>

<label for="playPause">
  <div class="tetra">
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="base"></div>
  </div>
</label>

input {
  display: none;
}

label {
  margin: 50vh 50vw;
  position: absolute;
  width: 30em;
  aspect-ratio: 1;
  transform: translateX(-50%) translateY(-50%) rotateY(0deg) rotateX(0deg) rotate(90deg);
}

label, .wall {
  transition: all .5s ease-in-out;
}

label:hover {
  transform: translateX(-50%) translateY(-50%) rotateY(10deg) rotateX(45deg) rotate(90deg);
} 

label:hover .wall:nth-child(1) {
  background-position-x: 100%;
}

.tetra, .tetra div {
  inset: 0;
}

.tetra div {
  clip-path: polygon(
    calc(50%*(1 - sin(0deg))) calc(50%*(1 - cos(0deg))),
    calc(50%*(1 - sin(0deg))) calc(50%*(1 - cos(0deg))),
    calc(50%*(1 - sin(120deg))) calc(50%*(1 - cos(120deg))),
    calc(50%*(1 - sin(240deg))) calc(50%*(1 - cos(240deg)))
  );
}

.base {
  background: #000;
  transform: rotateX(90deg) translateZ(calc(-15em*sin(30deg)));
}

.wall {
  transform-origin: 50% calc(15em*(1 + sin(30deg)));
  transform: rotateY(calc(var(--wStep)*120deg)) translateZ(calc(15em*sin(30deg))) rotateX(asin(calc(1/3)));
  backface-visibility: hidden;
}

.wall:nth-child(1) {
  --wStep: 0;
  background-color: red;
  background-image: linear-gradient(60deg, green 50%,yellow);
  background-blend-mode: hard-light;
  background-size: 200% 200%;
}

.wall:nth-child(2) {
  --wStep: 1;
  background-color: hsl(30deg 100% 20%);
}

#playPause:checked ~ label {
  margin: 5em;
  scale: .66;
}

#playPause:not(:checked) ~ .scene *,
#playPause:not(:checked) ~ .scene .penta::before {
  animation-play-state: paused;
}

#playPause:checked ~ :is(label, label .wall:nth-child(1)) {
  transform: none;
}

#playPause:checked ~ label:hover .wall {
  scale: 1.2;
  filter: hue-rotate(-30deg);
}

#playPause:checked ~ label .wall {
  clip-path: polygon(calc(100%/3) 0%, 0% 0%, 0 100%, calc(100%/3) 100%);
}

#playPause:checked ~ label .wall:nth-child(1) {
  background-position-x: calc(100%*(2 - 1/3));

}

#playPause:checked ~ label .wall:nth-child(2) {
  transform: translateX(calc(100%*2/3));
  background-color: hsl(45deg 100% 50%);
}

body {

  --spheRadius: 50;
  --ngon: 5;
  --pentAngle: calc(360deg/var(--ngon));
  --r3gon: 100;
  --h3gon: calc(cos(calc(var(--pentAngle)/2)) * var(--r3gon));
  --a3gon: calc(2*sin(calc(var(--pentAngle)/2)) * var(--r3gon));
  --h5gon: calc(var(--r3gon) + var(--h3gon));
  --sideH: calc(sin(var(--pentAngle)) * var(--a3gon));
  --medianH5side: calc((var(--h5gon) + var(--sideH))/2);
  --medRatio: calc(var(--medianH5side)/var(--h5gon));
  --pyrAngle: asin(calc(var(--h3gon)/var(--h5gon)));
  --pyrH: calc(cos(var(--pyrAngle))*var(--h5gon));
  --dodecaH: calc(2*var(--pyrH)*var(--medRatio));
  --slicAngle: atan(calc(var(--r3gon)/calc(var(--dodecaH)/2)));
  background: red;
  --r3gon2: calc(var(--spheRadius)*sin(var(--slicAngle)));
  --dodecaH2: calc(var(--spheRadius)*cos(var(--slicAngle)));

  margin: 0;
  box-sizing: border-box;
  background-color: #f00;
  background-image: radial-gradient(circle at 100% 100%, yellow, green 70%);
  background-blend-mode: hard-light;
  font-size: .6vh;
  display: grid;
  min-height: 100vh;
}

body * {
  position: absolute;
  transform-style: preserve-3d;
}

.scene {
  z-index: -1;
  place-self: center;
  width: 100em;
  aspect-ratio: 1;
  filter: sepia() saturate(3) brightness(.7) contrast(1.4) hue-rotate(-20deg);
}

.pivot, .starhedron {
  inset: 0;
}

.pivot {
  animation: wobble 5s ease-in-out alternate infinite;
}

@keyframes spin {
  100% {
    rotate: y 360deg;
  }
}

.starhedron {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spin 6s linear infinite;
}

@keyframes wobble {
  0% {
    rotate: x -10deg;
  }
  100% {
    rotate: x 10deg;
  }
}

.penta {
  --pentaW: calc(2*var(--r3gon2)*1em);
  width: var(--pentaW);
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  --liteClr: #ddd;
  --darClr: #222;
}

.penta::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: hsl(calc(var(--pStep)*30deg) 100% 50%); */
  --gradAngle: calc((var(--pStep) + var(--halfStep))*47deg);
  /* background: linear-gradient(#ccc,#888); */
  transform: translateZ(calc(-1em*(50 - var(--dodecaH2))));
  clip-path: polygon(
    calc(50%*(1 + sin(72deg*1))) calc(50%*(1 + cos(72deg*1))),
    calc(50%*(1 + sin(72deg*2))) calc(50%*(1 + cos(72deg*2))),
    calc(50%*(1 + sin(72deg*3))) calc(50%*(1 + cos(72deg*3))),
    calc(50%*(1 + sin(72deg*4))) calc(50%*(1 + cos(72deg*4))),
    calc(50%*(1 + sin(72deg*5))) calc(50%*(1 + cos(72deg*5)))
    );
}

@keyframes shade {
  0%,100% {
    background: var(--liteClr);
  }
  50% {
    background: var(--darClr);
  }
}

.penta:nth-child(6n+1) {
  --pStep: 0;
}

.penta:nth-child(6n+2) {
  --pStep: 1;
}

.penta:nth-child(6n+3) {
  --pStep: 2;
}

.penta:nth-child(6n+4) {
  --pStep: 3;
}

.penta:nth-child(6n+5) {
  --pStep: 4;
}

.penta:nth-child(6n) {
  --pStep: 5;
}

.penta:not(:nth-child(n+7)) { /* the first six .penta's */
  --dir: 1;
  --halfStep: 0;
}

.penta:nth-child(n+7) { /* the last six .penta's */
  --dir: -1;
  --halfStep: .5;
}

.penta:nth-child(n+7)::before, .penta:nth-child(n+7) .triangle {
  filter: brightness(.75);
}

.lid {
  transform: rotateX(calc(90deg*var(--dir))) translateZ(50em);
}

.lid:nth-child(6)::before {
  background-color: var(--liteClr);
}

.lid:nth-child(12)::before {
  background-color: var(--darClr);
  filter: brightness(2.5);
}

.side {
  transform: rotateY(calc(var(--pentAngle)/4*(1 + var(--dir)) + var(--pentAngle)*var(--pStep))) rotateX(calc(var(--dir)*var(--pyrAngle))) translateZ(50em) rotate(calc(90deg*(1 - var(--dir))));
}

.side::before, .penta .triangle {
  animation: shade 6s linear infinite;
}

.side::before {
  animation-delay: calc(-6s/5 * (var(--pStep) + var(--halfStep)));
}

.triangle {
  width: calc(sin(var(--pentAngle))*var(--pentaW));
  --starAngle: atan(calc( (50 - var(--dodecaH2))/(cos(var(--pentAngle)) * var(--r3gon2)) ));
  height: calc(cos(var(--pentAngle))*var(--r3gon2)*1em * 1/cos(var(--starAngle)));
  /* background: hsl(calc(var(--triStep)*var(--pentAngle)) 100% 50%); */
  top: calc(var(--pentaW)/2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  transform: rotate(calc(var(--triStep)*144deg)) rotateX(calc(-1*var(--starAngle)));
}

.triangle:nth-child(1) {
  --triStep: 1;
}

.triangle:nth-child(2) {
  --triStep: 2;
}

.triangle:nth-child(3) {
  --triStep: 3;
}

.triangle:nth-child(4) {
  --triStep: 4;
}

.triangle:nth-child(5) {
  --triStep: 5;
}

.side .triangle {
  animation-delay: calc(-6s/5 * (var(--pStep) - var(--halfStep) + var(--triStep)/5 + .2));  
}

.lid .triangle {
  animation-delay: calc(-6s/5 * (4 - (var(--triStep))));
}

.lid:nth-child(6) .triangle {
  filter: contrast(.2) brightness(1.5);
} 

.lid:nth-child(12) .triangle {
  filter: contrast(.5) brightness(.8);
}

@media (orientation: portrait) {
  body {
    font-size: .6vw;
  }

  label {
    font-size: 1.5em;
  }
}