/*
 * QARAR B2B — Stations Subtle Motion
 * Premium, lightweight, no layout shift.
 */

.station-card {
    transform: translateY(18px);
    opacity: 0;
    transition:
        transform .55s cubic-bezier(.2,.75,.25,1),
        opacity .5s ease,
        box-shadow .24s ease;
    will-change: transform, opacity;
}

.station-card.is-in-view {
    transform: translateY(0);
    opacity: 1;
}

.station-card:nth-child(1) {
    transition-delay: .04s;
}

.station-card:nth-child(2) {
    transition-delay: .12s;
}

.station-card:nth-child(3) {
    transition-delay: .20s;
}

.station-card__media img {
    transform: scale(1.035);
    transition: transform .7s cubic-bezier(.2,.75,.25,1);
    will-change: transform;
}

.station-card.is-in-view .station-card__media img {
    transform: scale(1);
}

.station-card .station-index {
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform .5s cubic-bezier(.2,.75,.25,1),
        opacity .45s ease;
}

.station-card.is-in-view .station-index {
    transform: translateY(0);
    opacity: 1;
}

.station-card__overlay {
    transition: background .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .station-card.is-in-view:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 42px rgba(0,0,0,.24);
    }

    .station-card.is-in-view:hover .station-card__media img {
        transform: scale(1.055);
    }

    .station-card.is-in-view:hover .station-card__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(17,17,17,.46) 0%,
                rgba(17,17,17,.66) 46%,
                rgba(17,17,17,.88) 100%
            );
    }

    .station-card.is-in-view:hover .button {
        transform: translateY(-1px);
    }
}

.station-card .button {
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

@media (max-width: 767px) {
    .station-card {
        transform: translateY(12px);
    }

    .station-card:nth-child(1),
    .station-card:nth-child(2),
    .station-card:nth-child(3) {
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .station-card,
    .station-card__media img,
    .station-card .station-index,
    .station-card__overlay,
    .station-card .button {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .station-card,
    .station-card .station-index {
        opacity: 1 !important;
    }
}