@charset "UTF-8";

/* ===============================================
# MARK: Animation Status Paused
=============================================== */
.l-header__inner,
.l-header__btnArea,
.p-topFv__text,
.p-topFv__copyTitle {
    opacity: 0.5;
    visibility: hidden;
    translate: -20px 0;
    filter: blur(40px);
    will-change: filter;
    transition: filter var(--g-transition-duration-long) ease, opacity var(--g-transition-duration-long) ease, visibility var(--g-transition-duration-long) ease, translate var(--g-transition-duration-long) ease;
}
.p-topFv__mainTitle {
    opacity: 0.5;
    visibility: hidden;
    translate: -100px 0;
    transform-origin: right bottom;
    scale: 1.4 1;
    filter: blur(40px);
    will-change: filter;
    transition: scale var(--g-transition-duration-long) ease, filter var(--g-transition-duration-long) ease, opacity var(--g-transition-duration-long) ease, visibility var(--g-transition-duration-long) ease, translate var(--g-transition-duration-long) ease;
}
.p-topFv__visual {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--g-transition-duration) ease;
}
.p-topFv__visualClip {
    translate: -150px 0;
    transform-origin: right center;
    scale: 1.3;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--g-transition-duration-long) ease, translate var(--g-transition-duration-long) ease, scale var(--g-transition-duration-long) ease;
}
.p-topFv__grad {
    /* translate: -100px 0; */
    /* translate: 0 -100px; */
    /* clip-path: inset(0 0 100% 0); */
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--g-transition-duration-long) ease, background-image var(--g-transition-duration-long) ease;
    &::after {
        /* translate: -50% -50%; */
        /* opacity: 0; */
        translate: -75% -25%;
        transition: opacity calc(var(--g-transition-duration-long) * 2) ease, translate calc(var(--g-transition-duration-long) * 2) ease;
    }
    @media screen and (min-width: calc(960 * (1 / 16 * 1rem))) {
        /* translate: 0 300px;
        clip-path: inset(100% 0 0 0); */
    }
}

/* ===============================================
# MARK: Animation Status Play
=============================================== */
.l-header[data-animation-status='play'] {
    .l-header__inner,
    .l-header__btnArea {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        filter: blur(0);
        transition-delay: 2s;
    }
}
.p-topFv[data-animation-status='play'] {
    .p-topFv__text,
    .p-topFv__mainTitle,
    .p-topFv__copyTitle {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        filter: blur(0);
        scale: 1;
    }
    .p-topFv__text {
        transition-delay: 2s;
    }
    .p-topFv__mainTitle {
        transition-delay: 2s;
    }
    .p-topFv__copyTitle {
        transition-delay: 2s;
    }
    .p-topFv__visual {
        clip-path: inset(0% 0% 0% 0%);
        transition-delay: 1.5s;
    }
    .p-topFv__visualClip {
        translate: 0 0;
        scale: 1;
        clip-path: inset(0% 0% 0% 0%);
        transition-delay: 2.2s;
    }
    .p-topFv__grad {
        clip-path: inset(0% 0% 0% 0%);
        transition-delay: 1.5s;
        &::after {
            opacity: 1;
            translate: -75% -25%;
        }
    }
}