/* --- layout container --- */
.image-container-bottom {
    position: relative;
    max-width: 100%;
    aspect-ratio: 832 / 762;
    overflow: visible;
}

    /* all layers stack absolutely inside the container */
    .image-container-bottom img {
        position: absolute;
        display: block;
        max-width: none;
        height: auto;
        will-change: transform, opacity;
    }

    /*  Pause all child animations by default + hide (so nothing plays on load) */
    .image-container-bottom img {
        animation-play-state: paused;
        opacity: 0;
    }

    /* When in view → play animations */
    .image-container-bottom.is-inview img {
        animation-play-state: running;
        opacity: 0;
    }

/* ---- positions + your original animation timings ---- */
.person-background-bottom {
    z-index: 1;
    width: 90%;
    left: 0;
    top: 0;
    animation: zoomIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 0s forwards;
}

.person-bottom {
    z-index: 2;
    width: 90%;
    left: 0;
    top: 0;
    animation: fadeIn 2s var(--ease, cubic-bezier(.22,.84,.24,1)) 1s forwards;
}

.bubble_one {
    z-index: 3;
    width: 55%;
    left: -10%;
    top: 25%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 1.5s forwards;
}

.bubble_two {
    z-index: 3;
    width: 45%;
    left: 0%;
    bottom: -10%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 2s forwards;
}

.bubble_three {
    z-index: 3;
    width: 45%;
    right: 0%;
    top: 60%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 2.5s forwards;
}

.bubble_four {
    z-index: 3;
    width: 50%;
    right: 0%;
    top: 30%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 3s forwards;
}

.bubble_five {
    z-index: 3;
    width: 40%;
    right: 0%;
    bottom: 0%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 3.5s forwards;
}

/* --- your existing responsive rules (unchanged) --- */
@media (max-width: 1399.98px) {
    .image-container-bottom {
        margin: 16px auto;
        aspect-ratio: 3 / 4;
    }

    .person-background-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .person-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .bubble_one {
        width: 55%;
        left: -10%;
        top: 25%;
    }

    .bubble_two {
        width: 45%;
        left: 0%;
        bottom: 20%;
    }

    .bubble_three {
        width: 45%;
        right: 0%;
        top: 40%;
    }

    .bubble_four {
        width: 45%;
        right: -10%;
        bottom: 25%;
    }

    .bubble_five {
        width: 45%;
        right: -10%;
        bottom: 30%;
    }
}

@media (max-width: 1199.98px) {
    .image-container-bottom {
        margin: 16px auto;
        aspect-ratio: 3 / 4;
    }

    .person-background-bottom {
        width: 100%;
        left: 0%;
        top: 10%;
    }

    .person-bottom {
        width: 100%;
        left: 0%;
        top: 10%;
    }

    .bubble_one {
        width: 55%;
        left: -10%;
        top: 25%;
    }

    .bubble_two {
        width: 45%;
        left: 0%;
        bottom: 20%;
    }

    .bubble_three {
        width: 45%;
        right: 0%;
        top: 40%;
    }

    .bubble_four {
        width: 45%;
        right: -10%;
        bottom: 30%;
    }

    .bubble_five {
        width: 45%;
        right: -10%;
        bottom: 15%;
    }
}

@media (max-width: 991.98px) {
    .image-container-bottom {
        margin: 0px auto;
        aspect-ratio: 3 / 4;
    }

    .person-background-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .person-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .bubble_one {
        width: 50%;
        left: -10%;
        top: 18%;
    }

    .bubble_two {
        width: 45%;
        left: 0%;
        bottom: 25%;
    }

    .bubble_three {
        width: 45%;
        right: 0%;
        top: 40%;
    }

    .bubble_four {
        width: 45%;
        right: 0%;
        bottom: 15%;
    }

    .bubble_five {
        width: 45%;
        right: 0%;
        bottom: 30%;
    }
}

@media (max-width: 767.98px) {
    .image-container-bottom {
        margin: 16px auto;
        aspect-ratio: 3 / 4;
    }

    .person-background-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .person-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .bubble_one {
        width: 50%;
        left: -10%;
        top: 18%;
    }

    .bubble_two {
        width: 45%;
        left: 0%;
        bottom: 25%;
    }

    .bubble_three {
        width: 45%;
        right: 0%;
        top: 40%;
    }

    .bubble_four {
        width: 45%;
        right: 0%;
        bottom: 15%;
    }

    .bubble_five {
        width: 45%;
        right: 0%;
        bottom: 30%;
    }
}

@media (max-width: 575.98px) {
    .image-container-bottom {
        margin: 0px auto;
        aspect-ratio: 3 / 4;
    }

    .person-background-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .person-bottom {
        width: 100%;
        left: 0%;
        top: 0%;
    }

    .bubble_one {
        width: 70%;
        left: 15%;
        top: -10%;
    }

    .bubble_two {
        width: 50%;
        left: -5%;
        bottom: 20%;
    }

    .bubble_three {
        width: 55%;
        left: 50%;
        bottom: 90%;
    }

    .bubble_four {
        width: 70%;
        right: 15%;
        bottom: 10%;
        display: none !important;
    }

    .bubble_five {
        width: 70%;
        left: 15%;
        bottom: 30%;
        display: none !important;
    }
}