@charset "utf-8";

/* time setting */
.view__body__area-content,
.view__body__area-edit,
.view__body__area-reply {
    opacity: 0;
    animation-fill-mode: forwards;
}

.view__body__area-content.off,
.view__body__area-edit.on,
.view__body__area-edit.off,
.view__body__area-reply.on,
.view__body__area-reply.off {
    animation-duration: var(--animation-duration-medium);
    animation-timing-function: ease-out;
}

.article-content__container > *,
.article-content__container--edit > *,
.article-content__container--reply > *,
.article-content__container > ul > *,
.article-content__container--edit > ul > *,
.article-content__container--reply > ul > * {
    opacity: 0;
    animation-fill-mode: forwards;
    transition: color var(--animation-duration-long) 1s;
    animation-duration: var(--animation-duration-short);
    animation-timing-function: ease-out;
}

.article-content__container > .on,
.article-content__container--edit > .on,
.article-content__container--reply > .on,
.article-content__container > ul > .on,
.article-content__container--edit > ul > .on,
.article-content__container--reply > ul > .on {
    animation-duration: var(--animation-duration-medium);
    animation-timing-function: ease-out;
}

/* container animation */
.view__body__area-content.on {
    z-index: 9;
    animation-name: slide-in-left;
    transition: z-index 0s;
}

.view__body__area-edit.on {
    z-index: 10;
    animation-name: slide-in-top;
    transition: z-index 0s;
}

.view__body__area-reply.on {
    z-index: 10;
    animation-name: slide-in-right;
    transition: z-index 0s;
}

.view__body__area-content.off,
.view__body__area-edit.off,
.view__body__area-reply.off {
    animation-name: fade-out;
    z-index: -99;
    transition-property: z-index;
    transition-delay: 1s;
    transition-duration: 0s;
}

/* toggle item animation */
.animate-toggle {
    animation-fill-mode: forwards;
}

.animate-toggle.off {
    animation-name: fade-out;
    z-index: -99;
    transition-property: z-index;
    transition-delay: 1s;
    transition-duration: 0s;
}

/* content animation */
.article-content__container > .on,
.article-content__container--edit > .on,
.article-content__container--reply > .on,
.article-content__container > ul > .on,
.article-content__container--edit > ul > .on,
.article-content__container--reply > ul > .on {
    animation-name: fade-in-bottom;
}