$hLineCount: 3;
$vLineCount: 9;
$dLineCount: 3;
$crossHatchCount: 80;
// delay to wait in between animation cycles
$wait: 4s;

@keyframes drawMe {
  to {
    stroke-dashoffset: 0;
  }
}

@mixin drawMe($prefix, $count, $duration, $interval, $delay) {
  .Animated .#{$prefix} {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;      
    animation-name: drawMe;
    animation-duration: $duration;
  }
  @for $i from 0 to $count {
    $itemName: "#{$prefix}#{$i}";
    .#{$itemName}{
      animation-delay: $interval * $i + $delay;
    }
  }
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@mixin appear($className, $duration, $delay) {
  .Animated .#{$className} {
    opacity: 0;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;      
    animation-name: appear;
    animation-duration: $duration;
    animation-delay: $delay;
  }
}

.hl, .vl, .cc, .cc, .cs1_, .cs2_, .letter, .s1-ch, .s2-ch{
  // display: none;
}

@include drawMe("hl", $hLineCount, 400ms, 200ms, 0ms);
@include drawMe("vl", $vLineCount, 200ms, 100ms, 800ms);
@include drawMe("dl", $dLineCount*2, 300ms, 200ms, 2000ms);
@include drawMe("cc", 3, 400ms, 200ms, 3000ms);
@include drawMe("cs1_", 3, 400ms, 200ms, 3500ms);
@include drawMe("cs2_", 3, 400ms, 200ms, 4000ms);
@include drawMe("letter", 3, 600ms, 600ms, 5000ms);

// with crosshatching
// @include drawMe("c-ch", $crossHatchCount, 50ms, 20ms, 6000ms);
// @include drawMe("s1-ch", $crossHatchCount, 50ms, 20ms, 7000ms);
// @include drawMe("s2-ch", $crossHatchCount, 50ms, 20ms, 8000ms);

// @include appear("theStateOf", 200ms, 9000ms);
// @include appear("year", 200ms, 9200ms);

// without crosshatching
// .ch{
//   display: none;
// }
@include appear("theStateOf", 200ms, 6800ms);
@include appear("year", 200ms, 7000ms);