@charset "utf-8";

:root {
    --minimum-delay: 1000ms;
}

.view__background__mask.off::before {
	animation: slide-in-top-full 1s ease-out;
	animation-fill-mode: forwards;
}

/* -- for entrance animated elements */
/* background area */
.view__background__mask.on::after {
	animation: slide-out-top-full 1s ease-out;
	animation-fill-mode: forwards;
    animation-delay: var(--minimum-delay);
}

.view__background__container.on {
    animation-delay: calc(var(--minimum-delay) + 200ms);
}

/* visual area */
.view__body__area-visual__container {
    animation-delay: calc(var(--minimum-delay) + 600ms);
}

/* abstract area */
.article-voice__text {
    animation-delay: calc(var(--minimum-delay) + 1000ms);
}

.article-voice__arrow-container {
    animation-delay: calc(var(--minimum-delay) + 1200ms);
}

.article-summary__text {
    animation-delay: calc(var(--minimum-delay) + 1400ms);
}

/* codename area */
.article-emblem__container {
    animation-delay: calc(var(--minimum-delay) + 1500ms);
}

.article-codename__main__text {
    animation-delay: calc(var(--minimum-delay) + 1600ms);
}

.article-codename__rubi__text {
    animation-delay: calc(var(--minimum-delay) + 1700ms);
}

.article-codename__title__text {
    animation-delay: calc(var(--minimum-delay) + 1800ms);
}

/* profile area */
/* use js... */

:root {
    --minimum-delay2: 4200ms;
}

/* class area */
.article-class__slash {
    transition-delay: calc(var(--minimum-delay2));
}

.article-class__top__text {
    animation-delay: calc(var(--minimum-delay2) + 200ms);
}

.article-class__bottom__text {
    animation-delay: calc(var(--minimum-delay2) + 400ms);
}