/* Shared motion language. Layout, image proportions and reading rules stay in their owners. */
:root {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-quick: 180ms;
    --motion-enter: 620ms;
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    /* Photos follow the page's short opacity fade, without flying or resizing from a card. */
    [style*="--exploration-transition"] { view-transition-name: var(--exploration-transition); }
    .site-header { view-transition-name: atlas-header; }
    ::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--motion-ease); }
    ::view-transition-old(root) { animation: atlas-page-out 160ms ease-out both; }
    ::view-transition-new(root) { animation: atlas-page-in 300ms var(--motion-ease) both; }
    ::view-transition-group(atlas-header) { animation-duration: 260ms; }

    :is(.btn, .header-action, .forest-search button, .gallery-thumb, .atlas-area-switch a) {
        transition: transform var(--motion-quick) var(--motion-ease), color var(--motion-quick), background-color var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick);
    }
    :is(.btn, .header-action, .forest-search button, .gallery-thumb):active { transform: scale(.96); }
    :is(.home-specimen-link, .atlas-entry-action, .forest-search button) :is(.bi, span[aria-hidden]) {
        display: inline-block;
        transition: transform 280ms var(--motion-ease);
    }
    .forest-search:focus-within { box-shadow: 0 0 0 3px rgba(214, 201, 152, .2); }
    .forest-search { transition: box-shadow 240ms ease; }
    :is(.family-card, .region-tile, .exploration-country, .c-starts > a) { transition:transform 340ms var(--motion-ease),background-color 240ms ease; }
    :is(.family-card:focus-within, .region-tile:focus-visible, .exploration-country:focus-visible, .c-starts > a:focus-visible) { transform:translateY(-3px); }
    .c-starts > a > .bi:last-child { transition:transform 300ms var(--motion-ease); }
    .c-starts > a:is(:hover,:focus-visible) > .bi:last-child { transform:translate(3px,-3px); }
    .is-exploring { opacity:.7; }
    .atlas-form-state[data-state="pending"] > .bi { animation:atlas-working 1.8s ease-in-out infinite; }
    .atlas-result-icon { animation:atlas-result 480ms var(--motion-ease) both; }
    .gallery-thumbs { scroll-behavior: smooth; }
    .gallery-thumb[data-loading] { animation: atlas-pending 900ms ease-in-out infinite alternate; }
    [data-favorite-button][aria-busy="true"] [data-favorite-icon] { animation: atlas-pending 650ms ease-in-out infinite alternate; }

    @media (hover: hover) and (pointer: fine) {
        :is(.family-card, .region-tile):hover { transform:translateY(-4px); }
        .exploration-country:hover { transform:translateY(-2px); background:var(--surface-sage); }
        :is(.home-specimen-image, .beetle-card .card-media, .atlas-entry-option) > a { overflow: hidden; }
        :is(.home-specimen-image > a, .beetle-card .card-media > a) img,
        .atlas-entry-option > img { transition: transform 650ms var(--motion-ease); }
        :is(.home-specimen-card, .beetle-card):hover img[style*="--specimen-transition"],
        .atlas-entry-option:hover > img { transform: scale(1.025); }
        :is(.home-specimen-link, .atlas-entry-option):hover :is(.bi-arrow-right, span[aria-hidden]) { transform: translateX(5px); }
        .forest-search button:hover .bi { transform: translateX(3px); }
        :is(.btn, .header-action):hover { transform: translateY(-2px); }
        :is(.btn, .header-action):active { transform: translateY(0) scale(.96); }
    }
}

.exploration-country { min-height:44px; padding-inline:14px; }
.atlas-form-state { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px 10px; margin-block:12px 0; padding:12px 14px; color:var(--editorial-forest); background:var(--surface-sage); font-size:.875rem; line-height:1.6; text-align:left; }
.atlas-form-state[hidden],.atlas-form-state progress[hidden] { display:none; }
.atlas-form-state > .bi { display:inline-block; font-size:1.1rem; }
.atlas-form-state progress { grid-column:2; width:100%; min-width:0; height:4px; accent-color:var(--editorial-forest); }
.atlas-form-state[data-state="error"] { color:var(--amber-text); background:var(--surface-ochre); border-left:2px solid currentColor; }
.atlas-invalid { outline:2px solid var(--editorial-amber); outline-offset:2px; }
.is-submitting { cursor:progress; opacity:.7; }
.atlas-result-icon { display:inline-block; margin-right:10px; }
@media(prefers-reduced-motion:reduce) { .atlas-form-state progress { display:none; } }
@keyframes atlas-working { 0%,100% { transform:rotate(0); } 50% { transform:rotate(180deg); } }
@keyframes atlas-result { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } }
.atlas-navigation-pending { cursor: progress; }
[data-favorite-icon] { display: inline-block; }
.atlas-navigation-pending :is(.forest-search button, [data-filter-form] button[type="submit"]) { opacity: .65; }

/* Local image crossfade; metadata is committed with the decoded image in gallery.js. */
.species-gallery > a[data-lightbox] { position: relative; display: block; isolation: isolate; }
.species-gallery .gallery-outgoing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    view-transition-name: none;
}

.atlas-feedback {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    translate: -50% 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: min(640px, calc(100% - 32px));
    padding: 14px 16px;
    color: var(--forest-cream);
    background: var(--forest-panel);
    border: 1px solid var(--forest-hairline);
    box-shadow: 0 10px 36px rgba(9, 24, 15, .18);
    font-size: .875rem;
}
.atlas-feedback[hidden] { display: none; }
.atlas-feedback > .bi { color: var(--forest-gold); font-size: 1.25rem; }
.atlas-feedback [data-motion-message] { overflow-wrap: anywhere; }
.atlas-feedback a { color: var(--forest-gold); white-space: nowrap; text-underline-offset: 4px; }
.atlas-feedback button { border: 0; background: none; color: inherit; min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; }
@media (max-width: 575.98px) {
    .atlas-feedback { gap: 8px; padding: 12px; }
    .atlas-feedback > .bi { display: none; }
}
@keyframes atlas-page-out { to { opacity: 0; } }
@keyframes atlas-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-pending { to { opacity: .4; } }