/* ================================================================
   SPORTSBOOK MICRO-INTERACTIONS
   ULTRA-FAST FEEL — Immediate Visual Feedback
   ================================================================
   
   MOTION PRINCIPLE:
   - Input → Immediate Response → Content Update
   - Never delay actions with animations
   - Target: visual response ≤50ms, duration 80-180ms
   - Use transform/opacity (GPU-accelerated)
   - Avoid expensive filter/backdrop-filter/layout animations
   
   ================================================================ */

/* ================================================================
   1. MOTION SYSTEM VARIABLES
   ================================================================ */

:root {
    --sb-motion-fast: 80ms;
    --sb-motion-normal: 140ms;
    --sb-motion-smooth: 180ms;
    --sb-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ================================================================
   2. SPORT TAB MICRO-INTERACTION
   ================================================================ */

/* Sports nav button smooth transition */
.bc-sb-sports-nav__btn,
.bc-sb-sport-btn {
    transition: 
        transform var(--sb-motion-fast) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        opacity var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Subtle active state feedback */
.bc-sb-sports-nav__btn.bc-sb-sports-nav__btn--active,
.bc-sb-sport-btn.bc-sb-sport-btn--active {
    transform: scale(1.02);
}

/* Pressed feedback (ultra-fast) */
.bc-sb-sports-nav__btn:active,
.bc-sb-sport-btn:active {
    transform: scale(0.98);
    transition-duration: var(--sb-motion-fast);
}

/* Active indicator smooth slide */
.bc-sb-sports-nav__indicator {
    transition: transform var(--sb-motion-normal) var(--sb-motion-ease);
}

/* ================================================================
   3. MODE BAR (PREMATCH / UPCOMING / LIVE)
   ================================================================ */

/* Mode buttons smooth transition */
.bc-sb-mode-btn {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        color var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Pressed feedback */
.bc-sb-mode-btn:active {
    transform: scale(0.99);
    transition-duration: var(--sb-motion-fast);
}

/* Active underline smooth slide */
.bc-sb-mode-bar::after,
.bc-sb-mode-btn::after {
    transition: 
        transform var(--sb-motion-normal) var(--sb-motion-ease),
        width var(--sb-motion-normal) var(--sb-motion-ease),
        opacity var(--sb-motion-normal) var(--sb-motion-ease);
}

/* LIVE pulse (subtle, slow) */
.bc-sb-mode-btn--live.bc-sb-mode-btn--active .bc-sb-mode-btn__badge,
.bc-sb-badge--live {
    animation: live-pulse-subtle 2500ms ease-in-out infinite;
}

@keyframes live-pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ================================================================
   4. COUNTRY ROW MICRO-INTERACTION
   ================================================================ */

/* Country row hover (desktop only) */
@media (hover: hover) {
    .bc-sb-country,
    .bc-sb-country-row {
        transition: 
            background-color var(--sb-motion-normal) var(--sb-motion-ease),
            border-color var(--sb-motion-normal) var(--sb-motion-ease);
    }
    
    .bc-sb-country:hover,
    .bc-sb-country-row:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }
}

/* Pressed feedback */
.bc-sb-country:active,
.bc-sb-country-row:active {
    transform: scale(0.99);
    transition: transform var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Chevron rotation */
.bc-sb-country__chevron,
.bc-sb-country-row__chevron {
    transition: transform var(--sb-motion-normal) var(--sb-motion-ease);
}

.bc-sb-country--expanded .bc-sb-country__chevron,
.bc-sb-country-row--expanded .bc-sb-country-row__chevron {
    transform: rotate(90deg);
}

/* ================================================================
   5. LEAGUE ROW MICRO-INTERACTION
   ================================================================ */

/* League row smooth transition */
.bc-sb-league,
.bc-sb-league-row {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Desktop hover */
@media (hover: hover) {
    .bc-sb-league:hover,
    .bc-sb-league-row:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }
}

/* Pressed feedback */
.bc-sb-league:active,
.bc-sb-league-row:active {
    transform: scale(0.99);
    transition-duration: var(--sb-motion-fast);
}

/* Active state */
.bc-sb-league--active,
.bc-sb-league-row--active {
    border-left: 2px solid #FFD700;
}

/* ================================================================
   6. BACK BUTTON
   ================================================================ */

.bc-sb-back,
.bc-sb-back-btn {
    transition: 
        transform var(--sb-motion-fast) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        opacity var(--sb-motion-normal) var(--sb-motion-ease);
}

@media (hover: hover) {
    .bc-sb-back:hover,
    .bc-sb-back-btn:hover {
        background-color: rgba(255, 255, 255, 0.06);
    }
}

.bc-sb-back:active,
.bc-sb-back-btn:active {
    transform: scale(0.95);
    transition-duration: var(--sb-motion-fast);
}

/* ================================================================
   7. MATCH ROW MICRO-INTERACTION
   ================================================================ */

/* Match card/event subtle hover (desktop only) */
@media (hover: hover) {
    .bc-sb-match-card,
    .bc-sb-event,
    .bc-sb-fixture {
        transition: 
            background-color var(--sb-motion-normal) var(--sb-motion-ease),
            box-shadow var(--sb-motion-normal) var(--sb-motion-ease);
    }
    
    .bc-sb-match-card:hover,
    .bc-sb-event:hover,
    .bc-sb-fixture:hover {
        background-color: rgba(255, 255, 255, 0.02);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* NO scale animation on match cards to avoid jumpy feel */

/* ================================================================
   8. MATCH APPEARANCE (IMMEDIATE, NO STAGGER)
   ================================================================ */

/* Subtle fade-in for newly rendered matches (cache-first) */
.bc-sb-match-card,
.bc-sb-event,
.bc-sb-fixture {
    animation: match-appear 100ms var(--sb-motion-ease) backwards;
}

@keyframes match-appear {
    from {
        opacity: 0.96;
    }
    to {
        opacity: 1;
    }
}

/* Disable appearance animation after initial render */
.bc-sb-fixtures-list--loaded .bc-sb-match-card,
.bc-sb-fixtures-list--loaded .bc-sb-event,
.bc-sb-fixtures-list--loaded .bc-sb-fixture {
    animation: none;
}

/* ================================================================
   9. NEW FIXTURE HIGHLIGHT (BACKGROUND REFRESH)
   ================================================================ */

/* Subtle highlight for newly added fixtures */
.bc-sb-match-card--new,
.bc-sb-event--new,
.bc-sb-fixture--new {
    animation: new-fixture-highlight 1800ms var(--sb-motion-ease);
}

@keyframes new-fixture-highlight {
    0% {
        background-color: rgba(255, 215, 0, 0.08);
    }
    100% {
        background-color: transparent;
    }
}

/* ================================================================
   10. ODDS BUTTON — MOST IMPORTANT INTERACTION
   ================================================================ */

/* Odds button immediate response */
.bc-sb-odds-btn,
.bc-sb-odds-cell button,
button[data-odds] {
    transition: 
        background-color var(--sb-motion-fast) var(--sb-motion-ease),
        border-color var(--sb-motion-fast) var(--sb-motion-ease),
        color var(--sb-motion-fast) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Pressed feedback (ultra-responsive) */
.bc-sb-odds-btn:active,
.bc-sb-odds-cell button:active,
button[data-odds]:active {
    transform: scale(0.97);
    transition-duration: 60ms;
}

/* Selected state (immediate visual feedback) */
.bc-sb-odds-btn--selected,
.bc-sb-odds-btn.selected,
.bc-sb-odds-cell button.selected {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: #000000 !important;
}

/* ================================================================
   11. ODDS CHANGE ANIMATION
   ================================================================ */

/* Subtle highlight when odds value changes */
.bc-sb-odds-btn--changed,
.bc-sb-odds-btn.changed {
    animation: odds-change 800ms var(--sb-motion-ease);
}

@keyframes odds-change {
    0%, 100% {
        background-color: transparent;
    }
    15% {
        background-color: rgba(255, 215, 0, 0.15);
    }
}

/* Odds increased */
.bc-sb-odds-btn--increased {
    animation: odds-increased 800ms var(--sb-motion-ease);
}

@keyframes odds-increased {
    0%, 100% {
        background-color: transparent;
    }
    15% {
        background-color: rgba(34, 197, 94, 0.12);
    }
}

/* Odds decreased */
.bc-sb-odds-btn--decreased {
    animation: odds-decreased 800ms var(--sb-motion-ease);
}

@keyframes odds-decreased {
    0%, 100% {
        background-color: transparent;
    }
    15% {
        background-color: rgba(239, 68, 68, 0.12);
    }
}

/* ================================================================
   12. SUSPENDED ODDS
   ================================================================ */

.bc-sb-odds-btn--suspended,
.bc-sb-odds-btn[disabled],
.bc-sb-odds-cell button[disabled] {
    transition: 
        opacity var(--sb-motion-normal) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease);
    opacity: 0.4;
}

/* ================================================================
   13. FAVORITE MICRO-INTERACTION
   ================================================================ */

.bc-sb-favorite,
.bc-sb-league__favorite,
.bc-sb-country__favorite,
button[aria-label*="favorite" i] {
    transition: 
        transform var(--sb-motion-normal) var(--sb-motion-ease),
        color var(--sb-motion-normal) var(--sb-motion-ease),
        opacity var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Favorite activation feedback */
.bc-sb-favorite--active,
.bc-sb-league__favorite--active,
.bc-sb-country__favorite--active {
    animation: favorite-pop 180ms var(--sb-motion-ease);
}

@keyframes favorite-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Desktop hover */
@media (hover: hover) {
    .bc-sb-favorite:hover,
    .bc-sb-league__favorite:hover,
    .bc-sb-country__favorite:hover {
        transform: scale(1.1);
    }
}

/* ================================================================
   14. BETSLIP BADGE MICRO-INTERACTION
   ================================================================ */

/* Badge count update feedback */
.bc-sb-hub-tab__badge,
.bc-sb-betslip-count,
.bc-sb-badge {
    transition: 
        transform var(--sb-motion-normal) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        opacity var(--sb-motion-normal) var(--sb-motion-ease);
}

/* Badge pop when count increases */
.bc-sb-hub-tab__badge--updated,
.bc-sb-betslip-count--updated,
.bc-sb-badge--updated {
    animation: badge-pop 160ms var(--sb-motion-ease);
}

@keyframes badge-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ================================================================
   15. FLOATING BETSLIP BUTTON
   ================================================================ */

.bc-sb-floating-betslip {
    transition: 
        transform var(--sb-motion-normal) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        box-shadow var(--sb-motion-normal) var(--sb-motion-ease);
}

/* Selection added feedback */
.bc-sb-floating-betslip--updated {
    animation: floating-betslip-pulse 180ms var(--sb-motion-ease);
}

@keyframes floating-betslip-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Desktop hover */
@media (hover: hover) {
    .bc-sb-floating-betslip:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4);
    }
}

/* Pressed feedback */
.bc-sb-floating-betslip:active {
    transform: scale(0.95);
    transition-duration: var(--sb-motion-fast);
}

/* ================================================================
   16. BETSLIP DRAWER
   ================================================================ */

/* Mobile betslip drawer smooth open */
.bc-sb-mobile-betslip {
    transition: 
        transform var(--sb-motion-smooth) var(--sb-motion-ease),
        opacity var(--sb-motion-smooth) var(--sb-motion-ease);
}

.bc-sb-mobile-betslip:not(.bc-sb-mobile-betslip--open) {
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none !important; /* FIX: Allow clicks through invisible drawer */
}

.bc-sb-mobile-betslip--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto; /* Restore click handling when open */
}

/* Desktop betslip panel smooth appearance */
.bc-sb-betslip-panel {
    transition: opacity var(--sb-motion-normal) var(--sb-motion-ease);
}

/* ================================================================
   17. BET HUB TABS
   ================================================================ */

/* Tab button smooth transition */
.bc-sb-hub-tab {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        color var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Active indicator smooth slide */
.bc-sb-hub-tabs::after,
.bc-sb-hub-tab::after {
    transition: transform var(--sb-motion-normal) var(--sb-motion-ease);
}

/* Pressed feedback */
.bc-sb-hub-tab:active {
    transform: scale(0.98);
    transition-duration: var(--sb-motion-fast);
}

/* Tab content immediate render (no animation delay) */
.bc-sb-hub-content {
    /* No transition - content switches immediately */
}

/* ================================================================
   18. BETSLIP SELECTION CARD
   ================================================================ */

/* Selection card smooth appearance */
.bc-sb-selection,
.bc-sb-betslip-selection {
    transition: 
        opacity var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-normal) var(--sb-motion-ease);
}

/* Remove button feedback */
.bc-sb-selection__remove,
.bc-sb-betslip-selection__remove {
    transition: 
        transform var(--sb-motion-fast) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        opacity var(--sb-motion-fast) var(--sb-motion-ease);
}

@media (hover: hover) {
    .bc-sb-selection__remove:hover,
    .bc-sb-betslip-selection__remove:hover {
        transform: scale(1.1);
        background-color: rgba(239, 68, 68, 0.15);
    }
}

.bc-sb-selection__remove:active,
.bc-sb-betslip-selection__remove:active {
    transform: scale(0.9);
    transition-duration: var(--sb-motion-fast);
}

/* Selection removal animation */
.bc-sb-selection--removing,
.bc-sb-betslip-selection--removing {
    opacity: 0.5;
    transform: scale(0.98);
    transition: 
        opacity var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-normal) var(--sb-motion-ease);
}

/* ================================================================
   19. BUTTONS (GLOBAL)
   ================================================================ */

/* All sportsbook buttons */
button:not(.bc-sb-odds-btn):not([class*="odds"]),
.bc-sb-btn,
.bc-sb-button {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        color var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease),
        opacity var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Desktop hover */
@media (hover: hover) {
    button:not(.bc-sb-odds-btn):not([disabled]):hover {
        background-color: rgba(255, 255, 255, 0.06);
    }
}

/* Pressed feedback */
button:not([disabled]):active {
    transform: scale(0.98);
    transition-duration: var(--sb-motion-fast);
}

/* Primary button */
.bc-sb-btn--primary,
.bc-sb-button--primary,
button[class*="place-bet"] {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        box-shadow var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

@media (hover: hover) {
    .bc-sb-btn--primary:hover,
    .bc-sb-button--primary:hover,
    button[class*="place-bet"]:hover {
        box-shadow: 0 4px 16px rgba(255, 215, 0, 0.25);
    }
}

/* ================================================================
   20. SEARCH
   ================================================================ */

/* Search input focus transition */
.bc-sb-search,
.bc-sb-search-input,
input[type="search"] {
    transition: 
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        box-shadow var(--sb-motion-normal) var(--sb-motion-ease),
        background-color var(--sb-motion-normal) var(--sb-motion-ease);
}

.bc-sb-search:focus,
.bc-sb-search-input:focus,
input[type="search"]:focus {
    border-color: #FFD700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
}

/* Search results immediate render (no animation) */
.bc-sb-search-results {
    /* No transition - results appear immediately */
}

/* ================================================================
   21. SKELETON LOADING (MINIMAL)
   ================================================================ */

/* Only show skeleton when genuinely no cache */
.bc-sb-skeleton {
    animation: skeleton-shimmer 1500ms ease-in-out infinite;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 75%
    );
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   22. DATE FILTERS
   ================================================================ */

.bc-sb-date-filter,
.bc-sb-date-btn {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        border-color var(--sb-motion-normal) var(--sb-motion-ease),
        color var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

@media (hover: hover) {
    .bc-sb-date-filter:hover,
    .bc-sb-date-btn:hover {
        background-color: rgba(255, 255, 255, 0.04);
    }
}

.bc-sb-date-filter:active,
.bc-sb-date-btn:active {
    transform: scale(0.98);
    transition-duration: var(--sb-motion-fast);
}

/* ================================================================
   23. TOOLTIPS
   ================================================================ */

.bc-sb-tooltip {
    transition: 
        opacity var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-normal) var(--sb-motion-ease);
}

.bc-sb-tooltip:not(.bc-sb-tooltip--visible) {
    opacity: 0;
    transform: translateY(4px);
}

.bc-sb-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   24. MODALS / DIALOGS
   ================================================================ */

.bc-sb-modal,
.bc-sb-dialog {
    transition: 
        opacity var(--sb-motion-smooth) var(--sb-motion-ease),
        transform var(--sb-motion-smooth) var(--sb-motion-ease);
}

.bc-sb-modal:not(.bc-sb-modal--open),
.bc-sb-dialog:not(.bc-sb-dialog--open) {
    opacity: 0;
    transform: scale(0.96);
}

.bc-sb-modal--open,
.bc-sb-dialog--open {
    opacity: 1;
    transform: scale(1);
}

/* Modal backdrop */
.bc-sb-modal-backdrop,
.bc-sb-dialog-backdrop {
    transition: opacity var(--sb-motion-smooth) var(--sb-motion-ease);
}

/* ================================================================
   25. MOBILE NAV DRAWER
   ================================================================ */

@media (max-width: 1023px) {
    .bc-sb-mobile-nav,
    .bc-sb-sidebar--mobile {
        transition: 
            transform var(--sb-motion-smooth) var(--sb-motion-ease),
            opacity var(--sb-motion-smooth) var(--sb-motion-ease);
    }

    /* .bc-sb-mobile-nav is the persistent bottom tab bar (Sports/Fixtures/Betslip) —
       it is always visible and never receives an --open class, so it must NOT be
       part of this open/closed drawer toggle (only the off-canvas sidebar is). */
    .bc-sb-sidebar:not(.bc-sb-sidebar--open) {
        transform: translateX(-100%);
        opacity: 0;
    }

    .bc-sb-sidebar--open {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ================================================================
   26. FOCUS STATES
   ================================================================ */

/* Enhanced focus-visible states */
*:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    transition: outline-offset var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Remove default focus outline */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ================================================================
   27. LEAGUE HEADER / DATE SEPARATOR
   ================================================================ */

.bc-sb-league-header,
.bc-sb-date-separator,
.bc-sb-date-header {
    transition: 
        background-color var(--sb-motion-normal) var(--sb-motion-ease),
        transform var(--sb-motion-fast) var(--sb-motion-ease);
}

/* Sticky header shadow on scroll */
.bc-sb-league-header--sticky,
.bc-sb-date-header--sticky {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ================================================================
   28. EMPTY STATES
   ================================================================ */

.bc-sb-empty,
.bc-sb-empty-state {
    animation: empty-state-appear 300ms var(--sb-motion-ease);
}

@keyframes empty-state-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   29. NOTIFICATIONS / TOASTS
   ================================================================ */

.bc-sb-notification,
.bc-sb-toast {
    animation: notification-slide-in 200ms var(--sb-motion-ease);
}

@keyframes notification-slide-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bc-sb-notification--removing,
.bc-sb-toast--removing {
    animation: notification-slide-out 180ms var(--sb-motion-ease);
}

@keyframes notification-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

/* ================================================================
   30. PERFORMANCE OPTIMIZATIONS
   ================================================================ */

/* GPU acceleration for actively animating elements */
.bc-sb-odds-btn:active,
.bc-sb-floating-betslip,
.bc-sb-mobile-betslip,
.bc-sb-modal,
.bc-sb-mobile-nav {
    will-change: transform;
}

/* Remove will-change after animation */
.bc-sb-odds-btn:not(:active),
.bc-sb-floating-betslip:not(.bc-sb-floating-betslip--updated) {
    will-change: auto;
}

/* ================================================================
   31. REDUCED MOTION SUPPORT
   ================================================================ */

@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;
    }
    
    /* Keep essential state transitions functional */
    .bc-sb-odds-btn,
    .bc-sb-hub-tab,
    button {
        transition: 
            background-color 0.01ms,
            border-color 0.01ms,
            color 0.01ms;
    }
    
    /* Disable all micro-animations */
    .bc-sb-odds-btn:active,
    .bc-sb-floating-betslip,
    .bc-sb-favorite--active,
    .bc-sb-hub-tab__badge--updated,
    .bc-sb-badge--updated {
        animation: none !important;
        transform: none !important;
    }
}

/* ================================================================
   32. MOBILE-SPECIFIC OPTIMIZATIONS
   ================================================================ */

@media (max-width: 767px) {
    /* Mobile: even faster feedback */
    :root {
        --sb-motion-fast: 60ms;
        --sb-motion-normal: 100ms;
        --sb-motion-smooth: 140ms;
    }
    
    /* Remove hover effects on mobile */
    .bc-sb-match-card:hover,
    .bc-sb-event:hover,
    .bc-sb-country:hover,
    .bc-sb-league:hover {
        background-color: transparent;
    }
    
    /* Touch feedback only */
    .bc-sb-odds-btn:active,
    button:active {
        transform: scale(0.96);
    }
}

/* ================================================================
   33. DESKTOP-SPECIFIC OPTIMIZATIONS
   ================================================================ */

@media (min-width: 1024px) {
    /* Desktop: slightly smoother transitions */
    :root {
        --sb-motion-normal: 140ms;
        --sb-motion-smooth: 180ms;
    }
}

/* ================================================================
   34. HIGH REFRESH RATE DISPLAYS
   ================================================================ */

@media (min-resolution: 120dpi) {
    /* Slightly faster animations on high refresh rate displays */
    :root {
        --sb-motion-fast: 70ms;
        --sb-motion-normal: 120ms;
    }
}

/* ================================================================
   35. PRINT STYLES (DISABLE ALL ANIMATIONS)
   ================================================================ */

@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ================================================================
   END OF MICRO-INTERACTIONS
   ================================================================ */