:root {
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --motion-ease-press: cubic-bezier(0.4, 0, 1, 1);
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 420ms;
    --motion-duration: 720ms;
}

html { scroll-behavior: smooth; }

/* Shared interaction language: lift on intent, compress on activation. */
:is(button, .btn, [role="button"], input, textarea, select, a) {
    -webkit-tap-highlight-color: transparent;
}

:is(button, .btn, [role="button"]):not(:disabled, [aria-disabled="true"]) {
    transition-property: color, background-color, border-color, box-shadow, opacity,
        translate, scale, rotate, filter;
    transition-duration: var(--motion-base);
    transition-timing-function: var(--motion-ease-standard);
}

:is(button, .btn, [role="button"]):not(:disabled, [aria-disabled="true"]):active {
    scale: .965;
    transition-duration: 70ms;
    transition-timing-function: var(--motion-ease-press);
}

:is(button, .btn, [role="button"]):not(:disabled, [aria-disabled="true"]) > :is(i, svg) {
    transition: translate var(--motion-base) var(--motion-ease-out),
        scale var(--motion-base) var(--motion-ease-out),
        rotate var(--motion-base) var(--motion-ease-out),
        color var(--motion-fast) ease;
}

:is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
    transition: border-color var(--motion-base) ease,
        background-color var(--motion-base) ease,
        box-shadow var(--motion-base) ease,
        opacity var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    :is(.btn, .login-btn, .cta-button, .suggestion-category-btn, .suggest-edit-nav-btn,
        .suggest-edit-submit-btn, .view-toggle-btn, .sort-direction-btn,
        .atlas-action-button, .atlas-add-menu button):not(:disabled, [aria-disabled="true"]):hover {
        translate: 0 -1px;
    }

    :is(button, .btn, [role="button"]):not(:disabled, [aria-disabled="true"]):hover > :is(i, svg) {
        translate: 0 -1px;
    }

    :is(.list-view-item, .suggestion-card, .image-manager-item):hover {
        translate: 0 -2px;
    }
}

:is(button, .btn, [role="button"]):disabled,
:is(button, .btn, [role="button"])[aria-disabled="true"] {
    scale: 1;
    translate: none;
}

.motion-activated {
    animation: motion-activated 260ms var(--motion-ease-out);
}

.motion-value-changed {
    animation: motion-value-changed 360ms var(--motion-ease-out);
}

.motion-surface-enter {
    animation: motion-surface-enter var(--motion-slow) var(--motion-ease-out) both;
    transform-origin: var(--motion-origin, top center);
}

@keyframes motion-activated {
    0% { scale: 1; }
    38% { scale: .94; }
    100% { scale: 1; }
}

@keyframes motion-value-changed {
    0% { scale: .88; opacity: .55; }
    65% { scale: 1.06; opacity: 1; }
    100% { scale: 1; opacity: 1; }
}

@keyframes motion-surface-enter {
    from { opacity: 0; translate: 0 -6px; scale: .985; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Dynamic surfaces and selections. Existing component transforms remain intact. */
.modal-overlay.visible .modal-content,
#suggest-edit-modal-overlay.visible #suggest-edit-modal,
#suggest-new-place-modal-overlay.visible #suggest-new-place-modal {
    animation: motion-modal-enter var(--motion-slow) var(--motion-ease-out) both;
}

@keyframes motion-modal-enter {
    from { opacity: 0; translate: 0 12px; scale: .975; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

:is(.atlas-layer-switches label, .validated-filter-button, .offer-filter-button,
    .filter-option, .view-toggle-btn, .tab-link) {
    transition: color var(--motion-base) ease,
        background-color var(--motion-base) ease,
        border-color var(--motion-base) ease,
        box-shadow var(--motion-base) ease,
        translate var(--motion-base) var(--motion-ease-out),
        scale var(--motion-base) var(--motion-ease-out);
}

:is(.atlas-layer-switches label, .filter-option):has(input:checked) {
    animation: motion-selection 300ms var(--motion-ease-out);
}

@keyframes motion-selection {
    0% { scale: .975; }
    60% { scale: 1.018; }
    100% { scale: 1; }
}

.list-view-item,
.suggestion-card,
.image-manager-item {
    transition: background-color var(--motion-base) ease,
        border-color var(--motion-base) ease,
        box-shadow var(--motion-base) ease,
        translate var(--motion-base) var(--motion-ease-out);
}

.error-message:not(:empty),
.modal-error-message:not(:empty),
.image-manager-error:not(:empty) {
    animation: motion-message-in 320ms var(--motion-ease-out) both;
}

@keyframes motion-message-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}

.motion-pending body[data-motion-page] [data-motion="fade"],
.motion-pending body[data-motion-page] [data-motion="rise"] {
    opacity: 0;
    translate: 0 14px;
}

.motion-pending body[data-motion-page] [data-motion="scale"] {
    opacity: 0;
    scale: 0.985;
}

body[data-motion-page] [data-motion] {
    transition: opacity var(--motion-duration) ease,
        translate var(--motion-duration) var(--motion-ease-out),
        scale 900ms var(--motion-ease-out), filter 900ms ease;
    transition-delay: var(--motion-delay, 0ms);
}

/* Individual translate/scale properties leave Leaflet's transforms untouched. */
.motion-pending .atlas-page #map {
    opacity: 0;
    scale: 1.018;
    filter: saturate(.82);
}

.atlas-page #map {
    transition: opacity 900ms ease, scale 1200ms var(--motion-ease-out),
        filter 1200ms ease, width .4s cubic-bezier(.4, 0, .2, 1),
        left .4s cubic-bezier(.4, 0, .2, 1);
}

.motion-pending .atlas-page :is(.home-link-desktop, #sidebar-menu-btn-desktop, #search-container, #list-view-toggle-btn, .bottom-right-controls) {
    opacity: 0;
    translate: 0 -12px;
}

.atlas-page :is(.home-link-desktop, #sidebar-menu-btn-desktop, #search-container, #list-view-toggle-btn, .bottom-right-controls) {
    transition: opacity 620ms ease, translate 720ms var(--motion-ease-out),
        transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease,
        background-color .3s ease;
}

.atlas-page #search-container { transition-delay: 90ms; }
.atlas-page #list-view-toggle-btn { transition-delay: 150ms; }
.atlas-page .bottom-right-controls { transition-delay: 210ms; }

.motion-item-enter {
    animation: motion-item-enter 440ms var(--motion-ease-out) both;
    animation-delay: min(calc(var(--motion-index, 0) * 28ms), 280ms);
}

.tab-content.active {
    animation: motion-tab-in 360ms var(--motion-ease-out) both;
}

@keyframes motion-tab-in {
    from { opacity: 0; translate: 0 6px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes motion-item-enter {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

.motion-leaving body {
    opacity: 0;
    translate: 0 4px;
    transition: opacity 160ms ease, translate 180ms ease-in;
    pointer-events: none;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: motion-page-out 160ms ease both; }
::view-transition-new(root) { animation: motion-page-in 360ms var(--motion-ease-out) both; }
@keyframes motion-page-out { to { opacity: 0; } }
@keyframes motion-page-in {
    from { opacity: 0; translate: 0 5px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .motion-pending body[data-motion-page] [data-motion],
    .motion-pending .atlas-page #map,
    .motion-pending .atlas-page :is(.home-link-desktop, #sidebar-menu-btn-desktop, #search-container, #list-view-toggle-btn, .bottom-right-controls) {
        opacity: 1; translate: none; scale: none; filter: none;
    }

    body[data-motion-page] [data-motion],
    .atlas-page #map,
    .atlas-page :is(.home-link-desktop, #sidebar-menu-btn-desktop, #search-container, #list-view-toggle-btn, .bottom-right-controls) {
        transition: none;
    }

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

    :is(button, .btn, [role="button"]):active,
    :is(.atlas-layer-switches label, .filter-option):has(input:checked) {
        scale: 1;
        translate: none;
    }

    .motion-item-enter, .motion-activated, .motion-value-changed, .motion-surface-enter,
    .tab-content.active, .modal-overlay.visible .modal-content,
    #suggest-edit-modal-overlay.visible #suggest-edit-modal,
    #suggest-new-place-modal-overlay.visible #suggest-new-place-modal,
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .motion-leaving body { opacity: 1; translate: none; transition: none; }
}