<section class="section-first">
  <div class="card-dark">
    <div class="card-dark-body"></div>
    <div class="card-dark-image">
      <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="this is image">
    </div>
    <div class="card-dark-content">
      <div class="details">
        <h2>Alina Smith<br><span>Senior Developer</span></h2>
        <div class="data">
          <h3>342<br><span>Posts</span></h3>
          <h3>120K<br><span>Followers</span></h3>
          <h3>285<br><span>Following</span></h3>
        </div>
        <div class="cta">
          <button>Follow</button>
          <button>Message</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-second">
  <div class="card-light">
    <div class="card-light-body"></div>
    <div class="card-light-image">
      <img src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="this is image">
    </div>
    <div class="card-light-content">
      <div class="details">
        <h2>Alina Smith<br><span>Senior Developer</span></h2>
        <div class="data">
          <h3>342<br><span>Posts</span></h3>
          <h3>120K<br><span>Followers</span></h3>
          <h3>285<br><span>Following</span></h3>
        </div>
        <div class="cta">
          <button>Follow</button>
          <button>Message</button>
        </div>
      </div>
    </div>
  </div>
</section>

html,body {
    width: 100%;
    overflow-x: hidden;
}

html {
    font-size: 62.5%;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    backface-visibility: hidden;
}

body{
    box-sizing: border-box;
}



$color-white: #fff;
$color-dark: #000;

// dark
$color-dark-primary-light: #323332;
$color-dark-primary: #292929;
$color-dark-primary-dark: #000;

$color-dark-image: #ff3c7b;
$color-dark-body: #45f3ff;

// light
$color-light-primary-light: #F8F9FB;
$color-light-primary: #d6d6d6;
$color-light-primary-dark: #c8c8c8;

$color-light-image: #f6c90e;
$color-light-body: #174D60;


body{
    display: flex;
}

@media screen and (max-width: 800px) {
    body{
        flex-direction: column;
    }
}

// First Crad-----------------------------------------------------------------------------------------
.section-first{
    background-color: $color-dark-primary-light;
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

@media screen and (max-width: 800px) {
    .section-first{
        width: 100%;
        height: 80vh;
    }
}

.card-dark{
    position: relative;
    width: 340px;
    margin: 0 1rem;
    height: 190px;
    background-color: $color-dark-primary-light;
    transition: .5s;

    &:hover{
        height: 450px;
    }
    
    /* body-------------------------------------------------------------- */
    &-body{
        position: absolute;
        inset: 0;
        background-color: $color-dark-primary-dark;
        overflow: hidden;

        &::before{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% -50%);
            width: 600px;
            height: 120px;
            background: linear-gradient(transparent, $color-dark-body, $color-dark-body, $color-dark-body, transparent);
            animation: animate123 2s linear infinite;
        }

        &::after{
            content: "";
            position: absolute;
            inset: 3px;
            background-color: $color-dark-primary;
        }
    }

    // Image--------------------------------------------------------------
    &-image{
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 150px;
        padding: 5px;
        background-color: $color-dark-primary-dark;
        transition: .5s linear infinite;
        overflow: hidden;
        transition: .5s linear;

        &::after{
            content: "";
            position: absolute;
            inset: 3px;
            background-color: $color-dark-primary;
        }

        &::before{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% -50%);
            width: 500px;
            height: 100px;
            background: linear-gradient(transparent, $color-dark-image, $color-dark-image, $color-dark-image, transparent);
            animation: animate321 2s linear infinite;
        }

        & img{
            position: relative;
            z-index: 1;
            height: 100%;
            width: 100%;
            filter: revert;
        }
    }

    &:hover &-image{
        width: 200px;
        height: 200px;
    }

    // Content--------------------------------------------------------------
    &-content{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: hidden;

        .details{
            padding: 20px 40px;
            text-align: center;
            width: 100%;
            transition: .5s;
            transform: translateY(145px);

            h2{
                font-size: 20px;
                font-weight: 600;
                color: $color-dark-body;
                line-height: 20px;
                margin: 20px;

                span{
                    font-size: 16px;
                    font-weight: 500;
                    color: $color-white;
                }
            }

            .data{
                display: flex;
                justify-content: space-around;
                margin-bottom: 20px;
                margin-top: 10px;
                transition: all .5s;

                h3{
                    font-size: 20px;
                    color: $color-dark-body;
                    font-weight: 600;
                    text-align: center;
                    margin: 10px;

                    span{
                        font-size: 16px;
                        color: $color-white;
                        font-weight: 400;
                    }
                }
            }

            .cta{
                display: flex;
                justify-content: space-between;
                gap: 20px;

                button{
                    padding: 10px;
                    width: 40%;
                    border: none;
                    outline: none;
                    border-radius: 5px;
                    font-size: 16px;
                    font-weight: 500;
                    background-color: $color-dark-body;
                    color: $color-dark-primary-dark;
                    cursor: pointer;

                    &:nth-child(2){
                        background-color: $color-white;
                    }
                }
            }
        }        
    }

    &:hover &-content .details{
        transform: translateY(0);
    }

    &:hover &-content .details .data{
        margin: 30px auto;
    }
}


// Second Card--------------------------------------------------------------------------------------------

.section-second{
    background-color: $color-light-primary-light;
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

@media screen and (max-width: 800px) {
    .section-second{
        width: 100%;
        height: 90vh;
    }
}

.card-light{
    position: relative;
    width: 340px;

    
    height: 190px;
    background-color: $color-light-primary-light;
    transition: .5s;

    &:hover{
        height: 450px;
    }
    
    /* body-------------------------------------------------------------- */
    &-body{
        position: absolute;
        inset: 0;
        background-color: $color-light-primary-dark;
        overflow: hidden;

        &::before{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% -50%);
            width: 600px;
            height: 120px;
            background: linear-gradient(transparent, $color-light-body, $color-light-body, $color-light-body, transparent);
            animation: animate123 2s linear infinite;
        }

        &::after{
            content: "";
            position: absolute;
            inset: 3px;
            background-color: $color-light-primary;
        }
    }

    // Image--------------------------------------------------------------
    &-image{
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 150px;
        padding: 5px;
        background-color: $color-light-primary-dark;
        transition: .5s linear infinite;
        overflow: hidden;
        transition: .5s linear;

        &::after{
            content: "";
            position: absolute;
            inset: 3px;
            background-color: $color-light-primary;
        }

        &::before{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% -50%);
            width: 500px;
            height: 100px;
            background: linear-gradient(transparent, $color-light-image, $color-light-image, $color-light-image, transparent);
            animation: animate321 2s linear infinite;
        }

        & img{
            position: relative;
            z-index: 1;
            height: 100%;
            width: 100%;
            filter: revert;
        }
    }

    &:hover &-image{
        width: 200px;
        height: 200px;
    }

    // Content--------------------------------------------------------------
    &-content{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: hidden;

        .details{
            padding: 20px 40px;
            text-align: center;
            width: 100%;
            transition: .5s;
            transform: translateY(145px);

            h2{
                font-size: 20px;
                font-weight: 600;
                color: $color-light-body;
                line-height: 20px;
                margin: 20px;

                span{
                    font-size: 16px;
                    font-weight: 500;
                    color: $color-dark;
                }
            }

            .data{
                display: flex;
                justify-content: space-around;
                margin-bottom: 20px;
                margin-top: 10px;
                transition: all .5s;

                h3{
                    font-size: 20px;
                    color: $color-light-body;
                    font-weight: 600;
                    text-align: center;
                    margin: 10px;

                    span{
                        font-size: 16px;
                        color: $color-dark;
                        font-weight: 400;
                    }
                }
            }

            .cta{
                display: flex;
                justify-content: space-between;
                gap: 20px;

                button{
                    padding: 1rem;
                    width: 40%;
                    border: none;
                    outline: none;
                    border-radius: 5px;
                    font-size: 16px;
                    font-weight: 500;
                    background-color: $color-light-body;
                    color: $color-light-primary-dark;
                    cursor: pointer;

                    &:nth-child(2){
                        background-color: $color-dark;
                    }
                }
            }
        }        
    }

    &:hover &-content .details{
        transform: translateY(0);
    }

    &:hover &-content .details .data{
        margin: 30px auto;
    }
}



@keyframes animate123{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes animate321{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100%{
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}