/* ==========================================================
   IRON WOLF FITNESS
   COMPONENT ANIMATIONS
========================================================== */


/* ==========================================================
   REVEAL ANIMATION
========================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* ==========================================================
   CARD STAGGER
========================================================== */

.service-card:nth-child(2),
.featured-card:nth-child(2) {
    transition-delay: 0.08s;
}

.service-card:nth-child(3),
.featured-card:nth-child(3) {
    transition-delay: 0.16s;
}

.service-card:nth-child(4),
.featured-card:nth-child(4) {
    transition-delay: 0.24s;
}

.service-card:nth-child(5) {
    transition-delay: 0.32s;
}


/* ==========================================================
   RED GLOW
========================================================== */

.red-glow {

    box-shadow:
        0 0 40px
        rgba(255, 32, 39, 0.12);

}


/* ==========================================================
   RED LINE
========================================================== */

.red-line {

    width: 45px;

    height: 2px;

    background:
        var(--wolf-red);

    margin:
        20px 0;

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

    }

}