/* Member app micro-motion (2026-10-30). A few slow, considered motions on the existing tokens; no new colours or fonts.
   Ideas from 21st.dev (shiny button, border beam, blur-rise reveal, number ticker, sliding tabs), rebuilt in plain CSS.
   Rules: transforms and decoration only, content is never hidden waiting for a script; all of it is off under reduced
   motion (OS setting or the app's Motion setting). mm-motion.js adds the page rise, the credit ticker and the FLIP
   start positions for the sliding indicators; without it everything below still looks right, it just doesn't slide. */
html[data-member]{--mm-out:cubic-bezier(.16,1,.3,1);--mm-in:cubic-bezier(.4,0,1,1)}

/* 1. Shiny sweep: one pass of light across the primary button on hover (fine pointers only). */
@media (hover:hover) and (pointer:fine){
  html[data-member] .btn.primary:not(:disabled){position:relative;overflow:hidden;isolation:isolate}
  html[data-member] .btn.primary:not(:disabled)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);transform:translateX(-110%)}
  html[data-member] .btn.primary:not(:disabled):hover::after{transform:translateX(110%);transition:transform .95s var(--mm-out)}
}

/* 2. Border beam: one short pass of light round the first-pack card's edge the first time it shows in a session, then it rests
   (r3 f14: was 3 laps x 6.5 s; member.js adds .mm-beam only on the first draw). */
@property --mm-beam{syntax:"<angle>";inherits:false;initial-value:0deg}
html[data-member] .mm-firstpack:not([aria-busy]){position:relative}
html[data-member] .mm-firstpack.mm-beam:not([aria-busy])::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--mm-beam),transparent 0 70%,color-mix(in srgb,var(--accent) 30%,transparent) 84%,var(--accent) 93%,transparent 97%);
  -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);opacity:0;animation:mm-beam 2.4s var(--mm-out) .6s 1}
@keyframes mm-beam{0%{--mm-beam:0deg;opacity:0}14%{opacity:.8}86%{opacity:.8}100%{--mm-beam:360deg;opacity:0}}

/* 3. Sliding indicators: the selected pill is drawn by ::after, so mm-motion.js can glide it from the old option. */
/* The pill sits at z-index -1 in the group's own stacking context, so it glides under every option's label. */
html[data-member] .mm-interval{isolation:isolate}html[data-member] .mm-interval button{position:relative}
html[data-member] .mm-interval button.on{background:transparent;box-shadow:none}
html[data-member] .mm-interval button.on::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media (min-width:1000px){
  html[data-member] .nav{isolation:isolate}html[data-member] .nav button{position:relative}
  html[data-member] .nav button.on{background:transparent}
  html[data-member] .nav button.on::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--chip)}
}

/* 4. Credits: digits keep their width while the ticker rolls. */
html[data-member] :is(.mm-bal b,#mm-credits){font-variant-numeric:tabular-nums}

/* 5. Sheets: a slower, settled entrance and a quick exit on desktop (phone keeps its drag-to-close slide). */
@media (min-width:760px){
  html[data-member] .sroot.open .sheet{transition:transform .5s var(--mm-out),opacity .22s ease-out}
  html[data-member] .sroot:not(.open) .sheet{transition:transform .2s var(--mm-in),opacity .16s ease-in}
}

/* 6. Press: buttons settle a hair under the finger (uniform scale, UI only). */
html[data-member] :is(.btn,.mm-interval button,.mm-chips button):not(:disabled):active{transform:scale(.98);transition:transform .08s}

@media (prefers-reduced-motion:reduce){
  html[data-member] .btn.primary::after,html[data-member] .mm-firstpack::after{display:none}
  html[data-member] :is(.btn,.mm-interval button,.mm-chips button):active{transform:none}
}
html[data-member][data-motion=reduce] .btn.primary::after,html[data-member][data-motion=reduce] .mm-firstpack::after{display:none}