.anim-img-link-wrapper {
    display: inline-block;
    width: 100%;
    text-decoration: none;
}

.anim-img-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.anim-img-core {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, filter 0.5s ease;
    will-change: transform;
}

/* Hover Button - Relative to container, offset so pointer sits above center text */
.anim-img-hover-btn {
    position: absolute;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0.3);
    transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-weight: 600;
    display: none;
}

.anim-img-container:hover .anim-img-hover-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    display: block;
}

/* Zoom Effect */
.anim-img-container[data-effect="zoom"]:hover .anim-img-core {
    transform: scale(1.1);
}

/* Pop Up Tilt Effect */
.anim-img-container[data-effect="popup"] {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* Water Effect Canvas integration */
.anim-img-canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
}

/* Hover Ripple Wave CSS */
.anim-img-container[data-effect="ripple"] .anim-img-core {
    transition: filter 0.4s ease;
}
.anim-img-container[data-effect="ripple"]:hover .anim-img-core {
    filter: brightness(0.9) scale(1.02);
}

.anim-img-ripple-circle {
    position: absolute;
    border: 3px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0);
    opacity: 1;
    animation: anim-img-ripple-anim 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes anim-img-ripple-anim {
    0% {
        transform: scale(0);
        opacity: 0.9;
        border-width: 6px;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
        border-width: 1px;
    }
}