* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    /* Force hardware acceleration on Apple devices */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.image-wrapper {
    position: relative;
    cursor: pointer;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    /* Use aspect-ratio for proper proportions */
    aspect-ratio: 12/13;
    width: min(90vw, 90vh * 12/13);
    height: auto;

    /* Fallback for browsers without aspect-ratio support */
    max-width: 90vw;
    max-height: 90vh;
}

.front-image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2;
    transition: transform 0.8s ease-in-out;
    -webkit-transition: -webkit-transform 0.8s ease-in-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Prevent background bleed-through */
    background-color: transparent;
}

.image-half {
    width: 50%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    -webkit-transition: -webkit-transform 0.8s ease-in-out;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent gaps during folding */
    outline: 1px solid transparent;
}

.left-half {
    background: url('images/front.png') left center/200% 100% no-repeat;
    transform-origin: left center;
    -webkit-transform-origin: left center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Extend more to prevent gaps on left side */
    /* margin-right: -2px; */
    width: calc(50% + 1px);
}

.right-half {
    background: url('images/front.png') right center/200% 100% no-repeat;
    transform-origin: right center;
    -webkit-transform-origin: right center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Extend slightly to prevent gaps */
    /* margin-left: -1px; */
}

/* Inside surfaces for 3D effect */
.left-half::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff, #f8f8f8, #f0f0f0);
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.right-half::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #ffffff, #f8f8f8, #f0f0f0);
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.back-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/inside.png') center/cover no-repeat;
    z-index: 1;
}

/* Folding animation states */
.image-wrapper.folded .left-half {
    transform: rotateY(-120deg);
    -webkit-transform: rotateY(-120deg);
    /* Ensure no gaps during animation */
    z-index: 3;
}

.image-wrapper.folded .right-half {
    transform: rotateY(120deg);
    -webkit-transform: rotateY(120deg);
    /* Ensure no gaps during animation */
    z-index: 3;
}

/* Hover effect for better UX */
.image-wrapper:hover .front-image {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
}

.image-wrapper.folded:hover .front-image {
    transform: scale(1);
    -webkit-transform: scale(1);
}

/* App
le device specific fixes */
@supports (-webkit-appearance: none) {
    .image-wrapper {
        /* Force hardware acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Improve 3D rendering on Safari */
        -webkit-perspective-origin: center center;
        perspective-origin: center center;
    }

    .image-half {
        /* Ensure proper 3D context */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Fix potential flickering */
        -webkit-font-smoothing: antialiased;
    }

    /* Force repaint to fix rendering issues */
    .image-wrapper.folded .left-half,
    .image-wrapper.folded .right-half {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        will-change: transform;
    }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    body {
        /* padding: 10px; */
    }

    .container {
        /* padding: 10px; */
    }

    .image-wrapper {
        /* Slightly smaller on mobile for better fit */
        width: min(85vw, 85vh * 12/13);
        max-height: 70vh;
    }
}

/* Small mobile screens */
@media screen and (max-width: 480px) {
    .image-wrapper {
        width: min(90vw, 60vh * 12/13);
        max-height: 60vh;
    }
}

/* Mobile landscape mode fixes */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .image-wrapper {
        /* In landscape, prioritize height and let width adjust */
        width: min(85vw, 80vh * 12/13);
        max-height: 80vh;
    }
}

/* iPhone landscape specific */
@media screen and (orientation: landscape) and (max-height: 430px) and (max-width: 932px) {
    .image-wrapper {
        width: min(75vw, 75vh * 12/13);
        max-height: 75vh;
    }
}

/* iOS specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .image-half {
        /* Prevent subpixel rendering issues */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}