Pure CSS dancing pineapple

Click or tap anywhere on the screen to show

HTML

<div class="container">
  <div class="melon">
    <div class="body-upper">
      <div class="eyes">
        <div class="eye eye1"></div>
        <div class="eye eye2"></div>
      </div>
      <div class="mouth"></div>
      <div class="arm arm1"></div>
      <div class="arm arm2"></div>
    </div>
    <div class="body-middle"></div>
    <div class="body-bottom"></div>
    <div class="leg leg1">
      <div class="upper-leg"></div>
      <div class="lower-leg"></div>
      <div class="foot"></div>
    </div>
    <div class="leg leg2">
      <div class="upper-leg"></div>
      <div class="lower-leg"></div>
      <div class="foot"></div>
    </div>
  </div>
</div>
<div class="overlay red" tabindex="0"></div>

SCSS

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}
@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@function strip-units($value) {
  @return $value / ($value * 0 + 1);
}

body {
  background-color: #ff6465;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; min-height: 100vh;
  position: relative;
}

$container_size: 300px;
$melon_size: 200px;
$overlay_color: #ff6465;

$upper_body_size: $melon_size * .85;
$upper_body_color: #ff676a;
$upper_body_color2: #f82b53;
$middle_body_size: $melon_size * .95;
$bottom_body_size: $melon_size;

$shin_height: $upper_body_size * .12;

$limb_color: #000;
$limb_thickness: 3px;

@mixin rounded_triangle($size, $color) {
  width: 0; height: 0;

  border-style: solid;
  border-width: 0 ($size / 2) $size ($size / 2);
  border-color: transparent;
  border-bottom-color: $color;
  border-radius: 50%;
}

.container {
  margin: 50px auto;
  background-color: #cbf6fd;
  height: $container_size;
  width: 100%;
  position: relative;
}

.overlay {
  height: 100%; width: 100%;
  position: absolute;
  z-index: 5;
  background-color: transparent;
  cursor: pointer;
  &:before, &:after {
    content: '';
    height: 50%; width: 100%;
 ...