/* Motion is opt-in at the phone breakpoint and disabled by OS accessibility preference. */
.mobile-nav-indicator{display:none}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
.mobile-bottom-nav.mobile-motion-nav .mobile-nav-indicator{display:block;position:absolute;top:0;left:0;pointer-events:none;border-radius:10px;background:#eae5ff;z-index:0}
.mobile-bottom-nav.mobile-motion-nav a{position:relative;z-index:1;transition:color 180ms ease,transform 180ms ease}
.mobile-bottom-nav.mobile-motion-nav a.active{background:transparent}
.mobile-bottom-nav.mobile-motion-ready .mobile-nav-indicator{transition:transform 230ms cubic-bezier(.2,.7,.2,1),width 230ms ease,height 230ms ease}
#application main>.page-head{animation:none}
#application :is(button,.button,.club-name-link,.club-mobile-card){transition:background-color 150ms ease,border-color 150ms ease,transform 120ms ease}
#application :is(button,.button,.club-name-link,.club-mobile-card):active,.mobile-bottom-nav a:active{transform:scale(.985)}
#modal[open],.sf-profile-menu:not([hidden]),.mobile-more-menu:not([hidden]){animation:sf-phone-panel-in 180ms cubic-bezier(.2,.7,.2,1)}
@keyframes sf-phone-panel-in{from{opacity:.92;translate:0 6px}to{opacity:1;translate:0 0}}
}
@media(prefers-reduced-motion:reduce){.mobile-nav-indicator{display:none!important}}

@media(max-width:700px) and (prefers-reduced-motion:no-preference){
.mobile-bottom-nav.mobile-motion-nav .mobile-nav-indicator::before{content:"";position:absolute;top:4px;left:calc(50% - 9px);width:18px;height:2px;border-radius:3px;background:#7862ed}
.mobile-bottom-nav.mobile-motion-nav a svg{transition:transform 230ms cubic-bezier(.2,.7,.2,1)}
.mobile-bottom-nav.mobile-motion-nav a.active svg{transform:translateY(-2px)}
}