@keyframes blinking {
  0% {opacity: 0;}
  50% {opacity: 0;}
  51% {opacity: 1;}
  100% {opacity: 1;}
}

@mixin GenericPulsingStroke($color, $name) {
  @keyframes #{$name} {
    0% {stroke: scale-color($color, $lightness: -50%);}
    50% {stroke: scale-color($color, $lightness: -50%);}
    51% {stroke: scale-color($color, $lightness: 50%);}
    100% {stroke: scale-color($color, $lightness: 50%);}
  }
  animation-name: $name;
}
@mixin GenericPulsingFill($color, $name) {
  @keyframes #{$name} {
    0% {fill: scale-color($color, $lightness: -30%);}
    50% {fill: scale-color($color, $lightness: -30%);}
    51% {fill: scale-color($color, $lightness: 30%);}
    100% {fill: scale-color($color, $lightness: 30%);}
  }
  animation-name: $name;
}

@keyframes OuterMarkerAnim {
  0%    {opacity: 0;}
  33%   {opacity: 0;}
  34%   {opacity: 1;}
  100%  {opacity: 1;}
}

@keyframes MiddleMarkerAnim {
  0%    {opacity: 0}
  10%   {opacity: 0}
  11%   {opacity: 1}
  27%   {opacity: 1}
  28%   {opacity: 0}
  44%   {opacity: 0}
  45%   {opacity: 1}
  100%  {opacity: 1}
}

.BlinkInfinite {
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.Blink9Seconds {
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: 9;
}

.Blink10Seconds {
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: 10;
}

.OuterMarkerBlink {
  animation-name: OuterMarkerAnim;
  animation-duration: 460ms;
  animation-iteration-count: infinite;
}
.MiddleMarkerBlink {
  animation-name: MiddleMarkerAnim;
  animation-duration: 730ms;
  animation-iteration-count: infinite;
}
.InnerMarkerBlink {
  animation-name: blinking;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
}

.RwyAheadAnimation {
  @include GenericPulsingStroke($display-yellow, pulse-yellow-stroke);
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
