/* Animation */
body {
    --load-time: 300ms;
    --load-fast-time: 200ms;
    --load-slow-time: 1000ms;
    --delay-time: 1000ms;
    --delay-time-step2: 2000ms;
    --delay-time-step3: 2800ms;
    --delay-time-step4: 3500ms;
    --delay-time-step5: 4000ms;
}
header {
    animation: nav-load var(--load-time) ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
}
#content{
    animation: content-load var(--load-slow-time) ease-out var(--delay-time);
    animation-fill-mode: forwards;
    opacity: 0;
}
header>.container {
    animation: content-load var(--load-fast-time) ease-out var(--delay-time-step2);
    animation-fill-mode: forwards;
    opacity: 0;
}

/* Main Slider */
#ms-fp-thumbnail {
    animation: thumb-slide var(--load-slow-time) ease-out var(--delay-time-step3);
    animation-fill-mode: forwards;
    opacity: 0;
    margin-top: -15rem;
}
.ms-header,
.ms-preview-description,
.mst-header{
    animation: content-load var(--load-time) ease-out var(--delay-time-step3);
    animation-fill-mode: forwards;
    opacity: 0;
}
#ms-fp .splide__arrow--prev {
    animation: arrow-backward var(--load-time) ease-in var(--delay-time-step4);
    transform: translateX(-200%);
    animation-fill-mode: forwards;
}
#ms-fp .splide__arrow--next{
    animation: arrow-forward var(--load-time) ease-in var(--delay-time-step4);
    transform: translateX(200%);
    animation-fill-mode: forwards;
}
#ms-fp .splide__pagination {
    animation: pagination var(--load-time) ease-in var(--delay-time-step4);
    animation-fill-mode: forwards;
    bottom: -2rem;
    opacity: 0;
}

/* Page Intro */
.intro-text-en,
.intro-text-th {
    animation: content-load var(--load-time) ease-out var(--delay-time-step3);
    animation-fill-mode: forwards;
    opacity: 0;
}
.intro-text-line{
    animation: line-width var(--load-time) ease-out var(--delay-time-step4);
    width: 0;
    animation-fill-mode: forwards;
}


/* Submenu: Mission & Team */
.menu-about-us-submenu-container {
    animation: content-load var(--load-time) ease-out var(--delay-time-step3);
    animation-fill-mode: forwards;
    opacity: 0;
}
.sub-menu-text{ 
    animation: sub-menu var(--load-time) ease-out var(--delay-time-step5);
    margin-top: -10rem;
    animation-fill-mode: forwards;
}


@keyframes nav-load {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes thumb-slide {
    0% {
        opacity: 0;
        margin-top: -200px;
    }
    100%{
        opacity: 1;
        margin-top: -1px;
    }
}
@keyframes content-load {
    0% {
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes arrow-backward {
    0% {
        transform: translateX(-200%);
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes arrow-forward {
    0% {
        transform: translateX(200%);
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes pagination {
    0% {
        opacity: 0;
        bottom: -2rem;
    }
    100%{
        opacity: 1;
        bottom: 0.5rem;
    }
}

@keyframes line-width {
    0% {
        width: 0;
    }
    100%{
        width: 124px;
    }
}

@keyframes sub-menu {
    0% {
        margin-top: -10rem;
    }
    100%{
        margin-top: 0;
    }
}