:root {
    --delay: 0;
    --duration: 400ms;
    --iterations: 1;
}


/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */

.text {
    opacity: 0;
}

.reveal-text,
.reveal-text::after {
    -webkit-animation-delay: var(--animation-delay, 2s);
    animation-delay: var(--animation-delay, 2s);
    -webkit-animation-iteration-count: var(--iterations, 1);
    animation-iteration-count: var(--iterations, 1);
    -webkit-animation-duration: var(--duration, 400ms);
    animation-duration: var(--duration, 400ms);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
    --animation-delay: var(--delay, 0);
    --animation-duration: var(--duration, 400ms);
    --animation-iterations: var(--iterations, 1);
    position: relative;
    -webkit-animation-name: clip-text;
    animation-name: clip-text;
    color: #222;
    cursor: default;
    opacity: 1;
}

.bg_gray .reveal-text,
.bg_gray_02 .reveal-text,
.bg_gray_02 .c-title--head-second {
    color: #222;
}

.bg_dark .reveal-text,
.bg_dark .c-title--head-second {
    color: #fff;
    margin-bottom: 60px;
}

.reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #33ffcc;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    -webkit-animation-name: text-revealer;
    animation-name: text-revealer;
}

@-webkit-keyframes clip-text {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes clip-text {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}

@-webkit-keyframes text-revealer {
    0%,
    50% {
        transform-origin: 0 50%;
    }
    60%,
    100% {
        transform-origin: 100% 50%;
    }
    60% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

@keyframes text-revealer {
    0%,
    50% {
        transform-origin: 0 50%;
    }
    60%,
    100% {
        transform-origin: 100% 50%;
    }
    60% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}