:root {
    --yellow: #FADA7C;
    --green: #58BCAF;

    --transition-timing: cubic-bezier(.5, 0, 0, 1);

    --reveal--duration: 1.25s;
    --circle--duration: 1.5s;
    --content--duration: 1.5s;
    --plant--duration: 1.5s;
    --cloud--duration: 5s;
    --hand--duration: .5s;
    --peoples--duration: 1.75s;

    --title--delay: 1s;

    --page-duration: 2s;
    --page-delay: .5s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-width: none;
}

::-webkit-scrollbar { display: none; }

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol {
    padding: 0;
    margin: 0;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}


/*  General ---------------------------------------------------------------------------------------------------- */

/* body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--green);
    border-right: 1px solid #000;
    opacity: 0;
} */

.zoom-out { transform: scale3d(1.35, 1.35, 1.35); }

#dmum { width: 100%; height: 100%; }

.wrapper { transform: scale3d(0, 0, 0); }

.container {
    transform-origin: 50% 50%;
    transform: rotateZ(45deg);
}

.fade-book { opacity: 0; }

.book {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 640px;
    height: 850px;
    /*box-shadow: 6.5rem 6.5rem 4rem 0 rgba(0, 0, 0, .2);*/
}

.book::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    background-color: var(--yellow);
    transform: translate3d(-50%, -1px, 0) skew(0, 45deg) ;
    z-index: -1;
}

.cover {
    background-color: var(--green);
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    /*box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;*/
}

#background { fill: transparent; }
#circle-bg { transform-origin: 50% 50%; }
#pulse { transform-origin: 50% 50%; }
#flowerpot { transform-origin: 50% 90%; }

#hand-1,
#hand-2,
#hand-3,
#hand-4,
#hand-5,
#hand-6 {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

#plant-hands {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

#clouds,
#flowerpot-shadow,
#peoples,
#title,
#subtitle,
#logos { opacity: 0; }

#line-top-x,
#line-bottom-x,
#line-top-y,
#line-bottom-y { transform-box: fill-box; }

#line-top-x,
#line-bottom-x { transform-origin: 50% 50%; transform: scale3d(0, 0, 0); }

#line-top-y,
#line-bottom-y { transform-origin: 50% 0%; transform: scale3d(0, 0, 0); }

.pages {
    width: 100%;
    height: 100%;
}

.page {
    position: absolute;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .5);
}

.page:first-child {
    background-color: var(--green);
    box-shadow: none;
}


/*  Keyframes ---------------------------------------------------------------------------------------------------- */

@keyframes body {
    from { opacity: 0; width: 0%; }
    to { opacity: 1; width: 40%; }
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*@keyframes levitate {*/
/*    from { transform: translate3d(0, 0, 0); box-shadow: 6.5rem 6.5rem 4rem 0 rgba(0, 0, 0, .2); }*/
/*    50% { transform: translate3d(1.5rem, 1.5rem, 0); box-shadow: 5rem 5rem 2.5rem 0 rgba(0, 0, 0, .2); }*/
/*    to { transform: translate3d(0, 0, 0); box-shadow: 6.5rem 6.5rem 4rem 0 rgba(0, 0, 0, .2); }*/
/*}*/

@keyframes wrapper {
    from { transform: scale3d(0, 0, 0); }
    to { transform: scale3d(1, 1, 1); }
}

@keyframes rotate-main {
    from { transform: rotateZ(0deg); } 
    to { transform: rotateZ(45deg); }
}

@keyframes book-edge {
    from { width: 0; opacity: 0 }
    35% { width: 90px; }
    to { width: 30px; opacity: 1 }
}

@keyframes fade-book {
    from { opacity: 0; transform: scale3d(1, 1, 1); }
    25% { transform: scale3d(1, 1, 1); }
    to { opacity: 1; transform: skew(-15deg, -15deg) scale3d(.75, .75, .75); }
}

@keyframes cover {
    from { transform: translate3d(0, 0, 0); }
    35% { transform: translate3d(-45px, -45px, 0); }
    to { transform: translate3d(-15px, -15px, 0); }
}

@keyframes circle-bg {
    from { transform: scale3d(0, 0, 0); }
    to { transform: scale3d(1, 1, 1); }
}

@keyframes pulse {
    from { transform: scale3d(1, 1, 1); }
    10% { transform: scale3d(.95, .95, .95); }
    30% { transform: scale3d(1.05, 1.05, 1.05); }
    40% { transform: scale3d(1, 1, 1); }
    to { transform: scale3d(1, 1, 1); }
}

@keyframes flowerpot {
    from { transform: rotateZ(-15deg) scale3d(0, 0, 0) }
    75% { transform: rotateZ(5deg) scale3d(1, 1, 1); }
    to { transform: rotateZ(0); }
}

@keyframes cloud-1 {
    from { transform: translate3d(50px, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes cloud-2 {
    from { transform: translate3d(-50px, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes cloud-3 {
    from { transform: translate3d(-50px, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes hand {
    from { opacity: 0; transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes plant {
    from { opacity: 0; transform: scale3d(0, 0, 0); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes title {
    from { opacity: 0; transform: translate3d(0, 10%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes subtitle {
    from { opacity: 0; transform: translate3d(0, -10%, 0); }
    to { opacity: 1; transform: translateY(0, 0, 0); }
}

@keyframes line-x { from { transform: scale3d(0, 0, 0); } to { transform: scaleX(1); } }
@keyframes line-y { from { transform: scale3d(0, 0, 0); } to { transform: scaleY(1); } }

@keyframes page-1 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(-36px, -36px, 0); } to { transform: translate3d(-12px, -12px, 0); } }
@keyframes page-2 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(-27px, -27px, 0); } to { transform: translate3d(-9px, -9px, 0); } }
@keyframes page-3 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(-18px, -18px, 0); } to { transform: translate3d(-6px, -6px, 0); } }
@keyframes page-4 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(-9px, -9px, 0); } to { transform: translate3d(-3px, -3px, 0); } }

@keyframes page-6 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(9px, 9px, 0); } to { transform: translate3d(3px, 3px, 0); } }
@keyframes page-7 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(18px, 18px, 0); } to { transform: translate3d(6px, 6px, 0); } }
@keyframes page-8 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(27px, 27px, 0); } to { transform: translate3d(9px, 9px, 0); } }
@keyframes page-9 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(36px, 36px, 0); } to { transform: translate3d(12px, 12px, 0); } }
@keyframes page-10 { from { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(45px, 45px, 0); } to { transform: translate3d(15px, 15px, 0); } }


/*  Animate ---------------------------------------------------------------------------------------------------- */

.animate body::before { animation: var(--transition-timing) forwards 1s body; }
.animate .wrapper { animation: var(--transition-timing) 1s wrapper forwards; }
.animate .container { animation: rotate-main var(--transition-timing) forwards var(--reveal--duration); }

.animate .fade-book { animation: var(--transition-timing) forwards var(--reveal--duration) fade-book; }
/*.animate .book { animation: ease 5s levitate infinite; }*/
.animate .book::before { animation: var(--transition-timing) forwards calc(var(--page-duration) - .1s) book-edge calc(var(--page-delay) - .05s); }
.animate .cover { animation: var(--transition-timing) forwards var(--page-duration) cover var(--page-delay); }

.animate #pulse { animation: var(--transition-timing) forwards 7.5s pulse 5s infinite; }
.animate #circle-bg { animation: var(--transition-timing) forwards var(--circle--duration) circle-bg; }
.animate #flowerpot { animation: var(--transition-timing) forwards var(--content--duration) flowerpot; }
.animate #flowerpot-shadow { animation: var(--transition-timing) forwards .75s fade 1.25s; }

.animate #clouds { animation: var(--transition-timing) forwards var(--cloud--duration) fade .5s; }
.animate #cloud-1 { animation: var(--transition-timing) forwards var(--cloud--duration) cloud-1 .5s; }
.animate #cloud-2 { animation: var(--transition-timing) forwards var(--cloud--duration) cloud-2 .5s; }
.animate #cloud-3 { animation: var(--transition-timing) forwards var(--cloud--duration) cloud-3 .5s; }

.animate #hand-1,
.animate #hand-2,
.animate #hand-3,
.animate #hand-4,
.animate #hand-5,
.animate #hand-6 { animation: var(--transition-timing) forwards var(--hand--duration) hand; }

.animate #hand-1 { animation-delay: calc(var(--plant--duration) + 0.5s); }
.animate #hand-2 { animation-delay: calc(var(--plant--duration) + 0.7s); }
.animate #hand-3 { animation-delay: calc(var(--plant--duration) + 0.9s); }
.animate #hand-4 { animation-delay: calc(var(--plant--duration) + 1.0s); }
.animate #hand-5 { animation-delay: calc(var(--plant--duration) + 0.8s); }
.animate #hand-6 { animation-delay: calc(var(--plant--duration) + 0.6s); }

.animate #plant-hands { animation: var(--transition-timing) forwards var(--plant--duration) plant 1s; }
.animate #peoples { animation: var(--transition-timing) forwards var(--peoples--duration) fade calc(var(--circle--duration) + var(--plant--duration)); }

.animate #title { animation: var(--transition-timing) forwards 1.5s title var(--title--delay); }
.animate #subtitle { animation: var(--transition-timing) forwards 1.5s subtitle calc(var(--title--delay) + .25s); }
.animate #logos { animation: var(--transition-timing) forwards 1.5s fade calc(var(--title--delay) + 2.5s); }

.animate #line-top-x { animation: var(--transition-timing) forwards 1.5s line-x calc(var(--title--delay) + .5s); }
.animate #line-bottom-x { animation: var(--transition-timing) forwards 1.5s line-x calc(var(--title--delay) + 1.75s); }
.animate #line-top-y { animation: var(--transition-timing) forwards .5s line-y calc(var(--title--delay) + 1s); }
.animate #line-bottom-y { animation: var(--transition-timing) forwards .5s line-y calc(var(--title--delay) + 1.25s); }

.animate .page:nth-child(10) { animation: var(--transition-timing) forwards var(--page-duration) page-1 var(--page-delay); }
.animate .page:nth-child(9) { animation: var(--transition-timing) forwards var(--page-duration) page-2 var(--page-delay); }
.animate .page:nth-child(8) { animation: var(--transition-timing) forwards var(--page-duration) page-3 var(--page-delay); }
.animate .page:nth-child(7) { animation: var(--transition-timing) forwards var(--page-duration) page-4 var(--page-delay); }
.animate .page:nth-child(5) { animation: var(--transition-timing) forwards var(--page-duration) page-6 var(--page-delay); }
.animate .page:nth-child(4) { animation: var(--transition-timing) forwards var(--page-duration) page-7 var(--page-delay); }
.animate .page:nth-child(3) { animation: var(--transition-timing) forwards var(--page-duration) page-8 var(--page-delay); }
.animate .page:nth-child(2) { animation: var(--transition-timing) forwards var(--page-duration) page-9 var(--page-delay); }
.animate .page:nth-child(1) { animation: var(--transition-timing) forwards var(--page-duration) page-10 var(--page-delay); }