@media only screen and (min-width: 769px) {
    [data-text-anim] {
        will-change: transform;
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
        overflow: hidden;
        transition-delay: 1s;
        transition: max-height 0.25s ease;
    }

    .visible [data-text-anim] {
        max-height: 200px;
    }

    [data-text-anim="fade"] {
        transition: all 1s ease-in-out 0.5s;
        opacity: 0;
    }

    .visible[data-text-anim="fade"] {
        opacity: 1;
    }

    [data-text-anim="bar"] {
        position: relative;
        color: transparent;
        display: inline-block;
        transition: color 0.2s ease;
    }

    [data-text-anim="bar"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        background: #121212;
    }

    .visible[data-text-anim="bar"] {
        color: inherit;
        transition-delay: 0.7s;
    }

    .visible[data-text-anim="bar"]::before {
        animation: bar 1.4s cubic-bezier(.72, 0, .28, 1);
    }

    [data-text-anim="focus"] {
        transition: all 1s ease-in-out 0.25s;
        opacity: 0;
        letter-spacing: 5px;
    }

    .visible[data-text-anim="focus"] {
        opacity: 1;
        letter-spacing: 0;
    }

    [data-text-anim="spread"] {
        transition: all 1s ease-in-out 1s;
        transform 1s cubic-bezier(0.8, 0, 0.2, 1);
        transform: scale(1.2);
        letter-spacing: 0.5rem;
    }

    .visible[data-text-anim="spread"] {
        transform: scale(1);
        letter-spacing: 0;
    }

    [data-text-anim="shift"] {
        transition: all 1s cubic-bezier(0.8, 0, 0.2, 1);
        letter-spacing: 0;
        vertical-align: middle;
    }

    [data-text-anim="shift"]:before {
        content: '>';
        display: inline-block;
        position: relative;
        transform: scaleY(0) translateX(-100%);
        transition: transform 0.5s ease;
        transition-delay: 0.5s;
    }

    .visible[data-text-anim="shift"]:before {
        transform: scaleY(1) translateX(0);
    }

    .visible[data-text-anim="shift"] {
        letter-spacing: 5px;
        transform: translateX(20px);
        transition-delay: 0.5s;
    }

    [data-text-anim="blocks"] {
        position: relative;
        display: inline-block;
        color: transparent;
        transition: color 0.2s ease;
    }

    [data-text-anim="blocks"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: #121212;
    }

    .visible[data-text-anim="blocks"] {
        color: inherit;
        transition-delay: 0.7s;
    }

    .visible[data-text-anim="blocks"]::before {
        animation: blocks 1.4s cubic-bezier(.72, 0, .28, 1);
    }

    [data-text-anim="filling"] {
        position: relative;
        overflow: hidden;
    }

    [data-text-anim="filling"]:before {
        content: attr(data-text);
        display: block;
        position: absolute;
        opacity: 0.2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    [data-text-anim="filling"] span {
        position: relative;
        display: block;
    }

    [data-text-anim="filling"] span.mask {
        transform: translateX(-100%);
        overflow: hidden;
        transition: transform 2s cubic-bezier(0.45, 0, 0.55, 1);
        transition-delay: 0.7s;
    }

    [data-text-anim="filling"] span span {
        transform: translateX(100%);
        transition: transform 2s cubic-bezier(0.45, 0, 0.55, 1);
        transition-delay: 0.7s;
    }

    .visible[data-text-anim="filling"] span.mask {
        transform: translateX(0);
    }

    .visible[data-text-anim="filling"] span span {
        transform: translateX(0);
    }

    [data-text-anim="line"] {
        position: relative;
        vertical-align: middle;
    }

    [data-text-anim="line"]:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 1px;
        background: red;
        margin-right: 0;
        transition: all 0.8s cubic-bezier(0.45, 0, 0.55, 1);
        transition-delay: 0.7s;
    }

    .visible[data-text-anim="line"]:before {
        width: 5rem;
        margin-right: 1rem;
    }

    [data-text-anim="cyc"] span {
        font-size: inherit;
        position: relative;
        text-transform: inherit;
        display: inline;
        opacity: 0;
    }

    [data-text-anim="cyc"] {
        letter-spacing: 3px;
    }

    .visible[data-text-anim="cyc"] span {
        animation-name: cyc;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    .visible[data-text-anim="cyc"] {
        animation-name: cyc-in;
        letter-spacing: 0;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+1) {
        animation-delay: 0.7s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+5) {
        animation-delay: 1.3s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+6) {
        animation-delay: 0.8s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+10) {
        animation-delay: 0.1s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+13) {
        animation-delay: 0.2s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+4) {
        animation-delay: 1.4s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+14) {
        animation-delay: 1.0s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+9) {
        animation-delay: 1.2s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+11) {
        animation-delay: 0.3s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+12) {
        animation-delay: 0.6s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+2) {
        animation-delay: 0.5s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+3) {
        animation-delay: 0s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+7) {
        animation-delay: 0.4s;
    }

    .visible[data-text-anim="cyc"] span:nth-child(15n+8) {
        animation-delay: 1.1s;
    }
}

@keyframes cyc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cyc-in {
    from {
        transform: translate3d(0, -20px, 0) scale(1.2);
    }

    to {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes blocks {
    0% {
        width: 0;
        left: 0;
    }

    50% {
        width: 100%;
    }

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

@keyframes bar {

    0%,
    100% {
        width: 0;
    }

    50% {
        width: 100%;
    }
}