/* Small, purposeful responses. No content is hidden to prepare an entrance. */
.btn,
.icon-button,
.favorite-button,
.view-switch button {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, scale 100ms ease;
}

.property-card {
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.property-card-image img,
.city-card > img {
    transition: transform 320ms cubic-bezier(.2,.65,.3,1);
}

/* A loading placeholder stays quiet, even when a connection is slow. */
.skeleton-card,
.skeleton-detail {
    animation: none;
}

@media (hover: hover) and (pointer: fine) {
    .property-card:hover { transform: translateY(-2px); }
    .property-card:hover .property-card-image img,
    .city-card:hover > img { transform: scale(1.025); }
    .btn:hover { transform: translateY(-1px); }
    .text-link:hover .icon { transform: translateX(3px); }
}

/* Touch controls respond while pressed, without sticky hover or moving photos. */
@media (hover: none), (pointer: coarse) {
    .btn:hover,
    .property-card:hover,
    .favorite-button:hover,
    .property-card:hover .property-card-image img,
    .city-card:hover > img,
    .gallery-tile:hover img,
    .text-link:hover .icon { transform: none; }

    .btn:active:not(:disabled),
    .icon-button:active:not(:disabled),
    .favorite-button:active:not(:disabled) { scale: .98; }

    .btn,
    .icon-button,
    .favorite-button { transition-duration: 100ms; }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within,
    html { scroll-behavior: auto !important; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .btn:active,
    .favorite-button:hover,
    .favorite-button:active,
    .property-card:hover,
    .property-card:hover .property-card-image img,
    .city-card:hover > img,
    .gallery-tile:hover img,
    .text-link:hover .icon { transform: none !important; }

    .btn:active,
    .icon-button:active,
    .favorite-button:active { scale: none !important; }
}