.business_section_transition {
    color: white;
    width: 85vw;
    margin: 0 auto;
}

.business_section_transition h1 {
    font-size: 2vw;
    line-height: 1.25;
    padding: 1rem 1rem; 
    border-radius: 25px; 
    position: relative; 
    width: fit-content;
}

/* Text Sent */
.transition_text_1 {
    background-color: var(--apple_blue);
    opacity: 0;
    width: fit-content;
    max-width: 40vw;
    justify-content: right;
}

    /* JIGGLE */
    .sent_text{
        width: fit-content;
        cursor: crosshair;
        margin-left: 50%;
    }
        .sent_text:hover {
            animation: sent_text_jiggle 1s forwards;
        }

        .sent_text:not(:hover) {
            animation: sent_text_jiggle_reverse 1s forwards; 
        }


    /* Text message tail */
        .transition_text_1::before {
            content: "";
            position: absolute;
            z-index: 0;
            bottom: -5px;
            right: -15px;
            height: 30px;
            width: 30px;
            background: var(--apple_blue);
            background-attachment: fixed;
            border-bottom-left-radius: 15px;
        }

        .transition_text_1::after{
            content: "";
            position: absolute;
            z-index: 1;
            bottom: -5px;
            right: -20px;
            width: 20px;
            height: 40px;
            background: var(--background_gray);
            border-bottom-left-radius: 10px;
        }


/* Text Received */
    .transition_text_2 {
        background-color: #30D158; 
        width: fit-content;
        max-width: 40vw;
        color: white; 
        opacity: 0;
    }
    /* JIGGLE */
        .receive_text{
            width: fit-content;
            cursor: crosshair;
        }

        .receive_text:hover {
            animation: receive_text_jiggle 1s forwards;
        }

        .receive_text:not(:hover) {
            animation: receive_text_jiggle_reverse 1s forwards; 
        }

    /* Text message tail */
        .transition_text_2::before {
            content: "";
            position: absolute;
            z-index: 0;
            bottom: -5px;
            left: -15px;
            height: 30px;
            width: 30px;
            background: #30D158;
            background-attachment: fixed;
            border-bottom-right-radius: 15px;
        }

        .transition_text_2::after{
            content: "";
            position: absolute;
            z-index: 1;
            bottom: -5px;
            left: -20px;
            width: 20px;
            height: 40px;
            background: var(--background_gray);
            border-bottom-right-radius: 10px;
        }


/* Text Message Jiggle */
    @keyframes sent_text_jiggle {
        0%{ transform: rotate(0deg); }
        20%{ transform: rotate(-4deg); }
        50%{ transform: rotate(-1deg); }
        100%{ transform: rotate(-4deg); }
    }

        @keyframes sent_text_jiggle_reverse {
            0% { transform: rotate(-4deg); }
            20% { transform: rotate(0deg); }
            50% { transform: rotate(-1deg); }
            100% { transform: rotate(0deg); }
        }


    @keyframes receive_text_jiggle {
        0%{ transform: rotate(0deg); }
        20%{ transform: rotate(4deg); }
        50%{ transform: rotate(1deg); }
        100%{ transform: rotate(4deg); }
    }

        @keyframes receive_text_jiggle_reverse {
            0% { transform: rotate(4deg); }
            20% { transform: rotate(0deg); }
            50% { transform: rotate(1deg); }
            100% { transform: rotate(0deg); }
        }

@keyframes receive_text_appear {
    0% {
        transform: translate(-50px, 100px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0)  scale(1);
        opacity: 1;
    }
}

@keyframes sent_text_appear {
    0% {
        transform: translate(50px, 100px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0)  scale(1);
        opacity: 1;
    }
}

/* Animation Trigger */
.in-view.transition_text_1 {
    animation: sent_text_appear 2s forwards !important;
  }
  
  .in-view.transition_text_2 {
    animation: receive_text_appear 2s forwards !important;
  }