/* Container must be position relative so the canvas can overlay the image */
.feelform-3d-container {
    position: relative;
    display: inline-block; /* The JS logic handles dynamically matching the flow if needed */
    overflow: visible !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow: hidden; Removed so tilt edges are explicitly visible */
}

/* Make sure the original image stays hidden but takes up space in the document flow */
.feelform-3d-container > img {
    opacity: 0 !important; /* Keep the original aspect ratio and width in the DOM! */
    pointer-events: none;
    user-select: none;
}

/* The generated overlay canvas */
.feelform-3d-canvas {
    position: absolute;
    z-index: 10;
    cursor: default;
    touch-action: pan-y; /* allow page scroll mostly, but we capture events */
}

/* Add a smooth entry animation for the canvas */
@keyframes feelform-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feelform-3d-canvas.ready {
    animation: feelform-fade-in 0.8s ease-out forwards;
}