.mainttl {
    font-size: 350%;
    font-family: var(--font-t1);
    color: var(--clr01x, inherit);
    line-height: 1;
    transition: transform .9s 50ms cubic-bezier(.23, 1, .32, 1);
}

.mainttl.active {
    transform: translateY(-0) translateZ(0);
    transition: transform .8s 0s cubic-bezier(.23, 1, .32, 1);
}

/* =========================================== */

.mainttl.active span.decor:after,
.mainttl.active span.decor:before{
    animation-delay: 3s;
    transform: scaleX(1) translateZ(0);
    transition: transform 1s .4s cubic-bezier(.23, 1, .32, 1);
}
.mainttl span.decor {
    display: block;
    width: 100%;
    margin: 30px 0 0;
    position: absolute;
}

.mainttl span.decor:after,
.mainttl span.decor:before {
    position: absolute;
    content: '';
    width: 100%;
    max-width: 500px;
    height: 1px;
    left: 0;
    bottom: 0;

    background: #ccc;
    transform: scaleX(0) translateZ(0)
}

.mainttl span.decor:after {
    height: 3px;
    background-color: var(--clr01);
    width: 50%;
    max-width: 200px;
}

.mainttl span.decor:before {
    transform-origin: 0 0
}

.mainttl span.decor:after {
    transform-origin: 100% 0
}


.mainttl.active span.decor:after,
.mainttl.active span.decor:before {
    transform: scaleX(1) translateZ(0);
    transition: transform 1s .4s cubic-bezier(.23, 1, .32, 1);
}
/* =========================================== */

.mainttl .img-decor {
    position: absolute;
    right: 35px;
    bottom: -129px;
    transition: transform .9s 500ms cubic-bezier(.23, 1, .32, 1);
    transform: rotate(0);
    z-index: -5 !important;
    pointer-events: none;
    max-width: none;
}

.mainttl.active .img-decor {
    position: absolute;
    transform: rotate(6deg)
}

.mainttl.active .img-decor {
    position: absolute;
    transform: rotate(12deg)
}

@media screen and (max-width: 767px) {
    .mainttl .img-decor {
        max-height: 150px
    }
}