/* Design tokens defined in components.css :root */

/* Global mobile touch defaults */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
}

/* Base transition classes for mobile */
.mobile-transition {
    transition: transform var(--duration-normal) var(--ease-out-material),
                opacity var(--duration-normal) var(--ease-out-material),
                background-color var(--duration-fast) var(--ease-out-material),
                box-shadow var(--duration-normal) var(--ease-out-material),
                filter var(--duration-fast) var(--ease-out-material);
}

.mobile-transition-fast {
    transition: transform var(--duration-fast) var(--ease-out-material),
                opacity var(--duration-fast) var(--ease-out-material),
                background-color var(--duration-fast) var(--ease-out-material),
                filter var(--duration-fast) var(--ease-out-material);
}

.mobile-transition-slow {
    transition: transform var(--duration-slow) var(--ease-out-back),
                opacity var(--duration-slow) var(--ease-out-material),
                background-color var(--duration-normal) var(--ease-out-material),
                filter var(--duration-normal) var(--ease-out-circ);
}

/* Interactive button enhancements */
.action-fab {
    transform: translateZ(0);
    transition: transform var(--duration-normal) var(--ease-out-back),
                background-color var(--duration-normal) var(--ease-out-material),
                box-shadow var(--duration-normal) var(--ease-out-circ),
                filter var(--duration-fast) var(--ease-out-material) !important;
}

.action-fab:hover {
    transform: translateY(-4px) scale(1.05) translateZ(0) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.3) !important;
    filter: brightness(1.1) !important;
}

.action-fab:active {
    transform: translateY(-2px) scale(0.98) translateZ(0) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
    filter: brightness(0.95) !important;
    transition-duration: var(--duration-fast) !important;
}

/* Bottom navigation enhancements */
.bottom-nav {
    transition: background-color var(--duration-normal) var(--ease-out-material) !important;
}

.nav-button {
    transform: translateZ(0);
    transition: color var(--duration-fast) var(--ease-out-material),
                transform var(--duration-fast) var(--ease-out-material) !important;
}

.nav-button:hover {
    transform: translateY(-2px) scale(1.05) translateZ(0) !important;
}

.nav-button:active {
    transform: translateY(0) scale(0.95) translateZ(0) !important;
    transition-duration: var(--duration-fast) !important;
}

/* Bottom sheet smooth transitions */
.bottom-sheet {
    transition: transform var(--duration-normal) var(--ease-out-expo),
                opacity var(--duration-normal) var(--ease-out-material) !important;
}

.sheet-chevron {
    transform: translateZ(0);
    transition: transform var(--duration-slow) var(--ease-out-back) !important;
}

/* Smooth accordion transitions */
.accordion-content {
    transition: max-height var(--duration-normal) var(--ease-out-material),
                padding var(--duration-normal) var(--ease-out-material),
                opacity var(--duration-fast) var(--ease-out-material) !important;
}

.accordion-icon {
    transition: transform var(--duration-normal) var(--ease-out-back) !important;
}

/* Search interactions */
#search-input,
#category-filter {
    transition: border-color var(--duration-fast) var(--ease-out-material),
                box-shadow var(--duration-fast) var(--ease-out-material),
                background-color var(--duration-fast) var(--ease-out-material) !important;
}

#search-button,
#clear-search-button,
#advanced-search-toggle-button {
    transition: background-color var(--duration-fast) var(--ease-out-material),
                border-color var(--duration-fast) var(--ease-out-material),
                transform var(--duration-fast) var(--ease-out-material),
                filter var(--duration-fast) var(--ease-out-material) !important;
}

#search-button:hover,
#clear-search-button:hover,
#advanced-search-toggle-button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.1) !important;
}

#search-button:active,
#clear-search-button:active,
#advanced-search-toggle-button:active {
    transform: scale(0.98) !important;
    filter: brightness(0.95) !important;
    transition-duration: var(--duration-fast) !important;
}

/* Slider enhancements */
#main-radius-slider {
    transition: background var(--duration-fast) var(--ease-out-material) !important;
}

#main-radius-slider::-webkit-slider-thumb {
    transition: transform var(--duration-fast) var(--ease-out-material),
                background-color var(--duration-fast) var(--ease-out-material),
                box-shadow var(--duration-fast) var(--ease-out-material) !important;
}

#main-radius-slider::-moz-range-thumb {
    transition: transform var(--duration-fast) var(--ease-out-material),
                background-color var(--duration-fast) var(--ease-out-material),
                box-shadow var(--duration-fast) var(--ease-out-material) !important;
}

#main-radius-slider:active::-webkit-slider-thumb {
    transform: scale(1.15) !important;
    background-color: var(--color-primary-dark) !important;
}

#main-radius-slider:active::-moz-range-thumb {
    transform: scale(1.15) !important;
    background-color: var(--color-primary-dark) !important;
}

/* List item effects */
.search-result-item {
    transition: background-color var(--duration-fast) var(--ease-out-material) !important;
}

.search-result-item:active {
    filter: brightness(0.98) !important;
    transition-duration: var(--duration-fast) !important;
}

/* Tab button transitions */
.tab-button {
    transition: color var(--duration-fast) var(--ease-out-material),
                border-bottom-color var(--duration-fast) var(--ease-out-material),
                background-color var(--duration-fast) var(--ease-out-material) !important;
}

/* Modal smooth entrance */
.modal-content {
    transform: translateZ(0);
    transition: transform var(--duration-slow) var(--ease-out-back),
                opacity var(--duration-normal) var(--ease-out-material),
                filter var(--duration-normal) var(--ease-out-circ) !important;
}

.modal-backdrop {
    transition: opacity var(--duration-normal) var(--ease-out-material) !important;
}

/* Loading spinner animations */
.spinner {
    transition: opacity var(--duration-normal) var(--ease-out-material) !important;
}

/* Badge styles */
.badge {
    transition: background-color var(--duration-fast) var(--ease-out-material) !important;
}

.badge.pulse {
    animation: badge-pulse var(--duration-slow) var(--ease-out-expo);
}

@keyframes badge-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Sheet content sliding */
#item-detail-view {
    transform: translateZ(0);
    transition: transform var(--duration-normal) var(--ease-out-expo),
                opacity var(--duration-normal) var(--ease-out-material),
                filter var(--duration-normal) var(--ease-out-circ) !important;
}

/* Floating menu */
.bottom-floating-menu {
    transition: opacity var(--duration-normal) var(--ease-out-material),
                box-shadow var(--duration-normal) var(--ease-out-circ) !important;
}

/* Language popup */
#language-options-popup {
    transition: opacity var(--duration-fast) var(--ease-out-material),
                visibility var(--duration-fast) var(--ease-out-material) !important;
}

#language-options-popup li {
    transition: background-color var(--duration-fast) var(--ease-out-material) !important;
}

/* Ripple effect for buttons */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width var(--duration-normal) var(--ease-out-material),
                height var(--duration-normal) var(--ease-out-material),
                opacity var(--duration-normal) var(--ease-out-material);
}

.ripple-effect:active::before {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Reduce motion for user preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Additional micro-interactions */
.micro-bounce:hover {
    animation: micro-bounce var(--duration-normal) var(--ease-out-back);
}

@keyframes micro-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Focus states for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}