/* =========================================
   CRESCENT RELIEF - UNIVERSAL IMAGE EFFECTS
========================================= */

/* Shared image wrapper */
.cr-image-frame {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.18),
        0 4px 10px rgba(108,19,25,0.12);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* Image itself */
.cr-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Identical hover effect */
.cr-image-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 45px rgba(0,0,0,0.24),
        0 8px 20px rgba(108,19,25,0.18);
}

.cr-image-frame:hover .cr-image {
    transform: scale(1.035);
}

/* Optional pulse animation */
.cr-image-pulse {
    animation: cr-image-pulse 1.5s infinite ease-in-out;
}

@keyframes cr-image-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cr-image-frame,
    .cr-image,
    .cr-image-pulse {
        transition: none;
        animation: none;
    }

    .cr-image-frame:hover,
    .cr-image-frame:hover .cr-image {
        transform: none;
    }
}