/* Shared artwork hover contract for all gallery detail pages. */
@media (hover: hover) and (pointer: fine) {
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-frame).detail-hover-frame {
        scale: 1 !important;
        transform: none !important;
        transform-origin: center center !important;
        transition: scale 0.45s cubic-bezier(.22, .61, .36, 1) !important;
        will-change: scale;
    }

    .detail-hover-overflow-visible {
        overflow: visible !important;
    }

    /* CSS fallback for paging while the pointer stays in the same place. A
       newly active frame may not emit mouseenter, so :has() releases the
       carousel's clipping ancestors directly from the hovered frame state. */
    .detail-hover-frame:hover,
    .detail-hover-host:has(.detail-hover-frame:hover),
    .carousel-card:has(.detail-hover-frame:hover),
    .carousel-slide:has(.detail-hover-frame:hover),
    .carousel-wrapper:has(.detail-hover-frame:hover) {
        overflow: visible !important;
    }

    /* detail-artwork-frames.css gives normalized frames a stronger
       overflow:hidden rule. Match that specificity so the shared hover
       contract wins for 3x10m and every other normalized detail series. */
    .ice-painting-content .detail-series-frame-normalized .carousel-slide .detail-hover-frame:hover,
    .calligraphy-content .detail-series-frame-normalized .carousel-slide .detail-hover-frame:hover,
    .design-content .detail-series-frame-normalized .carousel-slide .detail-hover-frame:hover,
    .storyboard-content .detail-series-frame-normalized .carousel-slide .detail-hover-frame:hover,
    .ice-painting-content .detail-series-frame-normalized .carousel-slide:has(.detail-hover-frame:hover),
    .calligraphy-content .detail-series-frame-normalized .carousel-slide:has(.detail-hover-frame:hover),
    .design-content .detail-series-frame-normalized .carousel-slide:has(.detail-hover-frame:hover),
    .storyboard-content .detail-series-frame-normalized .carousel-slide:has(.detail-hover-frame:hover) {
        overflow: visible !important;
    }

    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-frame).detail-hover-frame:hover {
        position: relative !important;
        z-index: 2 !important;
    }

    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-frame).detail-hover-frame:hover {
        scale: 1.02 !important;
        transform: none !important;
    }

    /* The frame supplies the only enlargement. Preserve the image's resting
       transform so rotated Yin/Yang works do not turn or zoom a second time. */
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-frame).detail-hover-frame:not(img) > img {
        scale: 1 !important;
        transition: none !important;
    }

    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-frame).detail-hover-frame:not(img):hover > img {
        scale: 1 !important;
        transform: var(--detail-hover-rest-transform, none) !important;
    }

    /* These hosts contain both an artwork and its caption. They stay fixed;
       their direct image is the visual frame that enlarges. */
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-host).detail-hover-host,
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-host).detail-hover-host:hover {
        scale: 1 !important;
        transform: none !important;
        overflow: visible !important;
    }

    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-host).detail-hover-host > :not(.detail-hover-frame),
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-host).detail-hover-host:hover > :not(.detail-hover-frame),
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-caption).detail-hover-caption,
    :is(#detail-hover-unified#detail-hover-unified, .detail-hover-caption).detail-hover-caption:hover {
        scale: 1 !important;
        transform: none !important;
    }
}