.forest-eye{
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 3;
    height: 7svh;
    width: auto;
    transform: translate(-35svh, 8svh);
    -webkit-transform: translate(-35svh, 8svh);
}

.forest-crow{
    backface-visibility: hidden;
}

.forest-eye-white{
    display: none;
    position: absolute;
    /* width: 35.61px;
    height: 135.22px; */
    height:100%;
    width:auto;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) scale(1, 1);
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
    animation: forest-eye-white-variation-1 4s ease-in-out;
    -webkit-animation: forest-eye-white-variation-1 4s ease-in-out;
}

.forest-eye-pupil{
    position: absolute;
    /* width:51.85px;
    height:51.85px; */
    height: 38%;
    width: auto;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    animation: forest-eye-pupil-variation-1 50s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; 
    -webkit-animation: forest-eye-pupil-variation-1 50s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; 
}

@keyframes forest-eye-white-variation-1{
    0% {transform: translate(-50%, -50%) scale(0, 1)}
    3% {transform: translate(-50%, -50%) scale(1)}
    97% {transform: translate(-50%, -50%) scale(1)}
    100% {transform: translate(-50%, -50%) scale(0, 1)}
}

@keyframes forest-eye-pupil-variation-1{
    0% {transform: translate(-50%, -50%)}
    10% {transform: translate(-50%, -50%)}
    10.5% {transform: translate(-33%, 1%)}
    24% {transform: translate(-33%, 1%)}
    24.5% {transform: translate(-66%, -18%)}
    33% {transform: translate(-66%, -18%)}
    33.5% {transform: translate(-54%, -108%)}
    40% {transform: translate(-54%, -108%)}
    40.5% {transform: translate(-9%, -45%)}
    65% {transform: translate(-9%, -45%)}
    65.5% {transform: translate(-81%, -63%)}
    80% {transform: translate(-81%, -63%)}
    80.5% {transform: translate(-50%, -50%)}
    100% {transform: translate(-50%, -50%)}
}


.forest-crow{
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 3;
    width: auto;
    width: 10svh;
    transform: translate(23.5svh, -3.5svh);
    -webkit-transform: translate(-50%, -50%);
    animation: forest-crow-jump-variation-1 30s infinite; 
    -webkit-animation: forest-crow-jump-variation-1 30s infinite; 
}

.shooting-star{
    position: fixed;
    top:15svh;
    width: 50svh;
}

@keyframes forest-crow-jump-variation-1{
    0% {transform: translate(23.5svh, -3.5svh) scale(1, 1)}

    49.5% {
        transform: translate(23.5svh, -3.5svh) scale(1, 1);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translate(29svh, -4.5svh) scale(-1, 1);
        animation-timing-function: ease-in;
    }
    50.5% {transform: translate(29.1svh, -3.5svh) scale(-1, 1)}

    51% {
        transform: translate(29.1svh, -3.5svh) scale(-1, 1);
        animation-timing-function: ease-out;
    }
    51.5% {
        transform: translate(29.2svh, -4.5svh) scale(-1, 1);
        animation-timing-function: ease-in;
    }
    52% {transform: translate(29.3svh, -3.5svh) scale(-1, 1)}

/*//////*/

    95.5% {
        transform: translate(29.5svh, -3.5svh) scale(-1, 1);
        animation-timing-function: ease-out;
    }
    96% {
        transform: translate(24svh, -4.5svh) scale(1, 1);
        animation-timing-function: ease-in;
    }
    96.5% {transform: translate(23.9svh, -3.5svh) scale(1, 1)}

    97% {
        transform: translate(23.9svh, -3.5svh) scale(1, 1);
        animation-timing-function: ease-out;
    }
    97.5% {
        transform: translate(23.8svh, -4.5svh) scale(1, 1);
        animation-timing-function: ease-in;
    }
    98% {transform: translate(23.7svh, -3.5svh) scale(1, 1)}

    98.5% {
        transform: translate(23.7svh, -3.5svh) scale(1, 1);
        animation-timing-function: ease-out;
    }
    99% {
        transform: translate(23.6svh, -4.5svh) scale(1, 1);
        animation-timing-function: ease-in;
    }
    99.5% {transform: translate(23.5svh, -3.5svh) scale(1, 1)}

    100% {transform: translate(23.5svh, -3.5svh) scale(1, 1)}
}

.big-star{
    position: absolute;
    top:0;
    left:0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.tammy-logo-eye-white{
    position: absolute;
    z-index: 4;
    width: 1.28svh;
    left:50%;
    top: 16.4svh;
    transform: translate(-12.35svh, 0) scale(1, 1);
    animation: tammy-logo-eye-pupil-blink 10s infinite; 
}

.tammy-logo-eye-pupil{
    position: absolute;
    z-index: 5;
    width: 2.95svh;
    top: 42%;
    left: -34%;
    transform: translate(0svh, 0svh); 
}

.tammy-logo-eye-pupil-wrapper{
    position: absolute;
    z-index: 5;
    width: 1.7svh;
    height: 7.5svh;
    top: 16svh;
    left: 50%;
    transform: translate(-12.6svh, 0);
    overflow: hidden;
}

@keyframes tammy-logo-eye-pupil-blink{
    0% {transform: translate(-12.35svh, 0) scale(1, 1);}
    96% {transform: translate(-12.35svh, 0) scale(1, 1);}
    97% {transform: translate(-12.35svh, 0) scale(0, 1);}
    100% {transform: translate(-12.35svh, 0) scale(1, 1);}
}


.content-body-animation-wrapper.mobile{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
}

.background-paper.back-side{
    z-index: 10;
    filter: brightness(80%);
}

.background-paper-back-side-wrapper{
    z-index: 10;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.anim-page-wrapper{
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    position: absolute;
    pointer-events: none;
}

@keyframes selection-line-anim{
    0% {transform: translate(100%, 0); z-index:-1}
    100% {transform: translate(0, 0); z-index:-1}    
}

@keyframes selection-line-wrapper-anim{
    0% {transform: translate(-100%, 0); z-index:-1}
    100% {transform: translate(0, 0); z-index:-1}    
}

/*//////////////*/


@keyframes paper-flip-page-mobile{
    0% {transform: rotate(-20deg) translate(0, -23svh) scale(2, 1)}
    100% {transform: rotate(-20deg) translate(0, -105svh) scale(2, 1)}
}

@keyframes paper-flip-wrapper-mobile{
    0% {transform: scale(0.5, 1) translate(0, 23svh) rotate(20deg)}
    100% {transform: scale(0.5, 1) translate(0, 105svh) rotate(20deg)}
}

@keyframes paper-flip-backside-page-mobile{
    0% {transform: scale(-1, 1) rotate(-160deg) translate(0, 23svh) scale(2, 1)}
    100% {transform: scale(-1, 1) rotate(-160deg) translate(0, 105svh) scale(2, 1)}
}

@keyframes paper-flip-backside-wrapper-mobile{
    0% {transform: scale(0.5, 1) translate(0, -77svh) rotate(20deg)}
    100% {transform: scale(0.5, 1) translate(0, 6svh) rotate(20deg)}
}


/* /////////////////////// */

@keyframes paper-flip-page-desktop{
    0% {transform: rotate(-20deg) translate(0, -2svh) scale(2, 1)}
    100% {transform: rotate(-20deg) translate(0, -102svh) scale(2, 1)}
}

@keyframes paper-flip-wrapper-desktop{
    0% {transform: scale(0.5, 1) translate(0, 2svh) rotate(20deg)}
    100% {transform: scale(0.5, 1) translate(0, 102svh) rotate(20deg)} 
}

@keyframes paper-flip-backside-page-desktop{
    0% {transform: scale(-1, 1) rotate(-160deg) translate(0, 2svh) scale(2, 1)}
    100% {transform: scale(-1, 1) rotate(-160deg) translate(0, 102svh) scale(2, 1)}
}

@keyframes paper-flip-backside-wrapper-desktop{
    0% {transform: scale(0.5, 1) translate(0, -98svh) rotate(20deg)}
    100% {transform: scale(0.5, 1) translate(0, 4svh) rotate(20deg)}
}

/* ///////////////////////// */

@keyframes new-paper-appear{
    0% {transform: translate(0, 0.5svh) scale(0.98, 0.98); filter: brightness(0%);}
    100% {transform: translate(0, 0svh) scale(1, 1); filter: brightness(100%);}
}

@keyframes paper-flip-motion{
    0% {
        transform: scale(1) translate(0, 0) rotate(0deg);
        opacity: 1.0;
    }
    60%{
        opacity: 1.0;
    }
    100% {
        transform: scale(1.05) translate(-2svh, -4svh) rotate(-3deg);
        opacity: 0.0;
    }
}