/* Atlayo motion: shared micro-interactions. Enter/exit animations of overlays live in motion.js. */

/* Smooth hover, focus and active states. :where() keeps specificity at zero so site styles still win. */
:where(a, button, .btn, .icon-btn, .rail-item, .side-btn, .sort-btn, .user-menu-item, .lang-btn, .nav-item, .tool, .swatch, .pop-item, .chip, .tab, .check) {
    transition-property: background-color, color, border-color, box-shadow, opacity;
    transition-duration: .15s;
    transition-timing-function: ease;
}
:where(input, select, textarea, .input) {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Gentle press feedback on buttons. */
:where(:is(.btn, .icon-btn, .side-btn, .sort-btn, .rail-item, .tool):not(:disabled):active) {
    transform: scale(.96);
}
:where(.btn, .icon-btn, .side-btn, .sort-btn, .rail-item, .send-btn, .tool) {
    transition-property: background-color, color, border-color, box-shadow, opacity, transform;
    transition-duration: .15s;
}

/* Mobile drawers: their backdrops fade in (the drawers themselves already slide). */
.app.show-sidebar .sidebar-backdrop,
.app.side-open .side-backdrop,
.app.show-side .side-backdrop {
    animation: motion-fade .22s ease both;
}
@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }

/* Dropdown arrows rotate smoothly. */
:where(.chev, .caret, .arrow-down) { transition: transform .18s ease; }

/* Skeleton placeholders and spinners fade in rather than popping. */
:where(.spinner, .skeleton, .loading) { animation: motion-fade .2s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; scroll-behavior: auto !important; }
}