/* Keep the dashboard readable while the appointment count changes. */
.progress-demo{position:relative;isolation:isolate}
.appointment-fireworks{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.progress-kpis article:last-child{transition:border-color .4s,box-shadow .4s,background .4s,color .4s}
.progress-demo.celebrating .progress-kpis article:last-child{border-color:#006caa;box-shadow:0 0 0 3px #9de5f5,0 14px 30px #007bc036;background:linear-gradient(135deg,#009ed1,#006cba 68%,#004f9b);color:#fff}
.progress-demo.celebrating .progress-kpis article:last-child>span,.progress-demo.celebrating .progress-kpis article:last-child>span small,.progress-demo.celebrating .progress-kpis article:last-child p,.progress-demo.celebrating .progress-kpis article:last-child p b{color:#fff}
.progress-demo.celebrating [data-kpi="appointments"]{color:#fff;animation:appointment-rise .75s cubic-bezier(.2,.8,.2,1) both}
.progress-demo.celebrating .appt-fill{background:#fff!important}
.progress-demo.celebrating .progress-kpis article:last-child:after{content:"獲得 +1";position:absolute;top:9px;right:8px;padding:4px 7px;border-radius:3px;background:#fff2c6;color:#745113;font-size:10px;font-weight:900;white-space:nowrap;letter-spacing:.04em;animation:appointment-tag .6s .15s both}
.progress-demo.celebrating .progress-live{border-color:#90d9f3;background:#e9faff;color:#0066a0;font-weight:900}
.progress-demo.celebrating .progress-event{background:#e5f8fd;border-left:3px solid #008fca}
.progress-demo.celebrating .progress-event p{color:#075b85;font-weight:800}
@keyframes appointment-rise{0%{transform:translateY(9px);opacity:.45}65%{transform:translateY(-3px);opacity:1}100%{transform:none}}
@keyframes appointment-tag{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.progress-demo.celebrating [data-kpi="appointments"],.progress-demo.celebrating .progress-kpis article:last-child:after{animation:none}.appointment-fireworks{display:none}}

/* Preserve card geometry and follow the site's explicit autoplay/pause control. */
.progress-kpis article:last-child{position:relative}
html[data-site-motion='auto'] .appointment-fireworks{display:block}
html[data-site-motion='auto'] .progress-demo.celebrating [data-kpi="appointments"]{animation:appointment-rise .75s cubic-bezier(.2,.8,.2,1) both!important}
html[data-site-motion='auto'] .progress-demo.celebrating .progress-kpis article:last-child:after{animation:appointment-tag .6s .15s both!important}
html[data-site-motion='auto'] .progress-demo.progress-paused [data-kpi="appointments"],html[data-site-motion='auto'] .progress-demo.progress-paused .progress-kpis article:last-child:after{animation-play-state:paused!important}