:root {
    --premium-motion-ease: cubic-bezier(.16, 1, .3, 1);
    --premium-motion-soft: cubic-bezier(.2, .8, .2, 1);
    --premium-motion-shadow: 0 22px 58px rgba(15, 23, 42, .12);
    --premium-motion-orange-shadow: 0 18px 42px rgba(255, 106, 26, .26);
}

html.premium-motion-ready {
    scroll-behavior: smooth;
}

.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
    filter: saturate(.95);
    transition:
        opacity .56s var(--premium-motion-ease),
        transform .56s var(--premium-motion-ease),
        filter .56s var(--premium-motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.motion-reveal.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1);
    will-change: auto;
}

.motion-reveal.motion-reveal-left {
    transform: translate3d(-18px, 0, 0) scale(.99);
}

.motion-reveal.motion-reveal-right {
    transform: translate3d(18px, 0, 0) scale(.99);
}

.motion-reveal.motion-reveal-left.motion-visible,
.motion-reveal.motion-reveal-right.motion-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

@media (min-width: 768px) {
    html.premium-motion-ready body.site-topbar-scrolled .site-topbar {
        top: 10px;
        height: 58px !important;
        min-height: 58px;
        border-color: rgba(230, 234, 240, .76) !important;
        background: rgba(255, 255, 255, .84) !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .12), 0 1px 0 rgba(255, 255, 255, .82) inset !important;
        backdrop-filter: blur(26px) saturate(1.2);
        -webkit-backdrop-filter: blur(26px) saturate(1.2);
    }

    html.premium-motion-ready body.site-topbar-scrolled .site-topbar-left > a img {
        width: 118px !important;
    }
}

html.premium-motion-ready .site-topbar,
html.premium-motion-ready .site-topbar-left > a img,
html.premium-motion-ready .site-primary-tabs,
html.premium-motion-ready .site-action-button,
html.premium-motion-ready .site-profile-button,
html.premium-motion-ready #mobile-bottom-nav > div {
    transition:
        top .24s var(--premium-motion-soft),
        height .24s var(--premium-motion-soft),
        min-height .24s var(--premium-motion-soft),
        width .24s var(--premium-motion-soft),
        background-color .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s var(--premium-motion-soft),
        opacity .24s ease,
        filter .24s ease;
}

html.premium-motion-ready .site-primary-tabs {
    overflow: hidden;
    isolation: isolate;
}

html.premium-motion-ready .site-primary-tabs a {
    z-index: 2;
    overflow: visible;
}

html.premium-motion-ready .site-primary-tabs a.bg-white {
    background: transparent !important;
    box-shadow: none !important;
}

.site-tabs-liquid-indicator {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .9)),
        radial-gradient(circle at 50% 100%, rgba(255, 106, 26, .14), transparent 58%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08), 0 0 0 1px rgba(230, 234, 240, .76);
    transition:
        left .34s var(--premium-motion-ease),
        width .34s var(--premium-motion-ease),
        opacity .18s ease;
}

html.premium-motion-ready .site-tabs-liquid-indicator.is-visible {
    opacity: 1;
}

.site-create-button,
.messenger-new-chat-btn,
#quick-publish-btn,
.community-detail-action--orange,
.community-rides-header button,
.community-club-routes-header button {
    position: relative;
    overflow: hidden;
}

.site-create-button::before,
.messenger-new-chat-btn::before,
#quick-publish-btn::before,
.community-detail-action--orange::before,
.community-rides-header button::before,
.community-club-routes-header button::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -55%;
    width: 42%;
    transform: skewX(-18deg);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    transition: transform .7s var(--premium-motion-ease), opacity .2s ease;
}

.site-create-button:hover::before,
.messenger-new-chat-btn:hover::before,
#quick-publish-btn:hover::before,
.community-detail-action--orange:hover::before,
.community-rides-header button:hover::before,
.community-club-routes-header button:hover::before {
    opacity: 1;
    transform: translateX(340%) skewX(-18deg);
}

.site-action-button:active,
.site-profile-button:active,
.site-create-button:active,
.is-premium-pressing,
#mobile-bottom-nav a:active .nav-icon-bg,
.home-feed-tab-link:active,
.home-sort-control a:active,
.quick-action-btn:active,
.quick-icon-btn:active,
.feed-action-btn:active,
.community-detail-tabs a:active,
.messenger-chip:active,
.chat-item:active {
    transform: translateY(0) scale(.97) !important;
}

#desktop-search-dropdown,
#mobile-search-dropdown,
.create-menu-panel,
#userDropdown,
.post-options-dropdown,
.comment-menu-panel,
#sidebar-options-menu,
#chat-options-menu,
#attachment-menu,
#message-context-menu {
    transform-origin: top center;
    transition:
        opacity .2s ease,
        transform .24s var(--premium-motion-ease),
        filter .24s ease;
}

html.premium-motion-ready .create-menu-wrap.create-menu-open .create-menu-panel,
html.premium-motion-ready .create-menu-wrap:hover .create-menu-panel,
html.premium-motion-ready .create-menu-wrap:focus-within .create-menu-panel {
    filter: saturate(1.04);
}

html.premium-motion-ready #mobile-bottom-nav > div {
    box-shadow: 0 20px 48px rgba(15, 23, 42, .15), inset 0 1px rgba(255, 255, 255, .9);
}

html.premium-motion-ready #mobile-bottom-nav a:hover .nav-icon-bg,
html.premium-motion-ready #mobile-bottom-nav a:focus-visible .nav-icon-bg {
    transform: translateY(-2px) scale(1.04);
}

.home-feed-tab-link,
.home-feed-tab-icon,
.home-sort-control a,
.quick-post-card,
.quick-post-card .quick-action-btn,
.quick-post-card .quick-icon-btn,
.quick-post-card #quick-location-btn,
.quick-post-card .custom-dropdown-trigger,
.quick-post-card #quick-article-link,
[data-feed-card],
[data-feed-card] img,
.feed-action-btn,
.suggested-profile-card,
.suggested-profile-card img,
.profile-route-card,
.community-ride-card,
.community-club-route-card,
.community-detail-tabs a,
.community-detail-action,
.messenger-nav-item,
.messenger-pinned-link,
.chat-item,
.messenger-share-card,
.article-route-map-card,
.post-media-frame,
.tropa-video-player {
    transition-timing-function: var(--premium-motion-soft) !important;
}

.home-feed-tab-link:hover .home-feed-tab-icon,
.home-feed-tab-link.is-active .home-feed-tab-icon {
    transform: translateY(-1px) scale(1.05);
}

.home-feed-tab-link {
    transition-property: background-color, color, box-shadow, transform;
    transition-duration: .22s;
}

.home-feed-tab-link:hover {
    transform: translateY(-1px);
}

.home-sort-control {
    transition: box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}

.home-sort-control:hover {
    border-color: rgba(255, 106, 26, .2) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.quick-post-card {
    transform-origin: top center;
}

.quick-post-card:focus-within {
    box-shadow: 0 24px 70px rgba(15, 23, 42, .1), 0 0 0 1px rgba(255, 106, 26, .1) !important;
}

.quick-post-card .quick-action-btn:hover,
.quick-post-card .quick-icon-btn:hover,
.quick-post-card #quick-location-btn:hover,
.quick-post-card .custom-dropdown-trigger:hover,
.quick-post-card #quick-article-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

#quick-post-images > *,
#quick-post-video > * {
    animation: premiumMediaPop .34s var(--premium-motion-ease) both;
}

@keyframes premiumMediaPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

[data-feed-card],
.suggested-profile-card,
.profile-route-card,
.community-ride-card,
.community-club-route-card,
.messenger-share-card {
    backface-visibility: hidden;
}

[data-feed-card]:hover img,
.suggested-profile-card:hover img,
.community-ride-card:hover img,
.community-club-route-card:hover img,
.messenger-share-card:hover img,
.post-media-frame:hover img {
    transform: scale(1.035);
}

[data-feed-card]:hover .feed-action-btn {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.map-page-wrapper #search-wrapper,
.map-page-wrapper #left-collection-menu,
.map-page-wrapper #copilot-panel,
.map-page-wrapper #route-panel,
.map-page-wrapper #route-card,
.map-page-wrapper .map-floating-control,
.map-page-wrapper .map-controls-panel,
.map-page-wrapper .maplibregl-popup-content {
    transition:
        opacity .24s ease,
        transform .28s var(--premium-motion-ease),
        box-shadow .24s ease,
        filter .24s ease;
}

.map-page-wrapper #search-wrapper:hover,
.map-page-wrapper #left-collection-menu:hover,
.map-page-wrapper #route-card:hover,
.map-page-wrapper .map-controls-panel:hover {
    box-shadow: 0 20px 52px rgba(15, 23, 42, .16) !important;
    filter: saturate(1.02);
}

.maplibregl-marker {
    transition: filter .22s ease;
}

.maplibregl-marker:hover {
    filter: drop-shadow(0 10px 18px rgba(255, 106, 26, .22));
}

.messenger-shell {
    animation: premiumShellIn .42s var(--premium-motion-ease) both;
}

@keyframes premiumShellIn {
    from {
        opacity: .72;
        transform: translateY(10px) scale(.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#chat-info-panel {
    transition:
        width .34s var(--premium-motion-ease),
        transform .34s var(--premium-motion-ease),
        opacity .24s ease,
        border-color .24s ease !important;
}

#chat-info-panel.chat-info-panel-hidden {
    opacity: 0;
    transform: translateX(18px);
}

.chat-item:hover,
.messenger-nav-item:hover,
.messenger-pinned-link:hover {
    transform: translateX(2px);
}

.chat-item.is-selected {
    box-shadow: 0 14px 34px rgba(255, 106, 26, .11);
}

#attachment-menu.is-open,
#message-context-menu:not(.hidden),
#sidebar-options-menu:not(.hidden) {
    animation: premiumPopoverIn .2s var(--premium-motion-ease) both;
}

@keyframes premiumPopoverIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

[id^="msg-wrapper-"] {
    animation-duration: .28s !important;
    animation-timing-function: var(--premium-motion-ease) !important;
}

[id^="msg-wrapper-"] > div.relative {
    transition:
        transform .18s var(--premium-motion-soft),
        box-shadow .22s ease,
        filter .22s ease !important;
}

[id^="msg-wrapper-"] > div.relative:hover {
    filter: saturate(1.02);
}

.messenger-share-card {
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.messenger-share-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--premium-motion-shadow);
}

.community-hero-cover img,
.community-hero-avatar,
.community-detail-action,
.community-hero-pill,
.community-hero-stat {
    transition:
        transform .28s var(--premium-motion-soft),
        box-shadow .28s ease,
        filter .28s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.community-hero-card:hover .community-hero-cover img {
    transform: scale(1.025);
}

.community-hero-card:hover .community-hero-avatar {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.community-detail-tabs a:hover {
    transform: translateY(-1px);
}

.community-ride-card:hover,
.community-club-route-card:hover,
.profile-route-card:hover,
.suggested-profile-card:hover {
    box-shadow: var(--premium-motion-shadow);
}

.post-content img,
.post-media-frame img,
.tropa-video,
.tropa-video-play,
.article-route-map-card,
.route-story-nav-link,
.comment-thread {
    transition:
        transform .28s var(--premium-motion-soft),
        box-shadow .28s ease,
        filter .28s ease,
        border-color .22s ease,
        background-color .22s ease;
}

.post-content img:hover,
.post-media-frame:hover,
.tropa-video-player:hover {
    filter: saturate(1.04) contrast(1.01);
}

.tropa-video-player:hover .tropa-video-play {
    transform: scale(1.05);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .2);
}

.article-route-map-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .1);
}

.route-story-nav-link:hover,
.comment-thread:hover {
    transform: translateY(-1px);
}

.profile-route-experience__tab:hover,
.profile-route-experience__all:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

@media (max-width: 767px) {
    .motion-reveal {
        transform: translate3d(0, 12px, 0) scale(.992);
        transition-duration: .42s;
    }

    .quick-post-card:focus-within {
        transform: translateY(-1px);
    }

    .messenger-share-card:hover,
    [data-feed-card]:hover,
    .community-ride-card:hover,
    .community-club-route-card:hover,
    .profile-route-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.premium-motion-ready {
        scroll-behavior: auto;
    }

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

    .motion-reveal,
    .motion-reveal.motion-reveal-left,
    .motion-reveal.motion-reveal-right,
    .motion-reveal.motion-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .site-tabs-liquid-indicator {
        display: none;
    }
}