/**
 * thinking in 60 fps
 * dots animate from frame 1–40, then pause from frame 41–60
 *
 * dots 1 and 2 are actual small circles
 *
 * dot 3 is a segment of the stroke of a large circle
 * this segment starts as just a small dot at position 3
 * and then we create "elastic rubber-band-y" effect by:
 * "pulling" the dot (increase `stroke-dasharray` to make it long + decrease `stroke-width` to make it narrow)
 * while also controlling its position (using `stroke-dashoffset`)
 * we then "release" the "pull" when it’s near/at position 1 (revert its `stroke-dasharray` &`stroke-width`)
 */

$viewbox-width: 120;
$effective-width: 92;
$dot-diameter: 16;

.tix-loading-indicator.v4 {
  width: 100%;
  height: 100%;
}

.tix-loading-indicator__dot1.v4,
.tix-loading-indicator__dot2.v4 {
  animation: tix-v4-loading-dot-slide-right 1s infinite;
  animation-timing-function: cubic-bezier(
    0.65,
    0.05,
    0.36,
    1
  ); // easeInOutCubic from easings.co
}

.tix-loading-indicator__dot3.v4 {
  animation: tix-v4-loading-dot-arc-left 1s infinite;
}

@keyframes tix-v4-loading-dot-slide-right {
  // movement finishes by the 40th frame (66% of 60fps)
  // do nothing for the rest 20 frames
  66%,
  100% {
    transform: translateX(($effective-width - $dot-diameter) / 2 * 1px);
  }
}

// manually done by inspecting the actual After Effects video
// and capturing values (by how it looks in the video) every 6 frame
// hence magic numbers
@keyframes tix-v4-loading-dot-arc-left {
  // start as dot on position 3
  0% {
    stroke-dasharray: 0, 999;
    stroke-dashoffset: 0;
    stroke-width: $dot-diameter * 1px;
  }

  // 6th frame
  10% {
    stroke-dasharray: 6, 999;
    stroke-dashoffset: 0;
    stroke-width: $dot-diameter * 0.68px;
  }

  // 12th frame
  20% {
    stroke-dasharray: 33, 999;
    stroke-dashoffset: 0;
    stroke-width: $dot-diameter * 0.5px;
  }

  // 18th frame
  30% {
    stroke-dasharray: 74, 999;
    stroke-dashoffset: -10;
    stroke-width: $dot-diameter * 0.5px;
  }

  // 24th frame
  40% {
    stroke-dasharray: 63, 999;
    stroke-dashoffset: -52;
    stroke-width: $dot-diameter * 0.5px;
  }

  // 30th frame
  50% {
    stroke-dasharray: 23, 999;
    stroke-dashoffset: -96;
    stroke-width: $dot-diameter * 0.5px;
  }

  // 36th frame
  60% {
    stroke-dasharray: 4, 999;
    stroke-dashoffset: -116;
    stroke-width: $dot-diameter * 0.79px;
  }

  // movement finishes by the 40th frame (66% of 60fps)
  // do nothing for the rest 20 frames
  66%,
  100% {
    stroke-dasharray: 0, 999;
    stroke-dashoffset: -119;
    stroke-width: $dot-diameter * 1px;
  }
}