// PRODUCT CATEGORY
// for js tilt (add parallax effect)
@include desktop{

    .product-category{
        transform-style: preserve-3d;
    }
    .product-category__content{
        transform: translateZ(1.5rem);
    }
}

.product-category{
    position: relative;
    display: block;
    height: 100%;
    padding: 3rem 3rem 6rem 3rem;
    color: white;
    background: $grey--dark;

    @include desktop{
        padding-bottom: 4.5rem;

        &:hover .product-category__view:before{
            opacity: 1;
            transform: skewY(5deg) translate3d(0, 0, 0);
        }
        &:hover .product-category__view span{
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}
.product-category__content{
    z-index: 2;
    position: relative;
}
.product-category__view{
    overflow: hidden;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    // skewed background
    &:before{
        content: '';
        position: absolute;
        top: calc(100% - 6rem);
        left: 0;
        width: 100%;
        height: 100%;
        background: lighten($grey--dark, 10%);
    }

    span{
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        display: block;
        padding: 0.75rem 1.5rem;
        line-height: $font-leading;
        font-size: 0.875rem;
        font-weight: 700;
        background: $grey--medium;
    }

    @include mobile{

        // skewed background
        &:before{
            transform: skewY(5deg);
        }
    }

    @include desktop{

        // skewed background
        &:before{
            // hide
            opacity: 0;
            transform: skewY(5deg) translate3d(0, 0.75rem, 0);
            transition-duration: 0.45s;
            transition-timing-function: $easing--medium;
            transition-property: opacity, transform;
        }

        span{
            // hide
            opacity: 0;
            transform: translate3d(0, 0.25rem, 0);
            transition-duration: 0.45s;
            transition-timing-function: $easing--medium;
            transition-property: opacity, transform;
        }
    }
}

// colors
.product-category--main{
    background: linear-gradient(-45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));

    .product-category__view:before{
        background: $main;
    }
    .product-category__view span{
        background: lighten($main, 10%);
    }
}
.product-category--secondary{
    background: linear-gradient(-45deg, $secondary, mix($main, $secondary, 50%));

    .product-category__view:before{
        background: $secondary;
    }
    .product-category__view span{
        background: lighten($secondary, 10%);
    }
}



// PRODUCT
// for js tilt (add parallax effect)
@include desktop{

    .product{
        transform-style: preserve-3d;
    }
    .product__image{
        transform: translateZ(1.5rem);
    }
    .product__title{
        transform: translateZ(3rem);
    }
}

.product{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    padding: 0 1.5rem 1.5rem 1.5rem;

    @include desktop{
        transition: background 0.45s $easing--medium;

        // hover
        &:hover{
            background: $grey--light;
        }
        &:hover .product__image img{
            transform: translate3d(0, 1.5rem, 0);
        }
        &:hover .product__title{
            color: white;
        }
        &:hover .product__title:before{
            transform-origin: left;
            transform: scaleX(1);
        }
        &:hover .product__background:before{
            transform: skewY(5deg) translate3d(0, 0.75rem, 0);
        }
    }
}
.product__image{
    z-index: 2;
    position: relative;
    width: 100%;

    img{
        display: block;
        width: 100%;
        height: 15rem;
        object-fit: contain;
    }

    @include desktop{

        img{
            transition: transform 0.45s $easing--medium;
        }
    }
}
.product__title{
    z-index: 3;
    position: relative;
    margin-top: -1.5rem;
    padding: 0.75rem 1.5rem;
    font-family: $font-family--heading;
    font-weight: 700;
    color: $grey--dark;
    background: white;

    @include desktop{
        transition: color 0.45s $easing--medium;

        // fill animation
        &:before{
            content: '';
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.45s $easing--medium;
        }
    }
}
.product__background{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    // skewed background
    &:before{
        content: '';
        position: absolute;
        top: 4.5rem;
        left: 0;
        width: 100%;
        height: 100%;
        background: $grey--light;
        transform: skewY(5deg) translate3d(0, 0, 0);
        transition-duration: 0.45s;
        transition-timing-function: $easing--medium;
        transition-property: background, transform;
    }
}

// section dark
.section--dark .product{

    .product__title{
        color: white;
        background: $grey--dark;
    }
    .product__background:before{
        background: lighten($grey--dark, 10%);
    }

    @include desktop{

        &:hover{
            background: lighten($grey--dark, 10%);
        }
    }
}

// colors
.product--main{

    @include desktop{

        .product__title:before{
            background: lighten($main, 10%);
        }

        // hover
        &:hover .product__background:before{
            background: $main;
        }
    }
}
.product--secondary{

    @include desktop{

        .product__title:before{
            background: lighten($secondary, 10%);
        }

        // hover
        &:hover .product__background:before{
            background: $secondary;
        }
    }
}



// PRODUCT IMAGE
.product-image{
    overflow: hidden;
    position: relative;
    padding: 0 1.5rem 1.5rem 1.5rem;

    // skewed background
    &:before{
        content: '';
        z-index: 1;
        position: absolute;
        top: 4.5rem;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skewY(5deg);
        background: $grey--dark;
    }

    img{
        z-index: 2;
        position: relative;
        display: block;
        width: 100%;
        height: 15rem;
        object-fit: contain;
    }

    p{
        z-index: 3;
        position: relative;
        display: inline-block;
        margin-top: -1.5rem;
        font-family: $font-family--heading;
        font-weight: 700;
        padding: 0.75rem 1.5rem;
        color: white;
        background: lighten($grey--dark, 10%);
    }
}

// colors
.product-image--main{

    // skewed background
    &:before{
        background: $main;
    }
    p{
        background: lighten($main, 10%);
    }
}
.product-image--secondary{

    // skewed background
    &:before{
        background: $secondary;
    }
    p{
        background: lighten($secondary, 10%);
    }
}



// PRODUCT DETAILS
.product-details{
    padding: 1.5rem;
    background: $grey--light;

    // reset first paragraph lead
    p:first-of-type {
        font-size: inherit;
    }

    img{
        display: block;
        width: 100%;
        max-width: 21rem;
        margin-top: 1.5rem;
    }
}



// PRODUCT SCHEMES
// for js tilt (add parallax effect)
@include desktop{

    .product-scheme{
        transform-style: preserve-3d;
    }
    .product-scheme:before,
    .product-scheme:after{
        transform: translateZ(3rem);
    }
    .product-scheme__content{
        transform: translateZ(1.5rem);
    }
}
.product-scheme-wrapper{
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;

    @include desktop{

        &:hover .product-scheme:not(:hover){

            &:before,
            &:after{
                opacity: 0;
                transform: translate3d(0, 0.75rem, 3rem);
            }
        }
    }
}
.product-scheme{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: $grey--dark;

    // circles
    &:before,
    &:after{
        content: '';
        pointer-events: none;
        z-index: 1;
        position: absolute;
        top: 50%;
        width: 2.25rem;
        height: 1.5rem;
        margin-top: -0.75rem;
        background: white;
        border-radius: 0.75rem;
    }
    &:before{
        left: -1.125rem;
    }
    &:after{
        right: -1.125rem;
    }

    // colors
    &:nth-of-type(even){
        background: lighten($grey--dark, 10%);
    }

    @include mobile{
        flex-shrink: 0;
        flex-grow: 0;
        width: 50%;
    }

    @include desktop{
        flex: 1; // equal width

        // circles
        &:before,
        &:after{
            @include transition;
        }

        &:hover{
            z-index: 2;
        }
    }
}
.product-scheme__content{
    z-index: 2;
    position: relative;
    padding: 1.5rem;
    text-align: center;

    p{
        margin-top: 0;
        font-family: $font-family--heading;
        font-weight: 700;
        color: white;
    }
    span{
        display: block;
        margin-top: 0.75rem;
        line-height: $font-leading;
        font-size: 0.875rem;
        color: rgba(white, 0.5);
    }
}

// colors
.product-scheme-wrapper--main{

    @include desktop{

        .product-scheme:hover{
            background: $main;

            &:before,
            &:after{
                background: lighten($main, 10%);
            }
        }
    }
}
.product-scheme-wrapper--secondary{

    @include desktop{

        .product-scheme:hover{
            background: $secondary;

            &:before,
            &:after{
                background: lighten($secondary, 10%);
            }
        }
    }
}