/* Wrapper position */
.thought-sequence {
    position: absolute;

    display: flex;
    flex-direction: column;
    /* Stack from bottom to top */
    align-items: flex-start;
    left: 7%;
    bottom: 41%;
    width: 578px;
}

/* Thought images */
.thought-img {
    width: 17px;
    margin-left: 55%;
    opacity: 0;

    transform-origin: center;
}

/* Add space only between bubbles, from bottom to top */
.thought-img:not(:last-child) {
    margin-top: 10px;
}

/* Sequential delays */
.img1 {
    animation-delay: 1s;
    margin-left: 58%
}

.img2 {
    animation-delay: 1.5s;
    width: 20px;
    margin-bottom: 1px;
}

.img3 {
    animation-delay: 2s;
    width: 25px;
    margin-bottom: -6px;
    margin-left: 52%
}

/* Quote block styles */
.quote-block {

    opacity: 0;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    align-self: center;

    padding: 15px 20px;
    border-radius: 12px;
}

.quote-block .quote-title,
.quote-block .quote-text,
.quote-block .quote-author {
    color: grey;
    font-family: 'Poppins', sans-serif;
}

/* Quote text */
.quote-block .quote-text {
    font-size: 15px;
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;

}

.quote-block .quote-author {
    font-size: 0.9rem;


}

@media (max-width:1710px) {
    .thought-sequence {
        left: 1%;
        bottom: 43%;
    }
}

@media (max-width:787px) {

    .quote-block {
        max-width: 200px;
        align-self: none;
    }

    .quote-block .quote-title {
        font-size: 12px;

    }

    .quote-block .quote-author {
        font-size: 10px;
    }



    .quote-block .quote-text {
        padding-top: 5px;
        font-size: 10px;
    }

    .thought-sequence {
        bottom: 27%;
        left: -47%;
    }

    .thought-img {
        width: 0px;
    }

}

/* Animations */
@keyframes bubblePop {
    0% {
        opacity: 0;
        transform: scale(0) translateY(30px);
    }

    50% {
        opacity: 1;
        transform: scale(1.3) translateY(-10px);
    }

    70% {
        transform: scale(0.95) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes quoteReveal {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translateY(5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bubblePopOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.3) translateY(-10px);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
}

@keyframes quoteHide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(0.95) translateY(5px);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
}

.thought-img.reverse {
    animation: bubblePopOut 0.6s forwards;
}

.quote-block.reverse {
    animation: quoteHide 0.8s forwards;
}