@import 'variables';
@import 'mixins';

.ah-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;

    b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 0;

        &.is-visible {
            position: relative;
        }
    }

    .no-js & b {
        opacity: 0;
        
        &.is-visible {
            opacity: 1;
        }

    }
}

/* -------------------------------- 

xrotate-1 

-------------------------------- */

.ah-headline.rotate-1 {
    
    .ah-words-wrapper {
        perspective: 300px;
    }

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

        &.is-visible {
            opacity: 1;
            transform: rotateX(0deg);
            animation: ah-rotate-1-in 1.2s;
        }

        &.is-hidden {
            transform: rotateX(180deg);
            animation: ah-rotate-1-out 1.2s;
        }
    }
}

@keyframes ah-rotate-1-in {
    0% {
        transform: rotateX(180deg);
        opacity: 0;
    }

    35% {
        transform: rotateX(120deg);
        opacity: 0;
    }

    65% {
        opacity: 0;
    }

    100% {
        transform: rotateX(360deg);
        opacity: 1;
    }
}

@keyframes ah-rotate-1-out {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }

    35% {
        transform: rotateX(-40deg);
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    100% {
        transform: rotateX(180deg);
        opacity: 0;
    }
}

/* -------------------------------- 

xtype 

-------------------------------- */

.ah-headline.type {
    
    .ah-words-wrapper {
        vertical-align: top;
        overflow: hidden;

        &::after {
            /* vertical bar */
            content: '';
            position: absolute;
            right: 0;
            @include center(y);
            height: 90%;
            width: 1px;
            background-color: $color-1;
        }

        &.waiting::after {
            animation: ah-pulse 1s infinite;
        } 

        &.selected {
            background-color: #f0f0f0;

            &::after {
                visibility: hidden;
            }

            b {
                color: $color-1;
            }
        }
    }

    b {
        visibility: hidden;

        &.is-visible {
            visibility: visible;
        }
    }

    i {
        position: absolute;
        visibility: hidden;

        &.in {
            position: relative;
            visibility: visible;
        }
    }
}

@keyframes ah-pulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    40% {
        transform: translateY(-50%) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }
}

/* -------------------------------- 

xrotate-2 

-------------------------------- */

.ah-headline.rotate-2 {

    .ah-words-wrapper {
        perspective: 300px;
    }

    i, em {
        display: inline-block;
        backface-visibility: hidden;
    }

    b {
        opacity: 0;
    }

    i {
        transform-style: preserve-3d;
        transform: translateZ(-20px) rotateX(90deg);
        opacity: 0;

        .is-visible & {
            opacity: 1;
        }

        &.in {
            animation: ah-rotate-2-in .4s forwards;
        }

        &.out {
            animation: ah-rotate-2-out .4s forwards;
        }
    }

    em {
        transform: translateZ(20px);
    }
}

.no-csstransitions .ah-headline.rotate-2 i {
    transform: rotateX(0deg);
    opacity: 0;

    em {
        transform: scale(1);
    }
}

.no-csstransitions .ah-headline.rotate-2 .is-visible i {
    opacity: 1;
}

@keyframes ah-rotate-2-in {
    0% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(90deg);
    }

    60% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(-10deg);
    }

    100% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(0deg);
    }
}

@keyframes ah-rotate-2-out {
    0% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(0);
    }

    60% {
        opacity: 0;
        transform:translateZ(-20px) rotateX(-100deg);
    }

    100% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(-90deg);
    }
}

/* -------------------------------- 

xloading-bar 

-------------------------------- */

.ah-headline.loading-bar {

    span {
        display: inline-block;
        padding: .2em 0;
    }

    .ah-words-wrapper {
        overflow: hidden;
        vertical-align: top;

        &::after {
            /* loading bar */
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            background: $color-2;
            z-index: 2;
            transition: width .3s -0.1s;
        }

        &.is-loading::after {
            width: 100%;
            transition: width 3s;
        }
    }

    b {
        top: .2em;
        opacity: 0;
        transition: opacity .3s;

        &.is-visible {
            opacity: 1;
            top: 0;
        }
    }
}

/* -------------------------------- 

xslide 

-------------------------------- */

.ah-headline.slide {

    span {
        display: inline-block;
        padding: .2em 0;
    }

    .ah-words-wrapper {
        overflow: hidden;
        vertical-align: top;
    }

    b {
        opacity: 0;
        top: .2em;

        &.is-visible {
            top: 0;
            opacity: 1;
            animation: slide-in .6s;
        }

        &.is-hidden {
            animation: slide-out .6s;
        }
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    60% {
        opacity: 1;
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    60% {
        opacity: 0;
        transform: translateY(120%);
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* -------------------------------- 

xclip 

-------------------------------- */

.ah-headline.clip {

    span {
        display: inline-block;
        padding: .2em 0;
    }

    .ah-words-wrapper {
        overflow: hidden;
        vertical-align: top;

        &::after {
            /* line */
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            background-color: $color-1;
        }
    }

    b {
        opacity: 0;

        &.is-visible {
            opacity: 1;
        }
    }
}

/* -------------------------------- 

xzoom 

-------------------------------- */

.ah-headline.zoom {

    .ah-words-wrapper {
        perspective: 300px;
    }

    b {
        opacity: 0;

        &.is-visible {
            opacity: 1;
            animation: zoom-in .8s;
        }

        &.is-hidden {
            animation: zoom-out .8s;
        }
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: translateZ(100px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes zoom-out {
    0% {
        opacity: 1;
        transform: translateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateZ(-100px);
    }
}

/* -------------------------------- 

xrotate-3 

-------------------------------- */

.ah-headline.rotate-3 {

    .ah-words-wrapper {
        perspective: 300px;
    }

    b {
        opacity: 0;
    }

    i {
        display: inline-block;
        transform: rotateY(180deg);
        backface-visibility: hidden;

        .is-visible & {
            transform: rotateY(0deg);
        }

        &.in {
            animation: ah-rotate-3-in .6s forwards;
        }

        &.out {
            animation: ah-rotate-3-out .6s forwards;
        }
    }
}

.no-csstransitions .ah-headline.rotate-3 i {
    transform: rotateY(0deg);
    opacity: 0;
}

.no-csstransitions .ah-headline.rotate-3 .is-visible i {
    opacity: 1;
}

@keyframes ah-rotate-3-in {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes ah-rotate-3-out {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(-180deg);
    }
}

/* -------------------------------- 

xscale 

-------------------------------- */

.ah-headline.scale {

    b {
        opacity: 0;
    }

    i {
        display: inline-block;
        opacity: 0;
        transform: scale(0);

        .is-visible & {
            opacity: 1;
        }

        &.in {
            animation: scale-up .6s forwards;
        }

        &.out {
            animation: scale-down .6s forwards;
        }
    }
}

.no-csstransitions .ah-headline.scale i {
    transform: scale(1);
    opacity: 0;
}

.no-csstransitions .ah-headline.scale .is-visible i {
    opacity: 1;
}

@keyframes scale-up {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-down {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(0);
        opacity: 0;
    }
}

/* -------------------------------- 

xpush 

-------------------------------- */

.ah-headline.push {

    b {
        opacity: 0;

        &.is-visible {
            opacity: 1;
            animation: push-in .6s;
        }

        &.is-hidden {
            animation: push-out .6s;
        }
    }
}

@keyframes push-in {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    60% {
        opacity: 1;
        transform: translateX(10%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes push-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    60% {
        opacity: 0;
        transform: translateX(110%);
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}