/* Fitness Exclusive — light UI effects (2026-10-09)
   Rolling numbers · spotlight cards · sliding sport pill · smooth accordions.
   Everything is off for visitors who ask their device for reduced motion,
   and the spotlight only runs with a real mouse (never on phones). */

/* ── Rolling numbers ───────────────────────────────────────────── */
.fx-roll{display:inline}
/* page rules like ".price span{font-size:12px}" or ".stat span{color:red}" must not reach the rolling digits */
.fx-roll,.fx-roll span{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;margin:0!important;padding:0!important;background:none!important;border:0!important}
.fx-d{position:relative;display:inline-block}
.fx-d__ghost{visibility:hidden}
.fx-d__col{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.fx-d__strip{display:block;text-align:center;will-change:transform}
.fx-d__strip>span{display:block}
.fx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Spotlight cards (desktop, mouse only) ─────────────────────── */
.fx-spot{position:relative}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(380px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(227,27,35,.10),transparent 55%)}
.fx-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;padding:1.5px;
  transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(227,27,35,.95),rgba(227,27,35,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-spot.fx-spot--on::after,.fx-spot.fx-spot--on::before{opacity:1}

/* ── Sliding sport pill (home "Find your court") ───────────────── */
.fx-pills{position:relative}
.fx-pills .search-pill{position:relative;z-index:1}
.fx-pills .search-pill.fx-active{background:transparent;border-color:transparent;color:#fff}
.fx-pill-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:99px;background:#E31B23;z-index:0;pointer-events:none;
  box-shadow:0 6px 18px rgba(227,27,35,.30);opacity:0}
.fx-pill-ind.fx-ready{opacity:1;transition:transform .5s cubic-bezier(.34,1.32,.64,1),width .5s cubic-bezier(.34,1.32,.64,1),height .3s ease,opacity .2s}

/* ── Smooth accordions (FAQ page + branch FAQs) — motion only ─── */
@media (prefers-reduced-motion:no-preference){
  .faq-item{transition:box-shadow .35s ease,border-color .35s ease}
  .faq-item .faq-a{transition:max-height .55s cubic-bezier(.22,1,.36,1)}
  .faq-item .faq-a__inner{opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .3s ease}
  .faq-item.open .faq-a__inner{opacity:1;transform:none;transition:opacity .4s ease .08s,transform .5s cubic-bezier(.22,1,.36,1) .05s}
  .faq-item .faq-q__icon{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background-color .25s ease,border-color .25s ease}
  .faq-item .faq-q{transition:color .25s ease}
}
@media (prefers-reduced-motion:reduce){
  .fx-pill-ind.fx-ready{transition:none}
}

/* ── Reveal on scroll ([data-fx-reveal]) — only while <html class="fx-on"> ── */
@media (prefers-reduced-motion:no-preference){
  .fx-on [data-fx-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
  .fx-on [data-fx-reveal].fx-in{opacity:1;transform:none}
}
