// Entrance animation keyframes
@keyframes bw-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bw-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bw-step-layout {
    display: block;
    width: 100%;
    margin: 60px 0;

    &__inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        padding: 40px 20px;
        position: relative;
    }

    &__card {
        position: relative;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

            .bw-step-layout__background img {
                transform: scale(1.1);
            }
        }

        &[data-has-image="true"] {
            color: #fff;

            .bw-step-layout__content {
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
                position: relative;
                z-index: 2;
            }

            .bw-step-layout__title,
            .bw-step-layout__description {
                color: #fff;
            }
        }
    }

    &__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
    }

    &__content {
        padding: 30px;
        position: relative;
        z-index: 2;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    &__title {
        font-size: 28px;
        font-weight: 600;
        margin: 0 0 15px 0;
        line-height: 1.2;
    }

    &__description {
        font-size: 16px;
        line-height: 1.6;
        margin: 0 0 20px 0;
        opacity: 0.9;
    }

    &__button {
        display: inline-block;
        padding: 12px 24px;
        background: transparent;
        color: #fff;
        border: 2px solid #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
            background: #fff;
            color: #333;
            transform: translateX(5px);
        }
    }

    // Step effect - Low to High with entrance animation
    &--low-to-high {
        .bw-step-layout__card {
            opacity: 0;
            
            &--1 {
                margin-top: 80px;
            }
            &--2 {
                margin-top: 40px;
            }
            &--3 {
                margin-top: 0;
            }
        }
        
        // Add class when cards are visible (for scroll trigger)
        &.in-view .bw-step-layout__card {
            animation: bw-slide-in-left 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            
            &--1 {
                animation-delay: 0s;
            }
            &--2 {
                animation-delay: 0.3s;
            }
            &--3 {
                animation-delay: 0.6s;
            }
        }
    }

    // Step effect - High to Low with entrance animation
    &--high-to-low {
        .bw-step-layout__card {
            opacity: 0;
            
            &--1 {
                margin-top: 0;
            }
            &--2 {
                margin-top: 40px;
            }
            &--3 {
                margin-top: 80px;
            }
        }
        
        // Add class when cards are visible (for scroll trigger)
        &.in-view .bw-step-layout__card {
            animation: bw-slide-in-right 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            
            &--1 {
                animation-delay: 0s;
            }
            &--2 {
                animation-delay: 0.3s;
            }
            &--3 {
                animation-delay: 0.6s;
            }
        }
    }

    // Cards without background images
    &__card:not([data-has-image="true"]) {
        background: #f8f9fa;

        .bw-step-layout__title {
            color: #333;
        }

        .bw-step-layout__description {
            color: #666;
        }

        .bw-step-layout__button {
            background: #333;
            color: #fff;
            border-color: #333;

            &:hover {
                background: transparent;
                color: #333;
            }
        }
    }

    // Responsive Design
    @media (max-width: 1024px) {
        &__inner {
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }

        &__card {
            min-height: 350px;
        }

        &__title {
            font-size: 24px;
        }
    }

    // Mobile Stacking
    @media (max-width: 768px) {
        &__inner {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 20px 0;
        }

        // Remove step effect on mobile
        &--low-to-high,
        &--high-to-low {
            .bw-step-layout__card {
                &--1,
                &--2,
                &--3 {
                    margin-top: 0;
                }
            }
        }

        &__card {
            width: 100%;
            height: auto;
            min-height: 400px;
            position: relative;
            display: flex;
            flex-direction: column;
            
            .bw-step-layout__background {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
            
            .bw-step-layout__overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
            }
            
            .bw-step-layout__content {
                position: relative;
                z-index: 3;
                padding: 30px 20px;
                margin-top: auto;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                background: linear-gradient(to top, 
                    rgba(0, 0, 0, 0.9) 0%, 
                    rgba(0, 0, 0, 0.7) 50%,
                    rgba(0, 0, 0, 0.4) 100%);
            }
            
            &[data-has-image="true"] {
                .bw-step-layout__title,
                .bw-step-layout__description,
                .bw-step-layout__button {
                    color: #fff;
                    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
                }
            }
        }

        &__title {
            font-size: 22px;
            margin-bottom: 12px;
        }

        &__description {
            font-size: 14px;
            margin-bottom: 16px;
            line-height: 1.5;
        }

        &__button {
            padding: 10px 20px;
            font-size: 13px;
            white-space: nowrap;
        }
    }

    // Wide and Full alignments
    &.alignwide {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    &.alignfull {
        max-width: 100%;
        
        .bw-step-layout__inner {
            max-width: 1400px;
            margin: 0 auto;
        }
    }
}