@charset "UTF-8";

.animate, div#logo img {
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}

@keyframes none {
}

/* Page transition */
/*
div#screen {
    position: fixed;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 0;
    background-color: var(--color-moon);
    z-index: 999;
}

body.animate div#screen {
    display: block;
    animation-name: screen-close;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(.98,.01,.98,.49);
}

body.animate-end div#screen {
    display: block;
    top: 0;
    height: 100vh;
    background-color: #fff;
}

@keyframes screen-close {
    
    0% {
        top: 100vh;
        height: 0;
        background-color: var(--color-moon);
    }
    
    80% {
        top: 0;
        height: 100vh;
        background-color: var(--color-moon);
    }
    
    100% {
        top: 0;
        height: 100vh;
        background-color: #fff;
    }
}
*/
/*
div#screen.animate {
    display: block;
    animation-name: screen-open;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.98,.01,.98,.49);
}

@keyframes screen-open {
    
    0% {
        height: 100vh;
    }
    
    100% {
        height: 0;
    }
}
*/

body.animate div#body {
    position: relative;
    animation-name: body-transition;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34);
}

body.animate {
    overflow-x: hidden;
}

@keyframes body-transition {
    
    0% {
        left: 0;
    }
    
    100% {
        left: 100vw;
    }
}

/* Page and section transition */
div#main.animate {
    position: relative;
    animation-name: main-transition;
    animation-duration: calc(1s * 0.6);
    animation-timing-function: cubic-bezier(.89,.65,.71,1.29);
}

div#main.animate-avant {
    position: relative;
    top: calc(0.7 * 100vw);
}

div#main div.section-title > div.animate {
    animation-name: s-title;
    animation-delay: 0.1s;
    animation-duration: calc(1s * 0.4);
    animation-timing-function: cubic-bezier(.89,.65,.71,1.29);
}

div#main div.section-title > div.animate-avant {
    opacity: 0;
    margin-top: 200px;
}

@keyframes main-transition {
    
    0% {
        top: calc(0.7 * 100vw);
    }
    
    100% {
        top: 0;
    }
}

@keyframes s-title {
    
    0% {
        opacity: 0;
        margin-top: 200px;
    }

    100% {
        opacity: 1;
        margin-top: 0;
    }
}

/* Logo */
#logo-moon {
    position: relative;
    animation-name: logo;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(.12,.87,.5,.87);
    /*animation-timing-function: cubic-bezier(.89,.65,.71,1.29);*/
    /*animation-timing-function: cubic-bezier(.8,0,.52,1.74);*/
}

#logo-graphics {
    position: relative;
    animation-name: logo;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(.12,.87,.5,.87);
    /*animation-timing-function: cubic-bezier(.89,.65,.71,1.29);*/
    /*animation-timing-function: cubic-bezier(.8,0,.52,1.74);*/
}

@keyframes logo {
    
    0% {
        top: calc((307px + 160px) * -1);
        opacity: 0;
    }
    
    30% {
        opacity: 0;
    }
    
    100% {
        top: 0;
        opacity: 1;
    }
}

/* Sora */
div#sora.animate {
    animation-name: sora;
    animation-duration: 0.6s;
    animation-timing-function: linear;
}

div#sora.animate-avant {
	opacity: 0;
}

div#sora div.text.animate {
    animation-name: sora-text;
    /*animation-delay: 1s;*/
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
}

div#sora div.text.animate-avant {
    opacity: 0;
}

@keyframes sora {
    
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

@keyframes sora-text {
    
    0% {
        opacity: 0;
        padding-top: 8rem;
        line-height: 6rem;
    }
    
    33% {
        opacity: 0.3;
        padding-top: 0;
        line-height: 2.5rem;
    }
    
    100% {
        opacity: 1;
    }
}

/* Moon */
div#moon > div.phase.animate {
    animation-name: moon-phase;
    animation-timing-function: ease-out;
}

div#moon > div.phase[data-pos="0"].animate {
    animation-name: moon-current;
    animation-timing-function: ease-in;
}

div#moon > #moon-today.animate {
    animation-name: moon-today;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
}

div#moon > div.phase.animate-avant,
div#moon > #moon-today.animate-avant {
    opacity: 0;
}

@keyframes moon-phase {
    
    0% {
        opacity: 0;
    }
    
    90% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.3;
    }
}

@keyframes moon-current {
    
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

@keyframes moon-today {
    
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

/* Animate works items */
div#works div.works-item.animate {
    overflow: visible;
}

div#works div.works-item .animate {
    position: relative;
}

div#works div.works-item.animate .animate {
    animation-name: works-item;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(.4,1.04,.82,1.01);
}

div#works div.works-item.animate-avant .animate {
    left: 100vw;
    opacity: 0;
}

@keyframes works-item {
    
    0% {
        left: 100vw;
        opacity: 0;
    }
    
    100% {
        left: 0;
        opacity: 1;
    }
}