/* Circl polish: see polish.js. Short, light animations; all off under reduced motion. */
:root{--pz-ease:cubic-bezier(.2,.9,.25,1);--pz-spring:cubic-bezier(.3,1.6,.5,1)}

/* tab bar: each tab has its own move */
nav.tabs button svg,nav.tabs .tabav{transform-origin:50% 60%}
nav.tabs button[data-tab="home"].pz-tap svg{animation:pzHome .55s var(--pz-spring)}
nav.tabs button[data-tab="circles"].pz-tap svg{animation:pzChat .6s var(--pz-ease)}
nav.tabs button[data-tab="inbox"].pz-tap svg{animation:pzMail .6s var(--pz-ease)}
nav.tabs button[data-tab="you"].pz-tap .tabav{animation:pzYou .55s var(--pz-spring)}
@keyframes pzHome{0%{transform:scale(1)}30%{transform:scale(.82) translateY(2px)}65%{transform:scale(1.12) translateY(-3px)}100%{transform:none}}
@keyframes pzChat{0%,100%{transform:none}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes pzMail{0%{transform:none}35%{transform:translateY(-5px) rotate(-6deg)}70%{transform:translateY(1px)}100%{transform:none}}
@keyframes pzYou{0%{transform:scale(1)}40%{transform:scale(.8)}75%{transform:scale(1.15)}100%{transform:none}}
.cbtn.pz-spin svg{animation:pzSpin .5s var(--pz-spring)}
@keyframes pzSpin{from{transform:rotate(-90deg) scale(.7)}to{transform:none}}

/* titles rise in word by word */
.pz-w{display:inline-block;animation:pzWord .6s var(--pz-ease) both;animation-delay:calc(var(--i) * 60ms + 40ms)}
@keyframes pzWord{from{opacity:0;transform:translateY(.4em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* icons pop in */
.pz-pop{animation:pzPop .5s var(--pz-spring) both;animation-delay:var(--pzd,0ms)}
@keyframes pzPop{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}

/* sparks */
.pz-sparks{position:fixed;width:0;height:0;z-index:9999;pointer-events:none}
.pz-sparks i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--h);animation:pzSpark .6s cubic-bezier(.2,.8,.3,1) forwards}
.pz-sparks i:nth-child(3n){width:4px;height:4px;left:-2px;top:-2px}
@keyframes pzSpark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ticks spring when switched on */
.md-sc[aria-pressed="true"],.md-check[aria-pressed="true"],.check.on{animation:pzTick .45s var(--pz-spring)}
@keyframes pzTick{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
.md-step.on b,.md-goal.done h1{transition:color .3s}

/* header clock */
.hc-time .pz-d{display:inline-block}
.hc-time .pz-d.flip{animation:pzFlip .45s var(--pz-ease)}
@keyframes pzFlip{0%{transform:translateY(-60%);opacity:0}100%{transform:none;opacity:1}}
.hc-time .pz-colon{display:inline-block;animation:pzBlink 2s ease-in-out infinite}
@keyframes pzBlink{0%,100%{opacity:1}50%{opacity:.25}}
.hdr-clock .hc-place{animation:pzRise .6s var(--pz-ease) both}
@keyframes pzRise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* focus-mode tabs: a pill that slides, panels that slide the right way */
.md-tabs{position:sticky}
.md-tabs.pz-has-pill button[aria-selected="true"]{background:none;box-shadow:none}
.md-tabs button{position:relative;z-index:1}
.pz-pill{position:absolute;left:4px;top:4px;height:38px;border-radius:12px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .35s var(--pz-ease),width .35s var(--pz-ease);z-index:0}
.md-panel.pz-right{animation:pzInR .34s var(--pz-ease)}
.md-panel.pz-left{animation:pzInL .34s var(--pz-ease)}
@keyframes pzInR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pzInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

/* timer ring glows while it's running */
.md-timer:has(.btn[data-mdt="pause"]) .md-tring .fg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 70%,transparent));animation:pzGlow 2s ease-in-out infinite}
@keyframes pzGlow{0%,100%{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent) 50%,transparent))}50%{filter:drop-shadow(0 0 7px var(--accent))}}

/* stories with something new: the ring slowly turns */
.story.new .ring{animation:pzTurn 6s linear infinite}
.story.new .ring>*{animation:pzTurn 6s linear infinite reverse}
@keyframes pzTurn{to{transform:rotate(360deg)}}

/* cards and rows lift a touch under the mouse, press in on touch */
@media (hover:hover){
  .md-card,.md-tool,.md-app,.dcard,.jcard,.contcard,.pbcard,.hub-row button,.md-person{transition:transform .2s var(--pz-ease),box-shadow .2s var(--pz-ease)}
  .md-card:hover,.md-tool:hover,.contcard:hover,.pbcard:hover,.dcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.25),var(--card-sh)}
}
.md-card:active,.md-tool:active,.md-app:active,.md-person:active{transform:scale(.98)}
.md-out{transition:transform .2s var(--pz-ease)}
.md-app:hover .md-out,.md-app:active .md-out{transform:translate(2px,-2px)}

/* the Switch / Full app buttons in a mode */
.md-small{transition:transform .15s,background .2s}
.md-small:active{transform:scale(.94)}
.md-tag .md-ci{animation:pzBob 3.2s ease-in-out infinite}
@keyframes pzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

@media (prefers-reduced-motion:reduce){
  nav.tabs button svg,nav.tabs .tabav,.cbtn svg,.pz-w,.pz-pop,.pz-sparks i,.md-sc,.md-check,.check,.hc-time .pz-d,.hc-time .pz-colon,.hdr-clock .hc-place,.md-panel,.md-tring .fg,.story.new .ring,.story.new .ring>*,.md-tag .md-ci{animation:none!important}
  .pz-pill{transition:none}
}