@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-fancy-text-before,
.dnetor-fancy-text-animated b {
    line-height: inherit;
}

.dnetor-fancy-text-animated {
    position: relative;
    color: $accent_color;
    b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 0;
    }

    .dnetor-fancy-text-show {
        position: relative;
    }
}

.dnetor-fancy-text-animate-bg {
    .dnetor-fancy-text-animated {
        background: $accent_color;
        color: #fff;
        padding: 0 5px;
    }
}

.dnetor-fancy-text-loading {
    .dnetor-fancy-text-animated {
        overflow: hidden;
        vertical-align: top;

        &:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            background: currentColor;
            z-index: 2;
            -webkit-transition: width 0.3s -0.1s;
            -moz-transition: width 0.3s -0.1s;
            transition: width 0.3s -0.1s;
        }
    }

    .is-loading:after {
        width: 100%;
        @include transition(width 3s);
    }

    b {
        top: 0.2em;
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        top: 0;
    }
}

.dnetor-fancy-text-typing {
    .dnetor-fancy-text-animated {
        padding-left: 0.5rem;
    }
}

.dnetor-fancy-text-zoom-in {
    .dnetor-fancy-text-animated {
        -webkit-perspective: 300px;
        perspective: 300px;
    }

    b {
        opacity: 0;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        -webkit-animation: zoom-in 0.8s;
        -moz-animation: zoom-in 0.8s;
        animation: zoom-in 0.8s;
    }
}

@-webkit-keyframes zoom-in {
    0% {
        opacity: 0.4;
        @include transform(scale(1.3));
    }
    100% {
        opacity: 1;
        @include transform(scale(1));
    }
}

.dnetor-fancy-text-zoom-out {
    b {
        opacity: 0;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        -webkit-animation: star-zoom-out 0.8s;
        -moz-animation: star-zoom-out 0.8s;
        animation: star-zoom-out 0.8s;
    }
}

@keyframes star-zoom-out {
    0% {
        opacity: 0.4;
        @include transform(scale(0.5));
    }
    100% {
        opacity: 1;
        @include transform(scale(1));
    }
}

.dnetor-fancy-text-slider-right {
    b {
        opacity: 0;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        -webkit-animation: slider-right-in 0.6s;
        -moz-animation: slider-right-in 0.6s;
        animation: slider-right-in 0.6s;
    }

    .dnetor-fancy-text-hidden {
        -webkit-animation: slider-right-out 0.6s;
        -moz-animation: slider-right-out 0.6s;
        animation: slider-right-out 0.6s;
    }
}

@-webkit-keyframes slider-right-in {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(10%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes slider-right-in {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
    }
    60% {
        opacity: 1;
        -moz-transform: translateX(10%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@keyframes slider-right-in {
    0% {
        opacity: 0;
        @include transform(translateX(-100%));
    }
    60% {
        opacity: 1;
        @include transform(translateX(10%));
    }
    100% {
        opacity: 1;
        @include transform(translateX(0));
    }
}

@-webkit-keyframes slider-right-out {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    60% {
        opacity: 0;
        -webkit-transform: translateX(110%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
}

@-moz-keyframes slider-right-out {
    0% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
    60% {
        opacity: 0;
        -moz-transform: translateX(110%);
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(100%);
    }
}

@keyframes slider-right-out {
    0% {
        opacity: 1;
        @include transform(translateX(0));
    }
    60% {
        opacity: 0;
        @include transform(translateX(110%));
    }
    100% {
        opacity: 0;
        @include transform(translateX(100%));
    }
}

.dnetor-fancy-text-slider-left {
    b {
        opacity: 0;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        -webkit-animation: slider-left-in 0.6s;
        -moz-animation: slider-left-in 0.6s;
        animation: slider-left-in 0.6s;
    }

    .dnetor-fancy-text-hidden {
        -webkit-animation: slider-left-out 0.6s;
        -moz-animation: slider-left-out 0.6s;
        animation: slider-left-out 0.6s;
    }
}

@keyframes slider-left-in {
    0% {
        opacity: 0;
        @include transform(translateX(100%));
    }
    60% {
        opacity: 1;
        @include transform(translateX(-10%));
    }
    100% {
        opacity: 1;
        @include transform(translateX(0));
    }
}

@keyframes slider-left-out {
    0% {
        opacity: 1;
        @include transform(translateX(0));
    }
    60% {
        opacity: 0;
        @include transform(translateX(-110%));
    }
    100% {
        opacity: 0;
        @include transform(translateX(-100%));
    }
}

.dnetor-fancy-text-slider-top {
    b {
        opacity: 0;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        -webkit-animation: slider-top-in 0.6s;
        -moz-animation: slider-top-in 0.6s;
        animation: slider-top-in 0.6s;
    }

    .dnetor-fancy-text-hidden {
        -webkit-animation: slider-top-out 0.6s;
        -moz-animation: slider-top-out 0.6s;
        animation: slider-top-out 0.6s;
    }
}

@keyframes slider-top-in {
    0% {
        opacity: 0;
        @include transform(translateY(100%));
    }
    60% {
        opacity: 1;
        @include transform(translateY(-10%));
    }
    100% {
        opacity: 1;
        @include transform(translateY(0));
    }
}

@keyframes slider-top-out {
    0% {
        opacity: 1;
        @include transform(translateY(0));
    }
    60% {
        opacity: 0;
        @include transform(translateY(-110%));
    }
    100% {
        opacity: 0;
        @include transform(translateY(-100%));
    }
}

.dnetor-fancy-text-slider-bottom {
    b {
        opacity: 0;
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        -webkit-animation: slider-bottom-in 0.6s;
        -moz-animation: slider-bottom-in 0.6s;
        animation: slider-bottom-in 0.6s;
    }

    .dnetor-fancy-text-hidden {
        -webkit-animation: slider-bottom-out 0.6s;
        -moz-animation: slider-bottom-out 0.6s;
        animation: slider-bottom-out 0.6s;
    }
}

@keyframes slider-bottom-in {
    0% {
        opacity: 0;
        @include transform(translateY(-100%));
    }
    60% {
        opacity: 1;
        @include transform(translateY(10%));
    }
    100% {
        opacity: 1;
        @include transform(translateY(0));
    }
}

@keyframes slider-bottom-out {
    0% {
        opacity: 1;
        @include transform(translateY(0));
    }
    60% {
        opacity: 0;
        @include transform(translateY(110%));
    }
    100% {
        opacity: 0;
        @include transform(translateY(100%));
    }
}

.dnetor-fancy-text-rotate {
    .dnetor-fancy-text-animated {
        -webkit-perspective: 300px;
        perspective: 300px;
    }

    b {
        opacity: 0;
        @include transform-origin(50% 100%);
        @include transform(rotateX(180deg));
    }

    .dnetor-fancy-text-show {
        opacity: 1;
        @include transform(rotateX(0deg));
        -webkit-animation: dnetor-rotate-in 1.2s;
        -moz-animation: dnetor-rotate-in 1.2s;
        animation: dnetor-rotate-in 1.2s;
    }

    .dnetor-fancy-text-hidden {
        @include transform(rotateX(180deg));
        -webkit-animation: dnetor-rotate-out 1.2s;
        -moz-animation: dnetor-rotate-out 1.2s;
        animation: dnetor-rotate-out 1.2s;
    }
}

@-webkit-keyframes dnetor-rotate-in {
    0% {
        -webkit-transform: rotateX(180deg);
        opacity: 0;
    }
    35% {
        -webkit-transform: rotateX(120deg);
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(360deg);
        opacity: 1;
    }
}

@-moz-keyframes dnetor-rotate-in {
    0% {
        -moz-transform: rotateX(180deg);
        opacity: 0;
    }
    35% {
        -moz-transform: rotateX(120deg);
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    100% {
        -moz-transform: rotateX(360deg);
        opacity: 1;
    }
}

@keyframes dnetor-rotate-in {
    0% {
        @include transform(rotateX(180deg));
        opacity: 0;
    }
    35% {
        @include transform(rotateX(120deg));
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    100% {
        @include transform(rotateX(360deg));
        opacity: 1;
    }
}

@-webkit-keyframes dnetor-rotate-out {
    0% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
    35% {
        -webkit-transform: rotateX(-40deg);
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(180deg);
        opacity: 0;
    }
}

@-moz-keyframes dnetor-rotate-out {
    0% {
        -moz-transform: rotateX(0deg);
        opacity: 1;
    }
    35% {
        -moz-transform: rotateX(-40deg);
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    100% {
        -moz-transform: rotateX(180deg);
        opacity: 0;
    }
}

@keyframes dnetor-rotate-out {
    0% {
        @include transform(rotateX(0deg));
        opacity: 1;
    }
    35% {
        @include transform(rotateX(-40deg));
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    100% {
        @include transform(rotateX(180deg));
        opacity: 0;
    }
}