/* ====================================================== */
/* © HENDRIK ADONS
/* Contains relevant styling for animations, works together
/* with the animations.js file.
/* ====================================================== */

/* ========================= */
/* GENERAL
/* ========================= */

.animation-width-zerotoauto {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns 1s ease-out;
}
.animation-width-zerotoauto[data-open="true"] {
    grid-template-columns: 1fr;
}
.animation-width-zerotoauto > * {
    overflow: hidden;
}

.animation-height-zerotoauto {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1s ease-out;
}
.animation-height-zerotoauto[data-open="true"] {
    grid-template-rows: 1fr;
}
.animation-height-zerotoauto > * {
    overflow: hidden;
}



/* ========================= */
/* STICKY & TILTING
/* ========================= */

/* No CSS needed for sticky */

.animation-tilting {
    transition: box-shadow 200ms ease-out;
}
.animation-tilting[data-hovering="true"] {
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.15);
}

@media(prefers-reduced-motion) {
    
}