// variables for stepping visibility lines
$max-val:   0.8;
$step:      0.2;

/*
========================
1. Hero: Circle & lines
   total animation time: 4.59s/4.59s
========================
*/

.hero-01-group {
    margin-top: 95px;
    position: relative;
}

/* -----------------
    CIRCLE
    total animation time: 4.32s
----------------- */

// Show & hide CIRCLE
@keyframes hero1-circle-show-hide {
    0% {
        transform: scale(0);
    }
    30% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
.hero-01__circle {
    z-index: 6;
    position: absolute;
    right: 0;
    top: 0;
    width: 449px;
    height: 449px;
    background-color: $cr-brand-primary;
    border-radius: 50%;
    transform: scale(0);

    //transform: scale(1);

    .main-animation-start & {
        animation-name: hero1-circle-show-hide;
        animation-duration: $animation-speed * 16 /*4.32s*/;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
}


/* -----------------
    LINES on the LEFT
    total animation time: 4.59s
----------------- */

// Show lines
@keyframes hero1-lines-left--show {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(50vw, 0, 0);
    }
}
// @extend: lines
.hero-01__line {
    position: absolute;
    top: 30%;
    left: 0;
    width: 402px;
    height: 60px;
    background-color: $font-cr-tertiary;
    transform: translate3d(0,0,0);

    //transform: translate3d(50vw, 0, 0);

    .main-animation-start & {
        animation-name: hero1-lines-left--show;
        animation-duration: $animation-speed * 2; // 0.54s
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
}

// Step animation delay for LINES on the LEFT
@for $i from 0 through ceil($max-val/$step) {
    $value: ($i - 1) * $step + $step;
    .hero-01__line-#{$i} {
        @extend .hero-01__line;
        top: 80px + 97px * $i;
        .main-animation-start & {
            animation-delay: $value + s;
        }
    }
}

// Hide group lines
@keyframes hero1-lines-left--hide {
    70% {
        transform: rotate(-12deg) translate3d(-50vw,0,0);
    }
    100% {
        transform: rotate(-12deg) translate3d(70vw,0,0);
    }
}
.hero-01__group-line--l {
    position: absolute;
    top: 0;
    right: 0;
    left: -25px;
    bottom: 0;
    z-index: 6;
    transform: rotate(-12deg) translate3d(-50vw,0,0);
    .main-animation-start & {
        animation-name: hero1-lines-left--hide;
        animation-duration: $animation-speed * 17;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
}


/* -----------------
    LINES on the RIGHT
    total animation time: 4.59s
----------------- */

// Show lines
@keyframes hero1-lines-right--show {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50vw, 80px, 0);
    }
}

// @extend: lines
.hero-01__line--r {
    @extend .hero-01__line;
    left: 100%;
    z-index: 6;
    width: 83px;

    //transform: translate3d(-50vw, 80px, 0);
    .main-animation-start & {
        animation-name: hero1-lines-right--show;
        animation-duration: $animation-speed * 2;
    }
}
.hero-01__line-1--r {
    width: 166px;
}

// Step animation delay for lines on the RIGHT
@for $i from 0 through ceil($max-val/$step) {
    $value: ($i - 1) * $step + $step;
    .hero-01__line-#{$i}--r {
        @extend .hero-01__line--r;
        top: 97px * $i;
        .main-animation-start & {
            animation-delay: $value + s;
        }
    }
}

// Hide lines
@keyframes hero1-lines-right-hide {
    70% {
        transform: rotate(-12deg) translate3d(52vw,0,0);
    }
    100% {
        transform: rotate(-12deg) translate3d(-50vw,0,0);
    }
}
.hero-01__group-line--r {
    position: absolute;
    z-index: 5;
    top: 5px;
    right: 100px;
    left: 0;
    bottom: 0;
    transform: rotate(-12deg) translate3d(52vw,0,0);
    .main-animation-start & {
        animation-name: hero1-lines-right-hide;
        animation-duration: $animation-speed * 17;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
}


/*
========================
2. Hero: Circles
   total animation time: 4.32s/9.18s
========================
*/

$animation-delay-circles: $animation-speed * 18; // 4.86s: Delay till animation "First Hero" end

.hero-02-holder {
    width: 631px;
    height: 646px;
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
}

// @extend selector for all circles:
.hero-02__circle {
    position: absolute;
    width: 306px;
    height: 306px;
    border-radius: 50%;
    background-color: $font-cr-tertiary;
    transform: scale(0);
}

.hero-02__circle-3 {
    @extend .hero-02__circle;
    bottom: 0;
    left: 0;
    .main-animation-start & {
        animation:
            hero-02-circle-show ($animation-speed * 3)/*0.81s*/ $animation-delay-circles/*4.86s*/ ease-out forwards,
            hero-02-circle-3-rotate ($animation-speed * 7)/*1.89s*/ ($animation-delay-circles + $animation-speed * 6)/*6.48s*/ ease-out forwards
        ;
    }
}

.hero-02__circle-2 {
    @extend .hero-02__circle;
    background-color: $cr-brand-primary;
    right: 0;
    top: 0;
    .main-animation-start & {
        animation:
            hero-02-circle-show ($animation-speed * 3)/*0.81s*/ ($animation-delay-circles + $animation-speed)/*5.13s*/ ease-out forwards,
            hero-02-circle-2-rotate ($animation-speed * 7)/*1.89s*/ ($animation-delay-circles + $animation-speed * 8)/*7.02s*/ ease-out forwards
        ;
    }
}

.hero-02__circle-1 {
    @extend .hero-02__circle;
    left: 0;
    top: 0;
    .main-animation-start & {
        animation:
            hero-02-circle-show ($animation-speed * 3)/*0.81s*/ ($animation-delay-circles + $animation-speed * 2)/*5.4s*/ ease-out forwards,
            hero-02-circle-1-rotate ($animation-speed * 7)/*1.89s*/ ($animation-delay-circles + $animation-speed * 7)/*6.75s*/ ease-out forwards
        ;
    }
}

// Frames for showing circles
@keyframes hero-02-circle-show {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

// Frames for rotate circles
@keyframes hero-02-circle-1-rotate {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(100%) translateY(34px);
    }
    80% {
        transform: translateY(100%) translateY(34px);
    }
    100% {
        transform: translateY(100%) translateY(34px) scale(0);
    }
}

@keyframes hero-02-circle-2-rotate {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-100%) translateX(-20px);
    }
    70% {
        transform: translateX(-100%) translateX(-20px);
    }
    100% {
        transform: translateX(-100%) translateX(-20px) scale(0);
    }
}

@keyframes hero-02-circle-3-rotate {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(100%) translateX(20px);
    }
    85% {
        transform: translateX(100%) translateX(20px);
    }
    100% {
        transform: translateX(100%) translateX(20px) scale(0);
    }
}

/*
========================
3. Hero: Vertical curves
   total animation time:
========================
*/

$animation-delay-curves: $animation-speed * 34; // 9.18s: Delay till animation "First Hero" end
//$animation-delay-curves: $animation-speed * 1; // 13.23s: Delay till animation "First Hero" end

.icon-curve-orig {
    @include ycenter;
    z-index: 5;
    transform: translateY(-50%) translateY(-34px) scaleY(1);
    left: 160px;
    fill: none;
    stroke: $font-cr-tertiary;
    stroke-width: 75px;
    width: auto;
    height: 1052px;
    min-height: 100vh;
    @include media('>=widescreen') {
        transform: translateY(-50%) translateY(-34px) scaleY(1.2);
        stroke-width: 87px;
        left: 20px;
    }
    body:not(.edge):not(.ie) & {
        stroke-dasharray: 1403px;
        stroke-dashoffset: -1403px;
    }
    .main-animation-start & {
        animation: dash $animation-speed * 10 $animation-delay-curves ease-out alternate;
    }
}

.icon-curve-orig2 {
    left: 350px;
    transform: translateY(-50%) translateY(-92px) scaleY(-1);
    stroke: $cr-brand-primary;
    @include media('>=widescreen') {
        transform: translateY(-50%) translateY(-92px) scaleY(-1.2);
        left: 280px;
    }
    .main-animation-start & {
        animation: dash $animation-speed * 10 $animation-delay-curves ease-out alternate;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1403px;
    }
    40% {
        stroke-dashoffset: 0;
    }
    60% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 1403px;
    }
}

/*
========================
4. Hero: Shapes
   total animation time:
========================
*/

$animation-delay-figures: $animation-speed * 45; // 12.15s: Delay till animation "First Hero" end

.hero-curves {
    position: absolute;
    left: 0;
    &:before {
        @include media('>=1180px') {
            @include anim($dur: $animation-speed * 11, $delay: $animation-speed * 5);
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 91px;
            background-color: rgba($font-cr-tertiary, .02);
            width: 1px;
            z-index: 20;
            transform-origin: 50% 0;
            transform: scaleY(0);
        }
        .is-loaded & {
            transform: scaleY(1);
        }
    }
    &.animation-end {
        visibility: hidden;
        opacity: 0;
    }
    &--top {
        bottom: -60px;
        z-index: 1;
        .hero-curve--white {
            color: $font-cr-tertiary;
        }
        .hero-curve {
            &--white {
                animation-delay: $animation-delay-figures + $animation-speed * 1.5;
            }
            &--black {
                animation-delay: $animation-delay-figures + $animation-speed * 6.25;
            }
        }
    }
    &--middle {
        bottom: -270px;
        z-index: 2;
        .hero-curve--white {
            color: $cr-brand-primary;
        }
        .hero-curve {
            &--white {
                animation-delay: $animation-delay-figures + $animation-speed * 0.75;
            }
            &--black {
                animation-delay: $animation-delay-figures + $animation-speed * 5.5;
            }
        }
    }
    &--bottom {
        bottom: -530px;
        z-index: 3;
        .hero-curve--white {
            color: $font-cr-tertiary;
        }
        .hero-curve {
            &--white {
                animation-delay: $animation-delay-figures;
            }
            &--black {
                animation-delay: $animation-delay-figures + $animation-speed * 4.75;
            }
        }
    }
}

.hero-curve {
    width: 442px;
    height: 734px;
    position: relative;
    z-index: -1;

    animation-duration: $animation-speed;
    animation-fill-mode: forwards;
    &--white {
        transform: translate3d(0,0,0) scale(.9);
    }
    &--black {
        position: absolute;
        left: 0;
        top: 0;
        color: $cr-brand-secondary;
        stroke-width: 2px;
        z-index: 2;
    }
}

$curves: 3;
$increment: 5;
$transform-val: -5%;

@for $i from 1 through $curves {
    $transform-val: $transform-val - $increment;

    .hero-curve-#{$i} {
        .main-animation-start & {
            animation-name: curve-#{$i};
        }
    }
    @keyframes curve-#{$i} {
        0% {
            z-index: 1;
            transform: translateY(0) scale(1);
        }
        100% {
            z-index: 1;
            transform: translateY($transform-val);
        }
    }
}


/*
========================
General Hero: Circle & lines
   for mobile & non-support browsers
========================
*/

.icon-hero {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;

    transform: scale(.75);
    opacity: 0;
    visibility: hidden;
    @include media('<phablet') {
        @include xcenter;
        width: 376px;
        height: 232px;
        margin-left: -44px;
    }
    @include media('>=phablet') {
        left: 0;
        top: 0;
    }
    @include media('>=desktop') {
        top: 10vh;
        width: 813px;
        height: 498px;
    }
    .is-loaded & {
        @include anim($dur: $animation-speed * 2);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        @include media('<phablet') {
            transform: translateX(-50%) scale(1);
        }
    }
}

.ie .animation-hero__icon {
    > *:not(.icon-hero) {
        display: none !important;
    }
    .icon-hero {
        display: block !important;
    }
}