/* Name: R. Alex Swearingen*/
/* Course: ITSE 1311.001 */
/* Date: November 20, 2025 */
/* Assignment: Part 0.82 -- IN Class Assignment 13 */


/* ---------------------------- First Part ---------------------------- */

.parent {
    background-color: blue;
    height: 400px;
    width: 400px;
}

.child {
    background-color: orange;
    height: 50%;
    width: 50%;

    /* transition: transform 2s; */
    /* note when we take off transform and color changes */
    /* transition : transform 1s linear;  */
    /* transition : transform 1s ease-in-out; */
    /* transition : transform 1s cubic-bezier(0.18, 0.19, 0.58, 1.24) */
    /* add delay */
    /* transition : transform 1s cubic-bezier(0,-0.66, 1, 1.89) 2s; */
    /* now simplify this */
    /* transition : transform 1s ease-out;  */
color: white;
    text-align: center;
}

.parent:hover {
    background-color: black;
    transition: background-color 2s;
}

.parent:hover .child {

    background-color: green;
    /*height: 20%;*/
    transform: translateX(100%);
    transform: translateY(100%);
    /* transistion or animation */
    transition: transform 5s;
    /* animation name duration timing funcition */
    animation: change_it_1 1s ease-out;
    /* JAC: add keyframes below */
    animation: change_it 1s ease-out;
    /* animation: change_it 1s ease-out forwards; */
    /* animation: change_it 1s ease-out forwards 3; */
    /* JAC: go back and forth */
    /* animation: change_it 1s ease-out forwards 3 alternate; */
    /* JAC: Add a delay */
    animation: change_it 1s ease-out forwards 3 alternate 3s;
    /* JAC: do forever */
    animation: change_it 1s ease-out forwards infinite alternate;
    /* move this up to the child so it always happens */
    /* animation-play-state: paused; */
    
    
}



@keyframes change_it {
    0% {
        background-color: red;
        transform: translateX(0);
    }

    33% {
        transform: translateY(100%);
    }

    50% {
        background-color: yellow;
        width: 30%;
    }

    66% {
        transform: translateX(100%) translateY(100%);
    }

    100% {
        transform: translateX(100%);
        background-color: green;
    }
}

@keyframes change_it_1 {
    0% {
        background-color: lightblue;
        transform: translateX(50%);
    }
    50% {
        background-color: rgb(55, 0, 255);
        width: 30%;
    }
    100% {
        transform: translateX(0%);
        background-color: rgb(145, 136, 12);
    }
}