/* IMPORTS -------------------------------------------------------------- */
@keyframes showPageContent {
    0%{
        opacity: 0;
    }

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

    100%{
        opacity: 0;
    }
}
/* ---------------------------------------------------------------------- */

/* TRANSITION ANIMATION ------------------------------------------------- */
main, header.page-transition{
    animation: showPageContent 300ms 300ms 1 backwards;
}

body.page-transition{
    pointer-events: none;
}
body.page-transition main,
body.page-transition header{
    animation: hidePageContent 300ms 1 forwards;
}

.go-back{
    animation: showPageContent 300ms 300ms 1 backwards;    
}
/* ---------------------------------------------------------------------- */

/* CLONED CARD FOR ANIMATION -------------------------------------------- */
.cloned-card{
    position: fixed;
    z-index: 3;
    transition: top 300ms, left 300ms, width 300ms, height 300ms;
}
.cloned-card .buttons-container{
    transition: opacity 300ms;
}
/* ---------------------------------------------------------------------- */

@media screen and (min-width: 44rem) {
    .cloned-card.collection-card{
        display: none;
    }

    header.collection-header{
        animation: showPageContent 300ms 300ms 1 backwards;
    }
}

@media screen and (min-width: 50rem) {
    .cloned-card.recipe-card{
        display: none;
    }

    header.recipe-header{
        animation: showPageContent 300ms 300ms 1 backwards;
    }
}