/* Shared interactive balcony diagrams.  All matching blocks on the site use
   these two class names, so the hover behaviour stays identical on every
   service page without changing layout or creating an image copy. */
/* Desktop only: touch devices do not have a real cursor hover. */
@media (min-width: 992px) {
    html body .otdelka-top-2 .photo {
        position: relative;
        z-index: 1;
        cursor: zoom-in;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 1.3s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: transform;
    }

    html body .otdelka-top-2 .photo:hover {
        z-index: 2;
        transform: scale(1.07);
    }

    html body .ostekleneie_primer .center.vo-osteklenie-center {
        cursor: zoom-in;
    }

    /* The hotspots overlay has the same bounds as the image.  Scaling both
       together keeps every numbered point locked to its place in the photo. */
    html body .ostekleneie_primer .center.vo-osteklenie-center > img,
    html body .ostekleneie_primer .center.vo-osteklenie-center > .vo-osteklenie-hotspots {
        transform: scale(1);
        transform-origin: center center;
        transition: transform 1.3s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: transform;
    }

    html body .ostekleneie_primer .center.vo-osteklenie-center:hover > img,
    html body .ostekleneie_primer .center.vo-osteklenie-center:hover > .vo-osteklenie-hotspots {
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .otdelka-top-2 .photo,
    html body .ostekleneie_primer .center.vo-osteklenie-center > img,
    html body .ostekleneie_primer .center.vo-osteklenie-center > .vo-osteklenie-hotspots {
        transition: none !important;
    }
}