$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);

.logo-text {
    fill: $blue;
    font-style: italic;
    font-size: 8rem;
    @include font-light;
}
