.reveal {

    opacity:0;

    transform:
        translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* stagger */

.solution-card:nth-child(1){transition-delay:.05s;}
.solution-card:nth-child(2){transition-delay:.12s;}
.solution-card:nth-child(3){transition-delay:.19s;}
.solution-card:nth-child(4){transition-delay:.26s;}
.solution-card:nth-child(5){transition-delay:.33s;}
.solution-card:nth-child(6){transition-delay:.40s;}

/* Allow revealed solution cards to keep the 3D tilt effect */
.solution-card.reveal.active {
    opacity: 1;

    transform:
        perspective(900px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        translateY(0);
}

.solution-card.reveal.active:hover {
    transform:
        perspective(900px)
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        translateY(-8px);
}