.coding-image-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 4/3;
    perspective: 1000px;
    overflow: hidden;
}

.coding-piece {
    position: absolute;
    width: 50%;
    height: 50%;
    opacity: 0;
    overflow: hidden;
}

.coding-piece img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.coding-piece.top-left {
    top: 0;
    left: 0;
    transform: translate(-120%, -120%) rotate(-45deg) scale(0.6);
    opacity: 0;
    transform-origin: bottom right;
}

.coding-piece.top-right {
    top: 0;
    right: 0;
    transform: translate(120%, -120%) rotate(45deg) scale(0.6);
    opacity: 0;
    transform-origin: bottom left;
}

.coding-piece.bottom-left {
    bottom: 0;
    left: 0;
    transform: translate(-120%, 120%) rotate(45deg) scale(0.6);
    opacity: 0;
    transform-origin: top right;
}

.coding-piece.bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(120%, 120%) rotate(-45deg) scale(0.6);
    opacity: 0;
    transform-origin: top left;
}

.coding-piece.animate.top-left {
    animation: slideTopLeft 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.coding-piece.animate.top-right {
    animation: slideTopRight 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
}

.coding-piece.animate.bottom-left {
    animation: slideBottomLeft 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}

.coding-piece.animate.bottom-right {
    animation: slideBottomRight 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
}

@keyframes slideTopLeft {
    0% {
        opacity: 0;
        transform: translate(-120%, -120%) rotate(-45deg) scale(0.6);
    }
    30% {
        opacity: 0.7;
        transform: translate(-20%, -20%) rotate(-15deg) scale(1.1);
    }
    60% {
        opacity: 0.9;
        transform: translate(-5%, -5%) rotate(-5deg) scale(0.95);
    }
    80% {
        opacity: 1;
        transform: translate(-2%, -2%) rotate(-2deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

@keyframes slideTopRight {
    0% {
        opacity: 0;
        transform: translate(120%, -120%) rotate(45deg) scale(0.6);
    }
    30% {
        opacity: 0.7;
        transform: translate(20%, -20%) rotate(15deg) scale(1.1);
    }
    60% {
        opacity: 0.9;
        transform: translate(5%, -5%) rotate(5deg) scale(0.95);
    }
    80% {
        opacity: 1;
        transform: translate(2%, -2%) rotate(2deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

@keyframes slideBottomLeft {
    0% {
        opacity: 0;
        transform: translate(-120%, 120%) rotate(45deg) scale(0.6);
    }
    30% {
        opacity: 0.7;
        transform: translate(-20%, 20%) rotate(15deg) scale(1.1);
    }
    60% {
        opacity: 0.9;
        transform: translate(-5%, 5%) rotate(5deg) scale(0.95);
    }
    80% {
        opacity: 1;
        transform: translate(-2%, 2%) rotate(2deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

@keyframes slideBottomRight {
    0% {
        opacity: 0;
        transform: translate(120%, 120%) rotate(-45deg) scale(0.6);
    }
    30% {
        opacity: 0.7;
        transform: translate(20%, 20%) rotate(-15deg) scale(1.1);
    }
    60% {
        opacity: 0.9;
        transform: translate(5%, 5%) rotate(-5deg) scale(0.95);
    }
    80% {
        opacity: 1;
        transform: translate(2%, 2%) rotate(-2deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}