/* ========================================================================== 333 — Stage stepper + activity motion FIX (v698) Problems fixed (viewing drawer, #vcDetailModal): 1. Hover made the WHOLE .vc-step lift (translateY) + scale. The connector line is the step's ::before, so it moved with it, and the lifted step became its own stacking context: the NEXT step's line then painted OVER the hovered dot ("lines jump over the drawing"). Now no step is ever transformed; only the dot reacts, and the dots/lines live in one stacking context (isolation on the stepper) with fixed z-order. 2. The entrance sequence was irregular (line delays .34/.46/.58… vs dot delays .40/.52/.64…/1.10 — lines started before the previous dot, and the 7th step was off-rhythm). Now a single even rhythm: line draws, then dot pops. 3. Over-bouncy easings (overshoot 1.15–1.5) on a 16px dot looked like shaking. Softer, shorter, consistent. 4. Pop/line used fill-mode "both", which froze transform at the end and blocked hover. Now "backwards". Roll back: remove the to this file from index.html. ========================================================================== */ /* ---- structure: stable stacking, nothing on .vc-step moves ---- */ html body #vcDetailModal .vc-stepper{isolation:isolate} html body #vcDetailModal .vc-step{transform:none!important;transition:none;will-change:auto} html body #vcDetailModal .vc-step::before{z-index:0;transform-origin:left center;backface-visibility:hidden} html body #vcDetailModal .vc-step-dot{position:relative;z-index:2;transform-origin:50% 50%; transition:transform .18s ease-out,box-shadow .18s ease-out,background-color .2s,border-color .2s;backface-visibility:hidden} html body #vcDetailModal .vc-step-label{transition:color .18s ease} /* ---- hover / press: dot only, no overshoot ---- */ @media (hover:hover) and (pointer:fine){ html body .vcx .vc-step:hover{transform:none!important} html body .vcx .vc-step:hover .vc-step-dot{transform:scale(1.1)} } html body #vcDetailModal .vc-step.d329-step:active{transform:none!important} html body #vcDetailModal .vc-step.d329-step:active .vc-step-dot{transform:scale(.92);transition-duration:.08s} /* ---- entrance: even rhythm (line draws .20s, then its dot pops .32s) ---- */ @keyframes vcx2Pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}} @keyframes vcx2Line{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes vcx2Ring{0%{box-shadow:0 0 0 0 rgba(206,165,119,.5)}70%{box-shadow:0 0 0 7px rgba(206,165,119,0)}100%{box-shadow:0 0 0 0 rgba(206,165,119,0)}} @keyframes vcx2Burst{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(79,142,109,.6)}45%{transform:scale(1.25)}100%{transform:scale(1);box-shadow:0 0 0 12px rgba(79,142,109,0)}} html body .vcx.vcx-enter .vc-step-dot{animation:vcx2Pop .32s cubic-bezier(.25,.8,.35,1) backwards} html body .vcx.vcx-enter .vc-step-done::before, html body .vcx.vcx-enter .vc-step-lost::before{animation:vcx2Line .2s cubic-bezier(.3,.7,.2,1) backwards} html body .vcx.vcx-enter .vc-step:nth-child(1) .vc-step-dot{animation-delay:.30s} html body .vcx.vcx-enter .vc-step:nth-child(2)::before{animation-delay:.30s} html body .vcx.vcx-enter .vc-step:nth-child(2) .vc-step-dot{animation-delay:.46s} html body .vcx.vcx-enter .vc-step:nth-child(3)::before{animation-delay:.52s} html body .vcx.vcx-enter .vc-step:nth-child(3) .vc-step-dot{animation-delay:.68s} html body .vcx.vcx-enter .vc-step:nth-child(4)::before{animation-delay:.74s} html body .vcx.vcx-enter .vc-step:nth-child(4) .vc-step-dot{animation-delay:.90s} html body .vcx.vcx-enter .vc-step:nth-child(5)::before{animation-delay:.96s} html body .vcx.vcx-enter .vc-step:nth-child(5) .vc-step-dot{animation-delay:1.12s} html body .vcx.vcx-enter .vc-step:nth-child(6)::before{animation-delay:1.18s} html body .vcx.vcx-enter .vc-step:nth-child(6) .vc-step-dot{animation-delay:1.34s} html body .vcx.vcx-enter .vc-step:nth-child(7)::before{animation-delay:1.40s} html body .vcx.vcx-enter .vc-step:nth-child(7) .vc-step-dot{animation-delay:1.56s} /* current step: one soft pulse ring, drawn by a pseudo-element so it never fights the pop/hover transform */ html body .vcx .vc-step-current .vc-step-dot, html body .vcx.vcx-enter .vc-step-current .vc-step-dot{animation-name:vcx2Pop} html body .vcx:not(.vcx-enter) .vc-step-current .vc-step-dot{animation:none} html body .vcx .vc-step-current .vc-step-dot::after{content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none; animation:vcx2Ring 2.6s ease-out 1.9s infinite} /* ---- stage just advanced (after an action): line draws, then the new dot bursts once ---- */ html body .vcx.vcx-advance .vc-step-done::before{animation:none} html body .vcx.vcx-advance .vc-step-current::before{animation:vcx2Line .35s cubic-bezier(.3,.7,.2,1) backwards} html body .vcx.vcx-advance .vc-step-current .vc-step-dot{animation:vcx2Burst .7s ease-out .3s backwards} html body .vcx.vcx-advance .vc-step-current .vc-step-dot::after{animation-delay:1.2s} /* ---- activity log: calm hover (no wiggle/bounce) ---- */ html body .vcx .vc-history-item{transition:background-color .18s ease,box-shadow .18s ease} html body .vcx .vc-history-item:hover>i:first-child{animation:none;transform:scale(1.12)} html body .vcx .vc-history-item>i:first-child{transition:transform .18s ease-out} html body .vcx.vcx-enter .vc-history-list>.vc-history-item{animation-duration:.35s;animation-fill-mode:backwards} html body .vcx.vcx-enter .vc-history-list>.vc-history-item:nth-child(1){animation-delay:.45s} html body .vcx.vcx-enter .vc-history-list>.vc-history-item:nth-child(2){animation-delay:.52s} html body .vcx.vcx-enter .vc-history-list>.vc-history-item:nth-child(3){animation-delay:.59s} html body .vcx.vcx-enter .vc-history-list>.vc-history-item:nth-child(4){animation-delay:.66s} html body .vcx.vcx-enter .vc-history-list>.vc-history-item:nth-child(5){animation-delay:.73s} html body .vcx.vcx-enter .vc-history-list>.vc-history-item:nth-child(n+6){animation-delay:.80s} @media (prefers-reduced-motion:reduce){ html body .vcx .vc-step-dot,html body .vcx .vc-step::before,html body .vcx .vc-history-item,html body .vcx .vc-history-item>i{animation:none!important;transition:none!important} }