/*txt-frame: エフェクト内容*/
.txt-frame {
    &.is-active {
        animation: ;
    }
}

/* 移動方向: ltr/rtl */
.dir-ltr,
/* Left To Right（左から右へ移動） */
.dir-rtl,
/* Right To Left */
.dir-ttb,
/* Top To Bottom */
.dir-btt {}

/* Bottom To Top */

/*txt-fade: フェードイン*/
.txt-fade {
    opacity: 0;

    &.is-active {
        animation: txtFade 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
        animation-delay: 0.7s;
    }
}

@keyframes txtFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*txt-slide: スライドイン*/
.txt-slide {
    &.dir-ltr.is-active {
        animation: txtSlideLtr 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    &.dir-rtl.is-active,
    &.is-active {
        animation: txtSlideRtl 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    &.dir-ttb.is-active {
        animation: txtSlideTtb 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    &.dir-btt.is-active {
        animation: txtSlideBtt 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
}

@keyframes txtSlideLtr {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes txtSlideRtl {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes txtSlideTtb {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

@keyframes txtSlideBtt {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

/*txt-zoom: ズームアップ*/
.txt-zoom {
    &.is-active {
        animation: txtZoom 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
}

@keyframes txtZoom {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

/* txt-shine: 光る演出 */
.txt-shine {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(80deg, rgb(28, 28, 28) 33.33%, rgb(0, 56, 181), rgb(255, 245, 234), rgb(255, 178, 3), rgb(242, 112, 0), rgb(0, 56, 181), rgba(238, 238, 238, 0) 60%);
    background-size: 250% 100%;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-position: 100% 0;
    transition: none;

    &.is-active {
        animation: txtShine 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
}

@keyframes txtShine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -150% 0;
    }
}

/* txt-reveal: リビール*/
.txt-reveal {
    position: relative;
    color: transparent;
    overflow: hidden;
    width: fit-content;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 100%;
        bottom: 0;
        background: #333;
        z-index: 1;
    }

    &.is-active {
        animation: txt-reveal--text 0.2s 0.5s forwards;

        &::before {
            animation: txt-reveal--mask 1s forwards;
        }
    }
}

@keyframes txt-reveal--text {
    100% {
        color: inherit;
    }
}

@keyframes txt-reveal--mask {
    50% {
        left: 0%;
        right: 0%;
    }

    100% {
        left: 100%;
        right: 0%;
    }
}

/* txt-crop: マスクで切り出して登場 */
.txt-crop {
    overflow: hidden;
    display: inline-block;
    background: linear-gradient(45deg, #000 50%, transparent 50%);
    background-size: 200% 100%;
    color: transparent;
    background-clip: text;

    &.is-active {
        animation: cropReveal 1.5s ease forwards;
    }
}

@keyframes cropReveal {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* txt-fill: 文字で切り抜き */
.txt-fill {
    background: linear-gradient(90deg, #f06, #0ff, #f06);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    color: transparent;

    &.is-active {
        animation: fillFlow 3s linear infinite;
    }
}

@keyframes fillFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* txt-bgslide: 背景色が横に流れる */
.txt-bgslide {
    position: relative;
    display: inline-block;
    color: #fff;
    overflow: hidden;
    padding: 0.1em 0.6em;
    z-index: 1;

    &.is-active::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #f06, #0ff, #f06);
        background: #f06;
        transform: translateX(-100%);
        animation: bgslideIn 1.5s ease forwards;
        z-index: -10;
    }
}

@keyframes bgslideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

.txt-typing {
    height: 1.2em;
    /*消すと数行が1行に整理されていく動き*/
    overflow: hidden;

    &.is-active {
        animation: txtTyping 2s steps(25) forwards;
    }
}

@keyframes txtTyping {

    0%,
    30% {
        width: 0ch;
    }

    70%,
    100% {
        width: 25ch;
    }
}

.txt-blur {

    &.is-active {
        animation: txtBlur 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
}

@keyframes txtBlur {
    0% {
        filter: blur(50px);
    }

    100% {
        filter: blur(0);

    }
}

.is-active {
    &.delay1s {
        animation-delay: 1s;
    }

    &.delay2s {
        animation-delay: 2s;
    }

    &.delay3s {
        animation-delay: 3s;
    }
}

/*Hover-animation*/

.hover-line {
    padding: 0.2em 0;
    position: relative;

    &::before {
        background: #ff701e;
        content: '';
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: 0;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: transform .3s;
    }

    &.center::before {
        transform-origin: center top;
    }

    &:hover::before {
        transform-origin: left top;
        transform: scale(1, 1);
    }

    &.center:hover::before {
        transform-origin: center top;
    }
}