/* Hallmark · component: sport-rhythm trigger · genre: editorial · theme: Studio
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass — hand-built SVG only; no generated or external imagery.
 * Hallmark · pre-emit critique: P4 H4 E5 S5 R4 V4 */
.recent-following{display:grid;gap:var(--space-md);margin-block:calc(var(--space-2xl) * -1) var(--space-3xl);padding:var(--space-lg);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-soft)}
.recent-following-heading{display:grid;gap:var(--space-2xs)}.recent-following h2{margin:0;font-size:var(--text-lg)}
.recent-following-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.recent-following-list a{display:inline-grid;grid-template-columns:1.15rem auto;grid-template-areas:"icon name" "icon source";column-gap:var(--space-xs);align-items:center;min-height:3.25rem;padding:var(--space-xs) var(--space-sm);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink);text-decoration:none;transition:transform var(--dur-micro) var(--ease-out),border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.recent-following-list a svg{grid-area:icon;width:1.15rem;height:1.15rem;color:var(--color-accent)}.recent-following-list a span{grid-area:name;font-size:var(--text-sm);font-weight:600}.recent-following-list a small{grid-area:source;color:var(--color-muted);font-size:var(--text-xs)}.recent-following-list a:hover{transform:translateY(-1px);border-color:var(--color-accent);background:var(--color-accent-soft)}.recent-following-list a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

.rhythm-grid article{position:relative;overflow:hidden;isolation:isolate;transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.rhythm-grid article:has(.rhythm-surprise:hover),.rhythm-grid article:has(.rhythm-surprise:focus-visible),.rhythm-grid article:has(.rhythm-surprise[data-state="success"]){border-color:color-mix(in oklch,var(--color-accent) 64%,var(--color-rule));background:var(--color-paper)}
.rhythm-surprise{position:absolute!important;inset:var(--space-sm) var(--space-sm) auto auto;display:grid!important;width:5.25rem;height:4.2rem;padding:0;border:0;background:transparent;color:var(--color-ink-soft);cursor:pointer;font:inherit;letter-spacing:0!important;isolation:isolate;transition:transform var(--dur-micro) var(--ease-out),color var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out)}
.rhythm-surprise svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .18rem .18rem color-mix(in oklch,var(--color-ink) 10%,transparent));transition:transform var(--dur-short) var(--ease-out),filter var(--dur-short) var(--ease-out)}
.rhythm-surprise>span{position:absolute;right:-.15rem;bottom:-.05rem;display:block!important;opacity:0;transform:translateY(.38rem);padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-pill);color:var(--color-on-accent)!important;background:var(--color-accent);font:500 .62rem/1 var(--font-label)!important;letter-spacing:.04em!important;white-space:nowrap;transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.rhythm-surprise:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}.rhythm-surprise:active{transform:scale(.96)}.rhythm-surprise:disabled{opacity:.36;cursor:not-allowed}.rhythm-surprise[data-state="loading"]{opacity:.6}.rhythm-surprise[data-state="error"]{color:var(--color-error)}.rhythm-surprise[data-state="success"]{color:var(--color-accent)}
.sport-trail,.sport-lane{fill:none;stroke:color-mix(in oklch,var(--color-accent) 60%,var(--color-muted));stroke-width:1.25;stroke-linecap:round;stroke-dasharray:2.5 3}.sport-racket ellipse{fill:color-mix(in oklch,var(--color-paper) 88%,var(--color-accent));stroke:currentColor;stroke-width:1.65}.sport-racket path{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round}.sport-shuttle,.sport-impact{fill:none;stroke:var(--color-accent);stroke-width:1.5;stroke-linecap:round}.sport-shuttle circle{fill:var(--color-accent);stroke:none}.sport-impact{opacity:.16}.sport-pace{fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round}.sport-pace--two{opacity:.46}.sport-lane{stroke:color-mix(in oklch,var(--color-ink-soft) 52%,transparent);stroke-dasharray:0}.sport-runner{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sport-runner circle{fill:var(--color-accent);stroke:none}.sport-finish{fill:none;stroke:var(--color-accent);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.rhythm-grid article:hover .rhythm-surprise,.rhythm-surprise:focus-visible,.rhythm-surprise[data-state="success"]{color:var(--color-accent)}.rhythm-grid article:hover .rhythm-surprise svg,.rhythm-surprise:focus-visible svg,.rhythm-surprise[data-state="success"] svg{filter:drop-shadow(0 .35rem .32rem color-mix(in oklch,var(--color-accent) 22%,transparent));transform:translateY(-.12rem)}.rhythm-grid article:hover .rhythm-surprise>span,.rhythm-surprise:focus-visible>span,.rhythm-surprise[data-state="success"]>span{opacity:1;transform:translateY(0)}
.rhythm-grid article:hover .sport-racket,.rhythm-surprise:focus-visible .sport-racket,.rhythm-surprise[data-state="success"] .sport-racket{animation:racket-hit 420ms var(--ease-out) both}.rhythm-grid article:hover .sport-shuttle,.rhythm-surprise:focus-visible .sport-shuttle,.rhythm-surprise[data-state="success"] .sport-shuttle{animation:shuttle-serve 620ms var(--ease-out) both}.rhythm-grid article:hover .sport-impact,.rhythm-surprise:focus-visible .sport-impact,.rhythm-surprise[data-state="success"] .sport-impact{animation:impact-pop 360ms var(--ease-out) both}.rhythm-grid article:hover .sport-runner,.rhythm-surprise:focus-visible .sport-runner,.rhythm-surprise[data-state="success"] .sport-runner{animation:runner-stride 540ms var(--ease-out) both}.rhythm-grid article:hover .sport-pace,.rhythm-surprise:focus-visible .sport-pace,.rhythm-surprise[data-state="success"] .sport-pace{animation:pace-pulse 460ms var(--ease-out) both}.rhythm-grid article:hover .sport-finish,.rhythm-surprise:focus-visible .sport-finish,.rhythm-surprise[data-state="success"] .sport-finish{animation:finish-wave 420ms var(--ease-out) both}
@keyframes racket-hit{0%{transform:rotate(-22deg);opacity:.2}70%{transform:rotate(12deg);opacity:1}100%{transform:rotate(0)}}@keyframes shuttle-serve{0%{transform:translate(-2rem,2rem) scale(.55);opacity:0}72%{transform:translate(.12rem,-.12rem) scale(1.08);opacity:1}100%{transform:translate(0) scale(1)}}@keyframes impact-pop{0%{transform:scale(.55);opacity:0}100%{transform:scale(1.15);opacity:1}}@keyframes runner-stride{0%{transform:translate(-.8rem,.35rem);opacity:0}65%{transform:translate(.08rem,-.12rem);opacity:1}100%{transform:translate(0)}}@keyframes pace-pulse{0%{transform:translateX(-.8rem);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes finish-wave{0%{transform:translateX(-.42rem);opacity:0}100%{transform:translateX(0);opacity:1}}

@media (min-width:40rem){.recent-following{grid-template-columns:minmax(10rem,.42fr) minmax(0,1fr);align-items:center}.recent-following-list{justify-content:flex-end}}@media (max-width:32rem){.recent-following{margin-block:calc(var(--space-xl) * -1) var(--space-2xl)}.recent-following-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.recent-following-list a{min-width:0}}@media (prefers-reduced-motion:reduce){.rhythm-grid article,.rhythm-surprise,.rhythm-surprise svg,.rhythm-surprise>span{transition:none}.rhythm-grid article:hover .sport-racket,.rhythm-surprise:focus-visible .sport-racket,.rhythm-surprise[data-state="success"] .sport-racket,.rhythm-grid article:hover .sport-shuttle,.rhythm-surprise:focus-visible .sport-shuttle,.rhythm-surprise[data-state="success"] .sport-shuttle,.rhythm-grid article:hover .sport-impact,.rhythm-surprise:focus-visible .sport-impact,.rhythm-surprise[data-state="success"] .sport-impact,.rhythm-grid article:hover .sport-runner,.rhythm-surprise:focus-visible .sport-runner,.rhythm-surprise[data-state="success"] .sport-runner,.rhythm-grid article:hover .sport-pace,.rhythm-surprise:focus-visible .sport-pace,.rhythm-surprise[data-state="success"] .sport-pace,.rhythm-grid article:hover .sport-finish,.rhythm-surprise:focus-visible .sport-finish,.rhythm-surprise[data-state="success"] .sport-finish{animation:none}.rhythm-grid article:hover .rhythm-surprise>span,.rhythm-surprise:focus-visible>span,.rhythm-surprise[data-state="success"]>span{opacity:1;transform:none}}
