@import url('https://fonts.googleapis.com/css2?family=Raleway:[email protected]&display=swap');

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  background-color: #eee;
  color: #111;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-size: 16px;
  perspective: 1500px;
  overflow: hidden;

  *:not(:empty) {
    transform-style: preserve-3d;
  }
}

.hidden {
  position: fixed;
  top: -100vh; left: -100vw;
  appearance: none;
  background: none;
  border: none;
}

.scene {
  position: relative;
  transform: translateY(-1.5em);
}

.stateLabels {
  position: absolute;
  top: -14em;
  display: flex;
  gap: 2em;
  transform: translateX(-50%);

  &::before {
    content: "csStickman";
    position: absolute;
    top: -4em;
    width: 100%;
    text-align: center;
    font-size: 1.25em;
  }
}

.stateLabel {
  width: 5em;
  position: relative;
  text-align: center;
  cursor: pointer;

  &::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0%; height: 1px;
    transform: translateX(-50%);
    background-color: #0007;
    transition: width 0.5s;
  }
}

@for $i from 1 through 3 {
  #state#{$i}:checked ~ .scene [for="state#{$i}"]::after {
    width: 100%;
  }
}

#state2:checked ~ .scene {
  $speed: 2s;

  .head {
    animation: headWalk $speed infinite ease-in-out;

    @keyframes headWalk {
      0%, 100% { transform: rotateZ(-5deg); }
      50% { transform: rotateZ(5deg); }
    }
  }

  .torso {
    animation: torsoWalk $speed infinite ease-in-out;

    @keyframes torsoWalk {
      0%, 50%, 100% { transform: translateY(0.8em); }
      25%, 75% { transform: translateY(0em); }
    }
  }

  .arm {
    animation: armWalk $speed var(--armDelay, 0s) infinite ease-in-out;

    @keyframes armWalk {
      0%, 100% { transform: rotateZ(var(--armAngle)) rotateX(-20deg); }
      50%      { transform: rotateZ(var(--armAngle)) rotateX( 20deg); }
    }

    &.left { --armDelay: #{$speed * -0.95}; }
    &.right { --armDelay: #{$speed * -0.45}; }
  }

  .hand {
    animation: handWalk $speed var(--armDelay, 0s) infinite ease-in-out;

    @keyframes handWalk {
      0%, 100% { transform: rotateZ(var(--handAngle)) rotateX(0deg); }
      75%      { transform: rotateZ(var(--handAngle)) rotateX(20deg); }
    }
  }

  .leg {
    animation: legWalk $speed var(--legDelay, 0s) infinite ease-in-out;

    @keyframes legWalk {
      0%, 100% { transform: rotateZ(var(--legAngle)) rotateX( 20deg); }
      50%      { transform: rotateZ(var(--legAngle)) rotateX(-20deg); }
    }

    &.left {
      --shinDelay: #{$speed * -0.95};
      --footDelay: #{$speed * -0.9};
    }
    &.right {
      --legDelay: #{$speed / -2};
      --shinDelay: #{$speed * -0.45};
      --footDelay: #{$speed * -0.4};
    }
  }

  .shin {
    animation: shinWalk $speed var(--shinDelay, 0s) infinite ease-in-out;

    @keyframes shinWalk {
      0%, 25%, 100% { transform: rotateZ(var(--shinAngle)) rotateX(0deg); }
      50%, 70%      { transform: rotateZ(var(--shinAngle)) rotateX(-30deg); }
    }
  }

  .foot {
    animation: footWalk $speed var(--footDelay, 0s) infinite ease-in-out;

    @keyframes footWalk {
      0%, 100% { transform: rotateX(70deg); }
      25%, 50% { transform: rotateX(90deg); }
      75% { transform: rotateX(100deg); }
    }
  }

  .shadow {
    animation:
      shadowWalk $speed infinite ease-in-out,
      shadowWalk2 $speed infinite ease-in-out;

    @keyframes shadowWalk {
      0%, 100% { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(1px - 17em)) rotateZ(-80deg); }
      50%      { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(1px - 17em)) rotateZ( 80deg); }
    }
    @keyframes shadowWalk2 {
      0%, 50%, 100% { width: 20em; }
      25%, 75%      { width: 14em; }
    }
  }

  .floor {
    animation: floorWalk $speed infinite linear;

    @keyframes floorWalk {
      to { background-position-y: -24em; }
    }
  }
}

#state3:checked ~ .scene {

  $speed: 1.5s;

  .head {
    transform: rotateX(-15deg);
  }

  .torso {
    animation: torsoRun $speed infinite ease-in-out;

    @keyframes torsoRun {
      0%, 50%, 100% { transform: translateY(1.3em) rotateX(-10deg); }
      25%, 75%      { transform: translateY(0em)   rotateX(-10deg); }
    }
  }

  .arm {
    animation: armRun $speed var(--armDelay, 0s) infinite ease-in-out;

    @keyframes armRun {
      0%, 100% { transform: rotateZ(var(--armAngle)) rotateX(-45deg); }
      50%      { transform: rotateZ(var(--armAngle)) rotateX( 45deg); }
    }

    &.left { --armDelay: #{$speed * -0.95}; }
    &.right { --armDelay: #{$speed * -0.45}; }
  }

  .hand {
    animation: handRun $speed var(--armDelay, 0s) infinite ease-in-out;

    @keyframes handRun {
      0%, 100% { transform: rotateZ(var(--handAngle)) rotateX(45deg); }
      50%      { transform: rotateZ(var(--handAngle)) rotateX(60deg); }
    }
  }

  .leg {
    animation: legRun $speed var(--legDelay, 0s) infinite ease-in-out;

    @keyframes legRun {
      0%, 100% { transform: rotateZ(var(--legAngle)) rotateX( 60deg); }
      50%      { transform: rotateZ(var(--legAngle)) rotateX(-45deg); }
    }

    &.right {
      --legDelay: #{$speed / -2};
      --shinDelay: #{$speed * -0.35};
    }
    &.left {
      --shinDelay: #{$speed * -0.85};
    }
  }

  .shin {
    animation: shinRun $speed var(--shinDelay, 0s) infinite ease-in;

    @keyframes shinRun {
      0%, 25%, 100% { transform: rotateZ(var(--shinAngle)) rotateX(0deg); }
      50%, 65%      { transform: rotateZ(var(--shinAngle)) rotateX(-60deg); }
    }
  }

  .foot {
    animation: footRun $speed var(--shinDelay, 0s) infinite ease-in-out;

    @keyframes footRun {
      0%, 100% { transform: rotateX(60deg); }
      25%, 50% { transform: rotateX(90deg); }
      75% { transform: rotateX(100deg); }
    }
  }

  .shadow {
    animation:
      shadowRun $speed infinite ease-in-out,
      shadowRun2 $speed infinite ease-in-out;

    @keyframes shadowRun {
      0%, 100% { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(1px - 17em)) rotateZ(-80deg); }
      50%      { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(1px - 17em)) rotateZ( 80deg); }
    }
    @keyframes shadowRun2 {
      0%, 50%, 100% { width: 24em; }
      25%, 75%      { width: 14em; }
    }
  }

  .floor {
    animation: floorRun $speed infinite linear;

    @keyframes floorRun {
      to { background-position-y: -32em; }
    }
  }
}

.rotateBtn {
  position: absolute;
  left: 0; top: -1em;
  width: 3em; height: 3em;
  background: none;
  border: solid #000a;
  border-width: 0 0 8px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.25s;
  animation: btnSwing 0.2s infinite ease-in-out alternate paused;

  @keyframes btnSwing {
    from { transform: translateX(-5%) rotateZ(var(--rz)); }
    to   { transform: translateX( 5%) rotateZ(var(--rz)); }
  }

  &:hover {
    animation-play-state: running;
  }

  &:active {
    border-color: #000;
  }

  &#turnLeft {
    transform: rotate(45deg);
    --rz: 45deg;
    left: -16em;
  }

  &#turnRight {
    transform: rotate(-135deg);
    --rz: -135deg;
    left: 14em;
  }
}

.cameraRotate {

  &_left {
    animation: sceneRotateX 8s -0.5s infinite linear paused;
  }

  &_right {
    animation: sceneRotateX 8s infinite linear paused reverse;
  }

  @keyframes sceneRotateX {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(-360deg); }
  }
}

#turnLeft:active ~ .cameraRotate_left,
#turnRight:active ~ .cameraRotate_left .cameraRotate_right {
  animation-play-state: running;
}

.stickman {
  position: absolute;

  & * {
    position: absolute;
  }
}

i {
  display: block;
  height: 100%;
  left: -0.5em; top: 0;
  width: 1em; height: 100%;
  border-radius: 0.5em;
  background-image: linear-gradient(#444, #222);

  $count: 6;
  @for $i from 0 to $count {
    &:nth-child(#{$i + 1}) {
      transform: rotateY(360deg / $count * $i / 2);
    }
  }
}

.head {
  transform-origin: bottom;

  & > i {
    left: -1.75em; top: -5em;
    width: 3.5em; height: 5em;
    background-image: linear-gradient(#666, #0007);
    border-radius: 50% / 40% 40% 60% 60%;

    $count: 12;
    @for $i from 0 to $count {
      &:nth-child(#{$i + 1}) {
        transform: rotateY($i * 15deg);
      }
    }
  }
}

.torso {
  top: -5em;
  height: 10em;
  transform-origin: bottom;
}

.arm {
  height: 6em;
  transform-origin: center 0.5em;
  transform: rotateZ(var(--armAngle));

  &.left { --armAngle: 20deg; }
  &.right { --armAngle: -20deg; }
}

.hand {
  top: calc(100% - 1em);
  height: 5em;
  transform-origin: center 0.5em;
  transform: rotateZ(var(--handAngle));

  .left  & { --handAngle: -15deg; }
  .right & { --handAngle: 15deg; }
}

.leg {
  top: calc(100% - 1em);
  height: 7em;
  transform-origin: center 0.5em;
  transform: rotateZ(var(--legAngle, 0deg));

  &.left { --legAngle: 12deg; }
  &.right { --legAngle: -12deg; }
}

.shin {
  top: calc(100% - 1em);
  height: 7em;
  transform-origin: center 0.5em;
  transform: rotateZ(var(--shinAngle));

  .left & { --shinAngle: -10deg; }
  .right & { --shinAngle: 10deg; }
}

.foot {
  top: calc(100% - 1em);
  height: 2em;
  transform-origin: center 0.5em;
  transform: rotateX(90deg);
}

.shadow {
  width: 12em; height: 12em;
  background-image: radial-gradient(#0004, #0000 66%);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(1px - 17em));
}

.background {
  position: absolute;

  & > div {
    position: absolute;
    left: -1px; top: -25em;
    width: 2px; height: 50em;
    background-image: linear-gradient(#0000, #fff, #0000);
    transform: rotateY(var(--ry)) translateZ(-24em);
    backface-visibility: hidden;

    $count: 24;
    @for $i from 0 to $count {
      &:nth-child(#{$i + 1}) {
        --ry: #{360deg / $count * $i};
      }
    }
  }
}

.floor {
  position: absolute;
  top: 17em;
  width: 32em; height: 32em;
  transform: translate(-50%, -50%) rotateX(90deg);
  background-image: repeating-linear-gradient(#eee 0, #fff 3em, #eee 4em);
  box-shadow: 0 0 2em #0007 inset;
  border-radius: 50%;
  transform-style: preserve-3d;

  &::before {
    content: '';
    position: absolute;
    left: -50%; top: -50%;
    width: 200%; height: 200%;
    background-image: radial-gradient(#0007, #0000 50%);
    transform: translateZ(-2em);
  }
}