/* basic reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* page setup */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url(./Page\ Background.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* container for animation */
.box{
    position: relative;
    width: 20rem;
    height: 25rem;
    cursor: pointer;
}

/* background setup */
.bg{
    width:100% ;
    height: 100%;
    position: absolute;
    background: url(./card\ Background.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 1s;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

.box:hover .bg{
    transform: perspective(40px) rotateX(2deg) translateY(-50px);
}

/* bird animation */
.bird{
    position: absolute;
    width: 20rem;
    height: 20rem;
    background-image: url(./Bird\ Left\ Wing.png);
    background-repeat: no-repeat;
    background-size: 100%;
    animation: none;
    transition: transform 1s ;
}

.box:hover .bird{
    animation: birdanimation 0.3s steps(2) infinite;
    transform: translateY(-200px) translateX(-10px);
}

/* keyframes for bird flip */
@keyframes birdanimation{
    0%, 100%{
        background-image: url(./Bird\ Left\ Wing.png);
    }
    50% {
        background-image: url(./Bird\ Right\ Wing.png);
    }
}