@charset "UTF-8";

:root {
    --color-grad-marker: linear-gradient(45deg, #6fbcc2 0%, #a0d86b 50%, #dfeb3d 100%);
}

/*** Fade In-Out ***/
.fadein {
    opacity: 0;
    -webkit-transition: all 1800ms 400ms;
    transition: all 1800ms 400ms;
}

.js-show .fadein,
.fadein.js-show {
    opacity: 1;
}

.fadein_up {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: all 1000ms 400ms;
    transition: all 1000ms 400ms;
}

.fadein_left {
    opacity: 0;
    -webkit-transform: translateX(-18px);
    transform: translateX(-18px);
    -webkit-transition: 0.8s;
    transition: 0.8s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.js-show .fadein_up,
.js-show .fadein_left,
.fadein_up.js-show,
.fadein_left.js-show {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

/*** Mask ***/
.smooth-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.37, 0, 0.63, 1);
}

.smooth-reveal.js-show {
    clip-path: inset(0);
}

.curtain-rise {
    transform: translateY(10px);
    clip-path: inset(100% 0 0 0);
}

.curtain-rise.js-show {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
}

@keyframes maskUp {
    0% {
        transform: translate(0, 101%)
    }

    40%,
    60% {
        transform: translate(0, 0%)
    }

    100% {
        transform: translate(0, -100%)
    }
}

.mask-up {
    position: relative;
    overflow: hidden;
}

h2.mask-up,
h3.mask-up {
    opacity: 0;
    transition: opacity 0ms 400ms;
}

.mask-up::before {
    content: "";
    position: absolute;
    display: block;
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-text);
    transform: translate(0, 100%);
}

h2.mask-up.js-show,
h3.mask-up.js-show {
    opacity: 1;
}

.mask-up.js-show::before {
    animation: maskUp 1s cubic-bezier(0.8, 0, 0.170, 1);
}

/*** Under Line ***/
.marker {
    position: relative;
    z-index: 1;
}

.marker::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: -1%;
    bottom: 0.1rem;
    width: 0%;
    height: 8px;
    background: var(--color-grad-marker);
    border-radius: 10px;
    -webkit-transition: all 1600ms 400ms;
    transition: all 1600ms 400ms;
}

.js-show .marker::after {
    width: 102%;
}

/*** Sway ***/
@keyframes sway {
    0%,
    100% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg) translateY(-20px);
    }
}

.anim_sway {
    position: absolute;
    animation: sway 4s ease-in-out infinite;
    transform-origin: center;
}

/*** Delay ***/
.anim_delayS {
    transition-delay: 620ms;
}

.anim_delayM {
    transition-delay: 740ms;
}

.anim_delayL {
    transition-delay: 860ms;
}

.anim_delayXL {
    transition-delay: 980ms;
}

.anim_delayXXL {
    transition-delay: 1100ms;
}

.anim_delay1600 {
    transition-delay: 1600ms;
}