.hw-m-anim{--hw-m-total:560;--hw-m-k:calc(var(--hw-m-total) / 521);--hw-m-d-card:calc(0ms * var(--hw-m-k));--hw-m-t-card:calc(158ms * var(--hw-m-k));--hw-m-d-sticker:var(--hw-m-t-card);--hw-m-t-sticker:calc(250ms * var(--hw-m-k));--hw-m-d-line:calc(173ms * var(--hw-m-k));--hw-m-t-line:calc(216ms * var(--hw-m-k));--hw-m-d-dot:calc(var(--hw-m-d-line) + var(--hw-m-t-line) * 0.5);--hw-m-t-dot:calc(240ms * var(--hw-m-k));--hw-m-ease-settle:cubic-bezier(0.22,1,0.36,1)}.hw-m-anim.hw-m-armed .hw-m-card{animation:hw-m-card-in var(--hw-m-t-card) var(--hw-m-ease-settle) calc(var(--hw-m-offset, 0ms) + var(--hw-m-d-card)) both paused}.hw-m-anim.hw-m-armed .hw-m-sticker{animation:hw-m-sticker-in var(--hw-m-t-sticker) ease-out calc(var(--hw-m-offset, 0ms) + var(--hw-m-d-sticker)) both paused}.hw-m-anim.hw-m-armed .hw-m-line{animation:hw-m-draw-down var(--hw-m-t-line) linear calc(var(--hw-m-offset, 0ms) + var(--hw-m-d-line)) both paused}.hw-m-anim.hw-m-armed .hw-m-dot{animation:hw-m-dot-pop var(--hw-m-t-dot) ease-out calc(var(--hw-m-offset, 0ms) + var(--hw-m-d-dot)) both paused}.hw-m-anim .hw-m-play .hw-m-card,.hw-m-anim .hw-m-play .hw-m-dot,.hw-m-anim .hw-m-play .hw-m-line,.hw-m-anim .hw-m-play .hw-m-sticker{animation-play-state:running}.hw-m-anim .hw-m-done .hw-m-card,.hw-m-anim .hw-m-done .hw-m-dot,.hw-m-anim .hw-m-done .hw-m-line,.hw-m-anim .hw-m-done .hw-m-sticker{animation:none}@keyframes hw-m-card-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes hw-m-sticker-in{0%{opacity:0;transform:scale(.5);animation-timing-function:cubic-bezier(.12,.85,.3,1)}14%{opacity:1;transform:scale(.94);animation-timing-function:cubic-bezier(.3,0,.2,1)}30%{opacity:1;transform:scale(1.13);animation-timing-function:linear}44%{opacity:1;transform:scale(1.1);animation-timing-function:cubic-bezier(.45,0,.35,1)}62%{opacity:1;transform:scale(.98);animation-timing-function:cubic-bezier(.35,0,.3,1)}80%{opacity:1;transform:scale(1.01);animation-timing-function:cubic-bezier(.33,0,.25,1)}to{opacity:1;transform:scale(1)}}@keyframes hw-m-draw-down{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} /* !! The dot ring is centred with Tailwind `-translate-x-1/2 -translate-y-1/2`, and a keyframe that sets `transform` REPLACES those utilities wholesale. With `both` fill the replacement is permanent, so the translate has to be re-declared in every frame or the dot lands off the line forever. Desktop needs a --hw-dot-tx variable for this because its two dot kinds pull in opposite directions; here both offsets are -50%, so they inline. SHAPE - the seven frames are budgeted around a HOLD, not around a peak. The previous 0.2 -> 1.14 -> 1 passed THROUGH its maximum in a single instant: dwell at peak was zero, so the overshoot existed in the numbers and never in the eye, and it read as a fast bump rather than a pop. Lengthening it alone does not help, because a proportionally longer version of a shape with no hold still has no hold. 0 -> 14% 0.35 -> 0.92 fast attack - keeps it snappy, and starting at 0.35 rather than 0.2 spends less of a short budget while the dot is too small to see 14 -> 30% 0.92 -> 1.26 overshoot 30 -> 44% 1.26 -> 1.23 THE HOLD. Drifts rather than freezing: a constant scale over consecutive frames reads as a dropped frame, a slow drift reads as hanging at the top of an arc. `linear` on purpose. 44 -> 62% 1.23 -> 0.96 recoil under full size 62 -> 80% 0.96 -> 1.02 secondary bounce 80 -> 100% 1.02 -> 1 settle Peak is 1.26, slightly under the desktop dot's 1.28, because the mobile ring is smaller on a denser screen. !! This shape needs FRAMES, and mobile has fewer of them to give than desktop - the step is shorter. --hw-m-t-dot was raised 130 -> 240 for exactly this reason: at 130ms each of the six segments lasted about one frame and the hold could not exist. If --hw-m-total is ever taken far below 560 this is the first thing that degrades, and it degrades back into the old fast bump. */@keyframes hw-m-dot-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.35);animation-timing-function:cubic-bezier(.12,.85,.3,1)}14%{opacity:1;transform:translate(-50%,-50%) scale(.92);animation-timing-function:cubic-bezier(.3,0,.2,1)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.26);animation-timing-function:linear}44%{opacity:1;transform:translate(-50%,-50%) scale(1.23);animation-timing-function:cubic-bezier(.45,0,.35,1)}62%{opacity:1;transform:translate(-50%,-50%) scale(.96);animation-timing-function:cubic-bezier(.35,0,.3,1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1.02);animation-timing-function:cubic-bezier(.33,0,.25,1)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (prefers-reduced-motion:reduce){.hw-m-anim .hw-m-card,.hw-m-anim .hw-m-dot,.hw-m-anim .hw-m-line,.hw-m-anim .hw-m-sticker{animation:none!important}}.hw-anim{--hw-stride:355ms;--hw-d-card:0ms;--hw-t-card:188ms;--hw-d-rail:59ms;--hw-t-rail:148ms;--hw-d-dot-rail:163ms;--hw-d-dot-riser:301ms;--hw-t-dot:128ms;--hw-d-corner-a:202ms;--hw-d-corner-b:340ms;--hw-t-corner:74ms;--hw-d-sticker:217ms;--hw-t-sticker:218ms;--hw-d-riser:222ms;--hw-t-riser:128ms;--hw-ease-settle:cubic-bezier(0.22,1,0.36,1)}.hw-anim[data-hw-variant=v2]{--hw-total:3000;--hw-k:calc(var(--hw-total) / 1490);--hw-stride:calc(355ms * var(--hw-k));--hw-d-card:calc(0ms * var(--hw-k));--hw-t-card:calc(188ms * var(--hw-k));--hw-d-rail:calc(59ms * var(--hw-k));--hw-t-rail:calc(148ms * var(--hw-k));--hw-d-corner-a:calc(202ms * var(--hw-k));--hw-d-corner-b:calc(340ms * var(--hw-k));--hw-t-corner:calc(74ms * var(--hw-k));--hw-d-riser:calc(222ms * var(--hw-k));--hw-t-riser:calc(128ms * var(--hw-k));--hw-d-dot-rail:calc(var(--hw-d-rail) + var(--hw-t-rail) * 0.5);--hw-d-dot-riser:calc(var(--hw-d-riser) + var(--hw-t-riser) * 0.5);--hw-d-sticker:calc(var(--hw-d-rail) + var(--hw-t-rail));--hw-t-dot:calc(170ms * var(--hw-k));--hw-t-sticker:calc(218ms * var(--hw-k));--hw-d-dot-core:calc(var(--hw-t-dot) * 0.3);--hw-t-dot-core:calc(var(--hw-t-dot) * 0.55)}.hw-anim.hw-armed .hw-card{animation:hw-card-in var(--hw-t-card) var(--hw-ease-settle) calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-card)) both paused}.hw-anim.hw-armed .hw-rail{animation:hw-draw-x var(--hw-t-rail) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-rail)) both paused}.hw-anim.hw-armed .hw-riser--up{animation:hw-draw-up var(--hw-t-riser) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-riser)) both paused}.hw-anim.hw-armed .hw-riser--down{animation:hw-draw-down var(--hw-t-riser) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-riser)) both paused}.hw-anim.hw-armed .hw-corner--a{animation:hw-fade-in var(--hw-t-corner) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-corner-a)) both paused}.hw-anim.hw-armed .hw-corner--b{animation:hw-fade-in var(--hw-t-corner) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-corner-b)) both paused}.hw-anim.hw-armed .hw-dot--rail{animation:hw-dot-pop var(--hw-t-dot) ease-out calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-dot-rail)) both paused}.hw-anim.hw-armed .hw-dot--riser{animation:hw-dot-pop var(--hw-t-dot) ease-out calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-dot-riser)) both paused}.hw-anim.hw-armed .hw-sticker{animation:hw-sticker-in var(--hw-t-sticker) ease-out calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-sticker)) both paused}.hw-anim.hw-play .hw-card,.hw-anim.hw-play .hw-corner,.hw-anim.hw-play .hw-dot,.hw-anim.hw-play .hw-rail,.hw-anim.hw-play .hw-riser,.hw-anim.hw-play .hw-sticker{animation-play-state:running}.hw-anim[data-hw-variant=v2].hw-armed .hw-dot--rail{animation:hw-dot-pop-v2 var(--hw-t-dot) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-dot-rail)) both paused}.hw-anim[data-hw-variant=v2].hw-armed .hw-dot--riser{animation:hw-dot-pop-v2 var(--hw-t-dot) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-dot-riser)) both paused}.hw-anim[data-hw-variant=v2].hw-armed .hw-dot--rail>span{animation:hw-dot-core-v2 var(--hw-t-dot-core) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-dot-rail) + var(--hw-d-dot-core)) both paused}.hw-anim[data-hw-variant=v2].hw-armed .hw-dot--riser>span{animation:hw-dot-core-v2 var(--hw-t-dot-core) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-dot-riser) + var(--hw-d-dot-core)) both paused}.hw-anim[data-hw-variant=v2].hw-armed .hw-sticker{animation:hw-sticker-in-v2 var(--hw-t-sticker) linear calc(var(--hw-i, 0) * var(--hw-stride) + var(--hw-d-sticker)) both paused}.hw-anim[data-hw-variant=v2].hw-play .hw-dot,.hw-anim[data-hw-variant=v2].hw-play .hw-dot>span,.hw-anim[data-hw-variant=v2].hw-play .hw-sticker{animation-play-state:running}@keyframes hw-card-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes hw-draw-x{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes hw-draw-up{0%{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes hw-draw-down{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}@keyframes hw-fade-in{0%{opacity:0}to{opacity:1}} /* !! The dots are centred with Tailwind `translate` utilities, and a keyframe that sets `transform` REPLACES that translate wholesale. With `both` fill the replacement is permanent, so the translate has to be re-declared in every frame or the dot lands off the line forever. --hw-dot-tx carries the horizontal half-offset and is set right next to the translate class at the call site in howBWWorksWeb.js: rail dot (-translate-x-1/2) -> -50% riser dot ( translate-x-1/2) -> 50% The vertical offset is -50% for both, so it is inlined here. */@keyframes hw-dot-pop{0%{opacity:0;transform:translate(var(--hw-dot-tx),-50%) scale(.2)}60%{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(1.14)}to{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(1)}}@keyframes hw-sticker-in{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes hw-dot-pop-v2{0%{opacity:0;transform:translate(var(--hw-dot-tx),-50%) scale(.35);animation-timing-function:cubic-bezier(.12,.85,.3,1)}14%{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(.92);animation-timing-function:cubic-bezier(.3,0,.2,1)}30%{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(1.28);animation-timing-function:linear}44%{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(1.24);animation-timing-function:cubic-bezier(.45,0,.35,1)}62%{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(.96);animation-timing-function:cubic-bezier(.35,0,.3,1)}80%{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(1.02);animation-timing-function:cubic-bezier(.33,0,.25,1)}to{opacity:1;transform:translate(var(--hw-dot-tx),-50%) scale(1)}}@keyframes hw-dot-core-v2{0%{transform:scale(0);animation-timing-function:cubic-bezier(.2,.8,.3,1.4)}55%{transform:scale(1.45);animation-timing-function:cubic-bezier(.3,0,.2,1)}to{transform:scale(1)}}@keyframes hw-sticker-in-v2{0%{opacity:0;transform:scale(.5);animation-timing-function:cubic-bezier(.12,.85,.3,1)}14%{opacity:1;transform:scale(.94);animation-timing-function:cubic-bezier(.3,0,.2,1)}30%{opacity:1;transform:scale(1.16);animation-timing-function:linear}44%{opacity:1;transform:scale(1.13);animation-timing-function:cubic-bezier(.45,0,.35,1)}62%{opacity:1;transform:scale(.98);animation-timing-function:cubic-bezier(.35,0,.3,1)}80%{opacity:1;transform:scale(1.01);animation-timing-function:cubic-bezier(.33,0,.25,1)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.hw-anim .hw-card,.hw-anim .hw-corner,.hw-anim .hw-dot,.hw-anim .hw-dot>span,.hw-anim .hw-rail,.hw-anim .hw-riser,.hw-anim .hw-sticker{animation:none!important}}