/* =========================================
   REUSABLE FADE-IN ANIMATION
========================================= */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}


/* Optional directions */

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.fade-in-left.show {
    opacity: 1;
    transform: translateX(0);
}


.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.fade-in-right.show {
    opacity: 1;
    transform: translateX(0);
}


.fade-in-scale {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.fade-in-scale.show {
    opacity: 1;
    transform: scale(1);
}


/* =========================================
   STAGGER ANIMATION
========================================= */

.fade-children > * {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.fade-children.show > * {
    opacity: 1;
    transform: translateY(0);
}


/* Stagger timing */

.fade-children.show > *:nth-child(1) {
    transition-delay: 0.05s;
}

.fade-children.show > *:nth-child(2) {
    transition-delay: 0.15s;
}

.fade-children.show > *:nth-child(3) {
    transition-delay: 0.25s;
}

.fade-children.show > *:nth-child(4) {
    transition-delay: 0.35s;
}

.fade-children.show > *:nth-child(5) {
    transition-delay: 0.45s;
}

.fade-children.show > *:nth-child(6) {
    transition-delay: 0.55s;
}

.fade-children.show > *:nth-child(7) {
    transition-delay: 0.65s;
}

.fade-children.show > *:nth-child(8) {
    transition-delay: 0.75s;
}