/* SBCC micro layer (2026-10-22), see MICRO_SPRINGBREAKCLUBCARD.md. Transform/opacity/filter only; sbcc.css reduced-motion block zeroes transitions. */
:root{--mx-sp:cubic-bezier(.34,1.56,.64,1);--mx-io:cubic-bezier(.2,.8,.2,1);--mx-sheet:cubic-bezier(.32,.72,0,1)}
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,input,select,textarea,[role=button]{touch-action:manipulation}

/* pressed highlight (replaces the grey tap flash): buttons brighten, cards and rows lift their tone */
.mx-p{filter:brightness(1.12);transition:filter .08s}
.mx-r{transition:filter .35s var(--mx-io),background-color .35s}
.btn-g.mx-p,.btn-g.mx-r{background-color:rgba(255,255,255,.06)}
:is(.faq summary,.mnav summary,.mnav .panel a:not(.btn),.ft li a,.crumbs a).mx-p{filter:none;background-color:rgba(255,255,255,.06)}
:is(.faq summary,.mnav .panel a:not(.btn)){border-radius:6px}

/* focus ring grows in (outline only: paint, no layout) */
:is(a,button,summary,input,select,textarea):focus-visible,.opt input:focus-visible+label{animation:mxring .32s var(--mx-sp)}
@keyframes mxring{from{outline-offset:9px;outline-color:transparent}}

/* links: soft underline grow */
:is(.prose,.art,.box,.faq .a,.disc,.lead,.tldr) a:not(.btn){text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .25s,text-decoration-thickness .25s var(--mx-io),text-underline-offset .25s var(--mx-io),color .25s}
@media(hover:hover) and (pointer:fine){
 :is(.prose,.art,.box,.faq .a,.disc,.lead,.tldr) a:not(.btn):hover{text-decoration-color:currentColor;text-decoration-thickness:.14em;text-underline-offset:.24em}
 .opt input:hover+label{translate:0 -1px}
}
.opt label{transition:border-color .2s,background .2s,transform .2s var(--ease),translate .25s var(--mx-sp)}

/* accordion chevrons spring */
.faq summary::after{transition:transform .5s var(--mx-sp)}
.js .flag .pcb-t i,.js .flag .pcb-t i::after{transition-timing-function:var(--mx-sp)}

/* iOS nav bar: translucent, saturated blur */
.hd{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.js.sc .hd{background:rgba(11,10,18,.76)}

/* segmented thumb for the picker options (JS adds .mx-seg + one .mx-th per option group) */
.mx-seg{position:relative}
.mx-seg .opt{z-index:1}
.mx-seg .opt input:checked+label{background:transparent;border-color:transparent;transform:none}
.mx-th{position:absolute;left:0;top:0;z-index:2;pointer-events:none;border:1.5px solid var(--sun-1);border-radius:8px;background:rgba(255,122,47,.12);box-shadow:0 8px 22px -12px rgba(255,122,47,.7);opacity:0;transform-origin:0 0;transition:opacity .2s}
.mx-th.on{opacity:1}

/* phone: the menu becomes a bottom sheet (grab handle, spring up, swipe down, blurred dim backdrop = the summary's own ::before, so a tap closes it natively) */
@media(max-width:719px){
 .hd:has(.mnav[open]),.mx-open .hd{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
 .mnav[open]>summary::before{content:"";position:fixed;inset:0;background:rgba(4,3,9,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:calc(1 - var(--mxd,0));animation:mxfade .3s var(--mx-io);cursor:default}
 .mnav.mx-out>summary::before{opacity:0;transition:opacity .26s}
 .mnav .panel{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:2;max-height:min(86vh,680px);padding:26px 20px calc(18px + env(safe-area-inset-bottom));border:1px solid var(--line-2);border-bottom:0;border-radius:20px 20px 0 0;background:rgba(20,18,31,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -24px 60px -12px rgba(0,0,0,.8);overscroll-behavior:contain}
 .mnav .panel::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#5a5270}
 .mnav[open] .panel{animation:mxup .55s var(--mx-sheet)}
 .mnav .panel a:last-of-type:not(.btn){border-bottom:0}
}
@keyframes mxup{from{transform:translateY(100%)}}
@keyframes mxfade{from{opacity:0}}
.mx-lock,.mx-lock body{overflow:hidden}

/* photo peek (long press on touch; the scale itself is a WAAPI spring) */
.photo.mx-pk{z-index:3}

/* strip dots (phone snap scroller): one pill slides and stretches between three dots */
.mx-dots{display:none}
@media(max-width:719px){
 .js .sec.strip .wrap{position:relative}
 .mx-dots{display:flex;position:absolute;left:50%;gap:6px;padding:6px 8px;margin-left:-29px;border-radius:99px;background:rgba(11,10,18,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;z-index:2}
 .mx-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
 .mx-dots b{position:absolute;left:8px;top:6px;width:6px;height:6px;border-radius:3px;background:#fff;transform-origin:0 50%}
}

/* toast: iOS pill from the top */
.mx-toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top));z-index:70;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:11px 18px 11px 14px;border-radius:99px;background:rgba(32,29,46,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -16px rgba(0,0,0,.9);color:var(--ink);font:600 .93rem/1.3 var(--body);pointer-events:none;opacity:0;transform:translate(-50%,-140%) scale(.9);transition:transform .5s var(--mx-sp),opacity .3s}
.mx-toast.on{opacity:1;transform:translate(-50%,0)}
.mx-toast svg{flex:none;color:var(--ok)}

/* back to top: small blurred pill */
.mx-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(20,18,31,.7);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);cursor:pointer;box-shadow:0 12px 30px -14px rgba(0,0,0,.9);opacity:0;visibility:hidden;scale:.7;transition:opacity .25s,scale .45s var(--mx-sp),visibility 0s .45s}
.mx-top.on{opacity:1;visibility:visible;scale:1;transition:opacity .25s,scale .45s var(--mx-sp),visibility 0s}
@media(hover:hover) and (pointer:fine){.mx-top:hover{background:rgba(32,29,46,.85);border-color:rgba(255,255,255,.25)}}
@media print{.mx-top,.mx-toast,.mx-dots,.mx-th{display:none!important}.mx-seg .opt input:checked+label{border-color:#000!important}}
@media(prefers-reduced-motion:reduce){.mx-th{display:none}.mx-seg .opt input:checked+label{background:rgba(255,122,47,.12);border-color:var(--sun-1)}}
/* Eventbrite week chooser (.axcs, ebwire): blurred dim, sheet springs up on phones with a grab handle, links press like the rest */
.axcs-bg{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.axcs.is-open .axcs-bg{opacity:calc(1 - var(--mxd,0));animation:mxfade .3s var(--mx-io)}
@media(max-width:480px){
 html .axcs.is-open .axcs-p{animation:mxup .5s var(--mx-sheet);overscroll-behavior:contain}
 .axcs-p::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#d2d2d2}
}