.detachable-device-container {
    /* Use a small inner padding so both images keep an equal boundary space
       regardless of element width. The padding value can be adjusted per
       breakpoint below. */
    --detachable-padding: 5%;
    --mask-offset: -154%; /* initial visual offset for the detachable mask */

    position: relative;
    min-width: 400px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--detachable-padding);
    box-sizing: border-box;
}

/* Ensure images inside the detachable container scale properly and do not
   introduce inline whitespace or unexpected gaps. This helps keep the left
   and right boundaries visually equal across screen sizes. */
.detachable-device-container img {
    display: block;
    /* max-width: 100%; */
    height: auto;
    object-fit: contain;
}

.detachable-spacer {
    /* Center the spacer inside the padded container and ensure it respects
       the same left/right boundaries as the mask. */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: calc(100% - (2 * var(--detachable-padding)));
    max-width: 100%;
    height: auto;
    display: block;
}

.detachable-mask {
    width: 50%;
    max-width: 250px;
    position: absolute;
    left: 50%;
    transform: translateX(var(--mask-offset));
    z-index: 2;
    animation: detachLeftSmooth 8s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
    height: auto;
}

@keyframes detachLeftSmooth {
    /* Animate relative to the base --mask-offset so the movement keeps the
       same visual proportions at different screen sizes. */
    0% {
        transform: translateX(var(--mask-offset));
        opacity: 1;
    }
    20% {
        transform: translateX(calc(var(--mask-offset) - 8%));
        opacity: 1;
    }
    40% {
        transform: translateX(calc(var(--mask-offset) - 20%));
        opacity: 1;
    }
    /*60% {
        transform: translateX(calc(var(--mask-offset) - 30%));
        opacity: 1;
    }*/
    100% {
        transform: translateX(var(--mask-offset));
        opacity: 1;
    }
}

/* Responsive styles */
@media (max-width: 600px) {
    .detachable-device-container {
        /* reduce padding slightly on small screens so images can scale */
        --detachable-padding: 6%;
        --mask-offset: -35%;

        width: 90vw;
        height: 60vw;
        /*min-width: 220px;*/
        min-height: 180px;
        max-width: 100vw;
        max-height: 80vw;
    }
    .detachable-mask {
        width: 60%;
        max-width: 180px;
        /* keep bottom smaller on small screens */
        bottom: 3vw;
        transform: translateX(var(--mask-offset));
    }
    /* No change for .detachable-spacer at 600px, keep desktop logic */
}

@media (max-width: 450px) {
    .detachable-mask {
        width: 55%;
        max-width: 120px;
        bottom: 6vw;
        left: 83px;
        transform: none;
    }
    .detachable-spacer {
        width: 100%;
        max-width: 212px;
        bottom: 8vw;
        left: 198px;
        transform: translateX(var(--mask-offset));
    }
}

@media (max-width: 400px) {
    .detachable-mask {
        width: 50%;
        max-width: 110px;
        bottom: 34px;
        left: 90px;
        transform: none;
    }
    .detachable-spacer {
        width: 100%;
        max-width: 220px;
        /*margin-bottom: 10vw;
        left: 80%;*/
        bottom: 8vw;
        transform: translateX(var(--mask-offset));
    }
}

@media (max-width: 375px) {
    .detachable-device-container {
        /* compact padding and sizing for very small screens */
        --detachable-padding: 6%;
        --mask-offset: -45%;

        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 160px;
        padding: var(--detachable-padding);
        box-sizing: border-box;
    }

    .detachable-mask {
        /* center the mask above the spacer and enable a gentle animation on small screens */
        position: absolute;
        width: 40%;
        /*max-width: 90px;*/
        left: 18%;
        /*transform: translateX(var(--mask-offset));*/
        bottom: 17px;
        z-index: 3;
        /* shorter, smoother animation for small devices */
        animation: detachLeftSmooth 4.5s ease-in-out infinite alternate;
    }

    .detachable-spacer {
        /* center the spacer and allow it to take most of the width */
        position: absolute;
        left: 48%;
        transform: translateX(-30%);
        width: 75%;
        /*max-width: 260px;*/
        bottom: 5vw;
        z-index: 1;
    }

    /* ensure images inside the container scale nicely on very small screens */
    .detachable-device-container img {
        max-width: 100%;
        height: auto;
    }
}