@use '../abstracts' as *;

#projects {
    position: relative;
    width: auto;
    height: auto;
    padding: 8rem 0 4rem 10rem;
    margin: 2rem 2rem 8rem 2rem;
    align-items: center;
    justify-content: center;
    text-align: center;

    #project-title {
        position: relative;
        margin: 2rem 0 4rem 0;
        color: $clr-accent;
        text-align: center;

        h2 {
            font-size: $font-size-subtitle;
        }
    }

    #card_section {
        position: relative;
        display: grid;
        padding: 0 5rem;
        height: 100vh;
        line-height: 1.6;
        place-items: center;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;

        .card {
            background-size: cover;
            padding: 10rem 0 0 0;
            max-width: 30rem;
            justify-self: center;
            overflow: hidden;
            will-change: transform, opacity;

            .card-content {
                --padding: 1.5rem;
                padding: var(--padding);
                background: linear-gradient(
                    hsl(0 0% 0% / 0),
                    hsl(20 0% 0% / .4) 19%,
                    hsl(0 0% 0% / 1)
                );

                @media (hover) {
                    & {
                        transform: translateY(60%);
                        transition: transform 500ms ease;
                    }
                
                    & > *:not(.card-title) {
                        opacity: 0;
                        transition: opacity 500ms ease-in;
                    }
                }

                .card-title {
                    position: relative;
                    width: max-content;
                    color: $clr-white !important;
                    font-size: $font-size-about;

                    &::after {
                        content: '';
                        position: absolute;
                        height: 4px;
                        left: calc(var(--padding) * -1);
                        bottom: -2px;
                        width: calc(100% + var(--padding));
                        background: $clr-accent;
                        transform-origin: left;
                        transition: transform 500ms ease;
                    }

                    @media (hover) {
                        &::after {
                            transform: scaleX(0);
                        }
                    }
                }

                .card-body {
                    margin-top: 1rem;
                    color: $clr-white !important;
                    font-size: 0.95rem;
                    font-family: $font-secondary;
                    font-weight: 500;
                    text-align: left;
                }
            }

            @media (hover: hover) {
                &:hover .card-content {
                    transform: translateY(0);
                    transition-delay: 500ms;

                    & > *:not(.card-title) {
                        opacity: 1;
                        transition-delay: 900ms;
                    }
                }

                &:focus-within .card-content {
                    transform: translateY(0);
                    transition-delay: 500ms;
                    transition-duration: 0ms;

                    & > *:not(.card-title) {
                        opacity: 1;
                        transition-delay: 900ms;
                        transition-delay: 250ms;
                    }
                }
            }

            &:hover .card-content .card-title::after,
            &:focus-within .card-content .card-title::after {
                transform: scaleX(1);
            }   
        }

        .card-a {
            position: relative;
            background: url('https://i.pinimg.com/originals/ab/65/14/ab65145d729a752fc25eb8ea5a3fedc0.jpg');
            background-position: center;
            background-size: cover;
            grid-column-start: 1;
            grid-column-end: 1;
            grid-row-start: 1;
            grid-row-end: span 1;
            z-index: 1;
        
            transition: right 700ms ease-in,
                transform 700ms ease,
                opacity 1200ms ease;

            @media (hover) {
                &:hover,
                &:focus-within {
                    transform: scale(1.05);
                    z-index: 4;
                }
            }
        }

        .card-b {
            position: relative;
            top: 12rem;
            left: -3rem;
            background: url('https://mantebridts.be/content/images/2020/04/css.png');
            background-position: center;
            background-size: contain;
            grid-column-start: 2;
            grid-column-end: span 2;
            grid-row-start: 1;
            grid-row-end: span 1;
            z-index: 2;
          
            transition: left 800ms ease-in,
                transform 700ms ease,
                opacity 1200ms ease;

            @media (hover) {
                &:hover,
                &:focus-within {
                    transform: scale(1.05);
                    z-index: 4;
                }
            }

            .card-content {
                .card-title {
                    float: right;
                    margin-bottom: 1rem;
    
                    &::after {
                        left: 0;
                        right: calc(var(--padding) * -1);
                        transform-origin: right;
                    }
                }
    
                .card-body {
                    clear: right;
                }
            }           
        }

        .card-c {
            position: relative;
            top: 5rem;
            background: url('https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg');
            background-position: center;
            background-size: cover;
            grid-column-start: 1;
            grid-column-end: span 1;
            grid-row-start: 2;
            grid-row-end: span 2;
            z-index: 3;
          
            transition: left 900ms ease-in,
                transform 700ms ease,
                opacity 1200ms ease;

            @media (hover) {
                &:hover, 
                &:focus-within {
                    transform: scale(1.05);
                    z-index: 4;
                }
            }
        }
    }
}