/* Shifted UI Motion — 12 motion icons. Usage: <svg class="sm sm-timer">…</svg> (see Motion Icons.dc.html) */
.sm{width:24px;height:24px;display:block;overflow:visible;color:currentColor;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sm *{transform-box:fill-box;transform-origin:center}
.sm-lg{width:40px;height:40px;stroke-width:1.5}

/* 01 timer — hand sweeps a quarter turn, rests */
.sm-timer .hand{transform-origin:0% 100%;animation:smTick 4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes smTick{0%,60%{transform:rotate(0)}70%,100%{transform:rotate(90deg)}}

/* 02 puck — slides across, stops hard */
.sm-puck .disc{animation:smSlide 3.6s cubic-bezier(.2,.9,.2,1) infinite}
.sm-puck .trail{animation:smTrail 3.6s ease-out infinite}
@keyframes smSlide{0%,20%{transform:translateX(-7px)}45%,70%{transform:translateX(7px)}95%,100%{transform:translateX(-7px)}}
@keyframes smTrail{0%,20%{opacity:0;transform:translateX(-7px) scaleX(.2)}30%{opacity:.6;transform:translateX(-2px) scaleX(1)}45%,100%{opacity:0;transform:translateX(6px) scaleX(.2)}}

/* 03 stick — wind-up and shot */
.sm-stick .blade{transform-origin:85% 10%;animation:smSwing 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes smSwing{0%,55%{transform:rotate(0)}68%{transform:rotate(-16deg)}76%{transform:rotate(12deg)}88%,100%{transform:rotate(0)}}

/* 04 whistle — sound rings */
.sm-whistle .ring{opacity:0;transform-origin:0% 50%;animation:smRing 2.8s ease-out infinite}
.sm-whistle .ring:nth-child(2){animation-delay:.25s}
@keyframes smRing{0%,40%{opacity:0;transform:scale(.6)}50%{opacity:.9}90%,100%{opacity:0;transform:scale(1.15)}}

/* 05 offline — bars drop out, slash appears */
.sm-offline .bar{transform-origin:50% 100%}
.sm-offline .b3{animation:smBar 4s ease-in-out infinite}
.sm-offline .b4{animation:smBar 4s ease-in-out infinite;animation-delay:.12s}
.sm-offline .slash{stroke-dasharray:20;stroke-dashoffset:20;animation:smSlash 4s ease-in-out infinite}
@keyframes smBar{0%,30%{opacity:1;transform:scaleY(1)}45%,80%{opacity:.25;transform:scaleY(.15)}95%,100%{opacity:1;transform:scaleY(1)}}
@keyframes smSlash{0%,40%{stroke-dashoffset:20}50%,75%{stroke-dashoffset:0}85%,100%{stroke-dashoffset:20}}

/* 06 sync — arrows rotate, pause */
.sm-sync .arrows{animation:smSpin 3.4s cubic-bezier(.65,0,.2,1) infinite}
@keyframes smSpin{0%,45%{transform:rotate(0)}85%,100%{transform:rotate(360deg)}}

/* 07 tap — fingertip presses, ripple */
.sm-tap .tip{animation:smPress 2.6s cubic-bezier(.4,0,.2,1) infinite}
.sm-tap .ripple{opacity:0;animation:smRipple 2.6s ease-out infinite}
@keyframes smPress{0%,35%{transform:translateY(0)}45%{transform:translateY(2px)}60%,100%{transform:translateY(0)}}
@keyframes smRipple{0%,44%{opacity:0;transform:scale(.4)}52%{opacity:.8}95%,100%{opacity:0;transform:scale(1.5)}}

/* 08 joystick — knob nudges around the ring */
.sm-joystick .knob{animation:smNudge 4.4s cubic-bezier(.34,1.3,.64,1) infinite}
@keyframes smNudge{0%,15%{transform:translate(0,0)}25%,35%{transform:translate(0,-4px)}45%,55%{transform:translate(4px,0)}65%,75%{transform:translate(0,4px)}85%,100%{transform:translate(0,0)}}

/* 09 scoreboard — away score flips */
.sm-scoreboard .flip{transform-origin:50% 50%;animation:smFlip 3.6s ease-in-out infinite}
.sm-scoreboard .flip-b{opacity:0;animation:smFlipB 3.6s ease-in-out infinite}
@keyframes smFlip{0%,45%{transform:scaleY(1);opacity:1}50%{transform:scaleY(0);opacity:1}50.1%,100%{opacity:0}}
@keyframes smFlipB{0%,50%{transform:scaleY(0);opacity:0}50.1%{opacity:1}56%{transform:scaleY(1)}95%{opacity:1;transform:scaleY(1)}100%{opacity:0}}

/* 10 trend — line draws, endpoint pops */
.sm-trend .line{stroke-dasharray:40;stroke-dashoffset:40;animation:smDraw 4s cubic-bezier(.4,0,.2,1) infinite}
.sm-trend .dot{opacity:0;animation:smPop 4s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes smDraw{0%,10%{stroke-dashoffset:40}45%,85%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:40}}
@keyframes smPop{0%,42%{opacity:0;transform:scale(0)}50%,85%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(0)}}

/* 11 live — steady dot, soft ping */
.sm-live .ping{opacity:0;animation:smPing 2.4s ease-out infinite}
@keyframes smPing{0%{opacity:.8;transform:scale(.5)}70%,100%{opacity:0;transform:scale(1.6)}}

/* 12 camera — lens breathes, rec light blinks */
.sm-camera .lens{animation:smBreathe 3.2s ease-in-out infinite}
.sm-camera .rec{fill:currentColor;stroke:none;animation:smBlink 1.4s steps(1) infinite}
@keyframes smBreathe{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes smBlink{0%,60%{opacity:1}60.1%,100%{opacity:.15}}

@media (prefers-reduced-motion:reduce){.sm *{animation:none!important}}