/* =========================================
   SCROLL REVEAL
========================================= */

.scroll-section {
    opacity: 0;
    transform: translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.scroll-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Cards can also animate individually */

.product-bootstrap-card {
    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.products-section.is-visible .product-bootstrap-card {
    opacity: 1;
    transform: translateY(0);
}


/* Stagger product cards */

.products-section.is-visible
.col-xl-3:nth-child(1) .product-bootstrap-card {
    transition-delay: .05s;
}

.products-section.is-visible
.col-xl-3:nth-child(2) .product-bootstrap-card {
    transition-delay: .10s;
}

.products-section.is-visible
.col-xl-3:nth-child(3) .product-bootstrap-card {
    transition-delay: .15s;
}

.products-section.is-visible
.col-xl-3:nth-child(4) .product-bootstrap-card {
    transition-delay: .20s;
}

.products-section.is-visible
.col-xl-3:nth-child(5) .product-bootstrap-card {
    transition-delay: .25s;
}

.products-section.is-visible
.col-xl-3:nth-child(6) .product-bootstrap-card {
    transition-delay: .30s;
}

.products-section.is-visible
.col-xl-3:nth-child(7) .product-bootstrap-card {
    transition-delay: .35s;
}

.products-section.is-visible
.col-xl-3:nth-child(8) .product-bootstrap-card {
    transition-delay: .40s;
}

.products-section.is-visible
.col-xl-3:nth-child(9) .product-bootstrap-card {
    transition-delay: .45s;
}

.products-section.is-visible
.col-xl-3:nth-child(10) .product-bootstrap-card {
    transition-delay: .50s;
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .scroll-section,
    .product-bootstrap-card {
        opacity: 1;
        transform: none;

        transition: none;
    }

}