/* CSS works in conjunction with photo-swing.js */
/* Creates the swing-when-knocked effect for images */
/* Used in _caring_accommodation_gallery.html */

.swingable {
    cursor: url("../images/gallery-pointer.png"), zoom-in;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.photo-container {
    position: relative;
    width: 100%;
}

/* Default desktop styling */
.photo {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
/* Mobile-friendly responsiveness */
@media (max-width: 768px) {
    .photo-container {
        padding: 10px;
    }
    .photo {
        transform-origin: center top;
    }
}

.swinging {
    animation: swing 0.8s ease forwards;
}

@keyframes swing {
    0% { transform: rotate(calc(var(--initial-rotation) + 0deg)); }
    20% { transform: rotate(calc(var(--initial-rotation) + 5deg)); }
    40% { transform: rotate(calc(var(--initial-rotation) - 4deg)); }
    60% { transform: rotate(calc(var(--initial-rotation) + 3deg)); }
    80% { transform: rotate(calc(var(--initial-rotation) - 1deg)); }
    100% { transform: rotate(calc(var(--initial-rotation) + 0deg)); }
}