.a-fade-in {
    display: inline-block;
    margin: 0 0.5rem;
    animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 4s; /* don't forget to set a duration! */
}

.a-bounce {
    animation: bounce; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 4s; /* don't forget to set a duration! */
}

:root {
    --ease: cubic-bezier(.22,.84,.24,1);
}



/* --- layout container --- */
.image-container {
    position: relative;
    max-width: 100%; /* adjust to your page width */

    aspect-ratio: 1100 / 860; /* keeps proportions similar to your design */
    overflow: visible;
}

    /* all layers stack absolutely inside the container */
    .image-container img {
        position: absolute;
        display: block;
        max-width: none;
        height: auto;
        opacity: 0; /* for entrance animation */

        will-change: transform, opacity;
    }

/* ---- positions (tweak %/px as needed for your slices) ---- */

/* big purple round background */
.person-background {
    z-index: 1;
    width: 90%;
    left: 0; /* center circle behind person */
    top: 0px;
    animation: zoomIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) .0s forwards;
}

/* person cutout */
.person {
    z-index: 2;
    width: 90%;
    left: 0; /* center circle behind person */
    top: 0px;
    animation: fadeIn 2s var(--ease, cubic-bezier(.22,.84,.24,1)) 1s forwards;
}


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

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


.bubble-three {
    z-index: 4;
    width: 50%;
    right: 0%;
    bottom: -10%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 2.5s forwards;
}

/* unused  */
.bubble-four {
    z-index: 3;
    width: 38%;
    left: 0%;
    bottom: 0%;
    animation: riseIn 1s var(--ease, cubic-bezier(.22,.84,.24,1)) 2.5s forwards;
}

/* --- entrance animation --- */
@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.2); /* start smaller */
    }

    to {
        opacity: 1;
        transform: scale(1); /* normal size */
    }
}




/* Medium (md) — up to 767.98px */



@media (max-width: 1399.98px) {

    .image-container {
        margin: 16px auto;
        aspect-ratio: 3 / 4;
    }

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

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

    .bubble-one {
        width: 50%;
        left: 0%;
        top: 30%;
    }

    .bubble-two {
        width: 45%;
        right: 0%;
        bottom: 25%;
    }

    .bubble-three {
        width: 55%;
        right: 0%;
        bottom: 20%;
    }
}


/* Extra large (xl) — up to 1199.98px */
@media (max-width: 1199.98px) {

    .image-container {
        margin: 16px auto;
        aspect-ratio: 3 / 4;
    }

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

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

    .bubble-one {
        width: 55%;
        left: -10%;
        bottom: 6%;
    }

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

    .bubble-three {
        width: 55%;
        right: -10%;
        bottom: 20%;
    }
}

/* Large (lg) — up to 991.98px */
@media (max-width: 991.98px) {
    .image-container {
        margin: 0px auto;
        aspect-ratio: 3 / 4;
    }

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

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

    .bubble-one {
        width: 45%;
        right: -10%;
        bottom: 6%;
    }

    .bubble-two {
        width: 45%;
        right: -10%;
        top: 30%;
    }

    .bubble-three {
        width: 55%;
        right: -10%;
        bottom: 30%;
    }
}


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

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

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

    .bubble-one {
        width: 45%;
        right: -10%;
        bottom: 6%;
    }

    .bubble-two {
        width: 45%;
        right: -10%;
        top: 30%;
    }

    .bubble-three {
        width: 55%;
        right: -10%;
        bottom: 30%;
    }
}

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

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

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

    .bubble-one {
        width: 70%;
        right: 0%;
        bottom: 6%;
        display: none !important
    }

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

    .bubble-three {
        width: 70%;
        right: 15%;
        bottom: 10%;
    }
}