/*

Mixins

*/
@mixin centerV {
    top: 50%;
    transform: translateY(-50%);
}
@mixin centerH {
    left: 50%;
    transform: translateX(-50%);
}
@mixin centerVH {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
@mixin square-ratio {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
@mixin anim($className, $animationName, $duration, $delay) {
    .Logo--animated .#{$className} {
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-name: $animationName;
        animation-duration: $duration;
        animation-delay: $delay;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        @content;
    }
}

/*

Logo

*/
@mixin logo($s) {

    $offset: 96px * $s;

    .Logo {
        text-shadow: none;
        width: 800px * $s;
        height: 400px * $s;
        position: relative;
        & > * {
            position: absolute;
        }
        /*

        Letters

        */
        .letter {
            font-size: 288px * $s;
            color: $pink;
            @include font-bold;
            line-height: 1;
            // fill: $pink;
        }
        .c {
            @include centerV;
            left: $offset;
            text-shadow: 10px * $s 10px * $s 0px $blue;
        }
        .s1 {
            @include centerVH;
        }
        .s2 {
            @include centerV;
            right: $offset;
            div {
                text-align: right;
                // background: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><g><circle r="10" x="0" y="0" /></g></svg>');
                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 #{50 * $s} #{50 * $s}" xml:space="preserve" height="#{10px * $s}" width="#{10px * $s}"><g ><circle r="#{15 * $s}" cx="#{15 * $s}" cy="#{15 * $s}" fill="%23EC2F95"/></g></svg>');
                background-clip: text;
                color: transparent;
            }
        }
        /*

        Text

        */
        .text {
            font-size: 48px * $s;
            font-style: italic;
            color: $teal;
        }
        .stateof {
            top: 0px;
            left: 0px;
        }
        .year {
            bottom: 0px;
            right: 0px;
            text-align: right;
        }

        /*

    Triangle

    */
        .triangle {
            width: 144px * $s;
            top: 180px * $s;
            left: $offset - 80px * $s;
            .inner {
                width: 100%;
                border: 100px * $s solid transparent;
                border-bottom-color: #3c52d1;
                border-width: 0 72px * $s 100px * $s 72px * $s;
            }
        }
        /*

    Stripes

    */
        .stripe {
            height: 5px * $s;
            width: 100px * $s;
            background: $teal;
        }
        .stripe1 {
            top: 248px * $s;
            left: 96px * $s;
        }
        .stripe2 {
            top: 268px * $s;
            left: 88px * $s;
        }
        .stripe3 {
            top: 288px * $s;
            left: 80px * $s;
        }
        .stripe4 {
            top: 308px * $s;
            left: 88px * $s;
        }
        /*

    Blobs

    */
        .blobs {
            filter: url('#blob');
            left: 100px * $s;
            top: 120px * $s;
            transform: rotate(-20deg);
            width: 400px * $s;
            height: 200px * $s;
            @include flex-center;
        }

        .blob {
            width: 50%;
            height: 100%;
            background: $teal;
            border-radius: 50%;
        }
        .blob1 {
        }
        .blob2 {
            transform: translateX(-40px * $s);
        }

        /*

        Circle

        */
        .circle {
            width: 256px * $s;
            top: 50%;
            left: calc(50% - #{10px * $s});
            .inner {
                transform: translateX(-50%) translateY(-50%);
                div {
                    @include square-ratio;
                    border: 10px * $s dashed $blue;
                    border-radius: 100%;
                    box-sizing: content-box;
                }
            }
        }
        /*

        Frame

        */
        .frame {
            width: 216px * $s;
            right: $offset - 8px * $s;
            top: 50%;
            .inner {
                transform: translateY(-50%) rotate(45deg);
                div {
                    border: 10px * $s solid $blue;
                    @include square-ratio;
                    box-sizing: content-box;
                    box-shadow: 7px * $s 7px * $s 0px 0px $teal;
                }
            }
        }
        /*

        Other Elements

        */
        .tilde {
            font-size: 112px * $s;
            line-height: 1;
        }
        .tilde1 {
            top: 80px * $s;
            right: $offset - 56px * $s;
        }
        .tilde2 {
            top: 100px * $s;
            right: $offset - 64px * $s;
        }
        .tilde3 {
            top: 120px * $s;
            right: $offset - 72px * $s;
        }
    }

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

    @keyframes pop {
        0% {
            opacity: 0;
            transform: scale(0);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes popspin {
        0% {
            transform: scale(0) rotate(0);
        }
        50% {
            transform: scale(1.2) rotate(800deg);
        }
        100% {
            transform: scale(1) rotate(720deg);
        }
    }

    @keyframes slideleft {
        0% {
            opacity: 0;
            transform: translateX(40px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }
    @keyframes slideright {
        0% {
            opacity: 0;
            transform: translateX(-40px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    @keyframes slidetop {
        0% {
            opacity: 0;
            transform: translateY(-200px) rotate(180deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0px) rotate(0deg);
        }
    }
    @keyframes blob {
        0% {
            opacity: 0;
            transform: translateX(-100%);
        }
        20% {
            opacity: 1;
        }
        80% {
            opacity: 1;
            transform: translateX(-20px);
        }
        100% {
            opacity: 1;
            transform: translateX(-40px);
        }
    }

    // letters
    @include anim('c>div', 'pop', 300ms, 100ms) {
        opacity: 0;
        transform: scale(0);
    }
    @include anim('s1>div', 'pop', 300ms, 200ms) {
        opacity: 0;
        transform: scale(0);
    }
    @include anim('s2>div', 'pop', 300ms, 300ms) {
        opacity: 0;
        transform: scale(0);
    }

    // circle
    @include anim('circle>div>div', 'popspin', 600ms, 500ms) {
        transform: scale(0);
    }

    // frame
    @include anim('frame', 'slidetop', 600ms, 800ms) {
        transform: scale(0) translateY(-200px * $s) rotate(180deg);
    }

    // blob
    @include anim('blob1', 'pop', 300ms, 900ms) {
        opacity: 0;
        transform: scale(0);
    }
    @include anim('blob2', 'blob', 500ms, 1100ms) {
        opacity: 0;
        transform: translateX(-100%);
    }

    // stripes
    @include anim('stripe1', 'slideleft', 400ms, 1400ms) {
        opacity: 0;
        transform: translateX(40px * $s);
    }
    @include anim('stripe2', 'slideleft', 400ms, 1500ms) {
        opacity: 0;
        transform: translateX(40px * $s);
    }
    @include anim('stripe3', 'slideleft', 400ms, 1600ms) {
        opacity: 0;
        transform: translateX(40px * $s);
    }
    @include anim('stripe4', 'slideleft', 400ms, 1700ms) {
        opacity: 0;
        transform: translateX(40px * $s);
    }

    // tildes
    @include anim('tilde1', 'slideright', 400ms, 1900ms) {
        opacity: 0;
        transform: translateX(-40px * $s);
    }
    @include anim('tilde2', 'slideright', 400ms, 2000ms) {
        opacity: 0;
        transform: translateX(-40px * $s);
    }
    @include anim('tilde3', 'slideright', 400ms, 2100ms) {
        opacity: 0;
        transform: translateX(-40px * $s);
    }

    // triangle
    @include anim('triangle', 'popspin', 600ms, 2800ms) {
        transform: scale(0);
    }

    // text
    @include anim('stateof', 'appear', 300ms, 2200ms) {
        opacity: 0;
    }
    @include anim('year', 'appear', 300ms, 2500ms) {
        opacity: 0;
    }
}

.Logo__Container{
    overflow: hidden;
    @include small{
        @include logo(0.3);

    }
    @include medium{
        @include logo(0.5);

    }
    @include large{
        @include logo(0.8);
    }
}

.Logo__Container{
    @include flex-center;
    margin-bottom: $spacing * 2;
}