#cursorField {
  position: relative;
  height: stretch;
  width: 100%;
  pointer-events: none;
  cursor: none;
}

.cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  transition:
    left 0.05s linear,
    top 0.05s linear;
}

.shape-square {
  border-radius: 2px;
}
.shape-circle {
  border-radius: 50%;
}
.shape-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.shape-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape-star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
.shape-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.shape-octagon {
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}
.shape-trapezoid {
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}

.cursor-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66.6667%;
  height: 66.6667%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sonar {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: sonarExpand 0.8s ease-out forwards;
}

@keyframes sonarExpand {
  from {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  to {
    width: 120px;
    height: 120px;
    opacity: 0;
  }
}

.cursor.spin {
  animation: cursorSpin 0.2s ease-in-out;
}

@keyframes cursorSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.cursor.jump {
  animation: cursorJump 0.3s ease;
}

@keyframes cursorJump {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  40% {
    transform: translate(-50%, -50%) translateY(-14px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

.key-container {
  position: absolute;
  pointer-events: none;
  transition:
    left 0.05s linear,
    top 0.05s linear;
}

.key-letter {
  position: absolute;
  top: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, calc(-100% - 20px));
  transition: left 0.15s ease;
  animation:
    keyFadeUp 0.2s ease-out forwards,
    keyFadeOut 0.3s ease-in 4.7s forwards;
}

@keyframes keyFadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 20px));
  }
}

@keyframes keyFadeOut {
  to {
    opacity: 0;
  }
}

.key-letter.clearing {
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  transform: translate(-50%, calc(-100% - 20px)) scale(0);
  opacity: 0;
}