/* Content stays visible; depth is added only while a card enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
    [data-depth-enter].depth-arriving {
        animation: depth-arrival 760ms cubic-bezier(.2,.65,.3,1);
        transform-origin: center bottom;
    }

    @keyframes depth-arrival {
        from { transform: perspective(1200px) translateY(26px) rotateX(3deg) scale(.985); }
        to { transform: none; }
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (hover: hover) and (pointer: fine) {
    [data-depth-photo].depth-photo-active:not([data-depth-photo="ambient"]) {
        transform: perspective(1200px) translateY(var(--depth-y, 0px)) rotateX(var(--depth-rx, 0deg));
        transform-origin: center;
    }

    /* Independent translation preserves the facade's horizontal positioning. */
    [data-depth-photo="ambient"] { translate: 0 var(--depth-y, 0px); }
    .room-city-atmosphere > picture[data-depth-photo="ambient"] { scale: 1.08; }
    [data-depth-photo].depth-photo-active:not([data-depth-photo="ambient"]):focus-within { transform: none; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
    [data-depth-enter].depth-arriving { animation-name: depth-arrival-small; animation-duration: 560ms; }

    @keyframes depth-arrival-small {
        from { transform: perspective(1000px) translateY(10px) rotateX(.7deg); }
        to { transform: none; }
    }
}

[data-depth-enter]:focus-within { animation: none; }

@media (prefers-reduced-motion: reduce), print {
    [data-depth-enter], [data-depth-photo]:not([data-depth-photo="ambient"]) { animation: none !important; transform: none !important; }
    [data-depth-photo="ambient"] { translate: none !important; scale: none !important; }
}