/* Vilni Local — canon MOTION layer (С5, 06.11.2026; prototype P2 https://claude.ai/artifact/5dLXYcQR8oGAa41gYuCGKC, accepted 05.11).
   Extends canon-fx.css (load it right after it), never replaces it. Same gates: motion only under
   prefers-reduced-motion:no-preference AND html.nz-js (set by canon-fx.js / canon-motion.js); html[data-neon="off"] = no motion.
   Without JS, with reduced motion and in print every element is in its final, visible state.
   Rules: moving properties are transform / opacity only (exceptions: the SVG stroke of a line chart, the text of a counter);
   loops have a fixed count and ≤1 Hz — the one endless loop is the waiting map's breath, which ends on the answer.
   Hooks (classes only — the page CSP has no inline style):
     [data-cu]        counter (canon-motion.js)            .cz-steps     steps 1-2-3, connector draws
     .cz-lines > svg .cz-ln/.cz-ln-dot  line charts draw when .cz-lines (or any canon-fx play block) is seen          .cz-lift      hover lift, fine pointers only
     .cz-seg(.v) + .cz-seg-ind + [data-on="0…3"]  sliding pill under tabs / switch;  .cz-pane-in  pane enters
     .cz-sheet(.on)   bottom sheet (cookie, notices)        .cz-xf(.out)  cross-fade between two states
     .cz-busy + .cz-spin  button at work                    .cz-dots3     «чекаємо» dots
     .cz-ico          icon plate pops in with its .nz-in block;  .cz-fly  card leaves upwards
     .cz-wmap         waiting map: .hx[data-st="wait"] breathes, .is-lit pops, .run halo loops, .done crown glints
     .cz-wsteps       waiting checklist: li.now breathes, li.ok ticks
     .cz-state        state screens (застарів, не знайшли…): the icon pops in, a clock's .cz-hand turns once;
     .cz-glow         its .btn-pri gets the canon neon of .pmain/.endcta (pulses ×3 when shown) */
body:has(.cz),.cz{--e-out:cubic-bezier(.2,.7,.2,1);--e-pop:cubic-bezier(.2,.8,.2,1);--e-spring:cubic-bezier(.3,1.4,.5,1);
  --t-micro:150ms;--t-small:300ms;--t-reveal:650ms;--t-chart:1000ms}

/* ── static look of the hooks (also with reduced motion) ── */
:root .cz [data-cu]{font-variant-numeric:tabular-nums}
:root .cz .cz-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
:root .cz .cz-steps::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:2px;background:var(--peri);transform-origin:left center}
:root .cz .cz-steps > li{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
:root .cz .cz-steps .cz-n{width:40px;height:40px;border-radius:50%;background:var(--violet);color:var(--paper);display:grid;place-items:center;font:800 16px var(--f-disp);box-shadow:0 0 0 6px var(--canvas)}
:root .cz .cz-ln{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
:root .cz .cz-ln-dot{fill:var(--violet);transform-box:fill-box;transform-origin:center}
:root .cz .cz-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--lilac);border-radius:999px;padding:4px}
:root .cz .cz-seg > button,:root .cz .cz-seg > a{position:relative;z-index:1;border:0;background:transparent;border-radius:999px;min-height:44px;padding:0 12px;
  font:600 14px var(--f-body);color:var(--violet);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
:root .cz .cz-seg > [aria-pressed="true"],:root .cz .cz-seg > [aria-selected="true"],:root .cz .cz-seg > [aria-current="page"]{color:var(--paper)}
:root .cz .cz-seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,2));border-radius:999px;background:var(--violet);pointer-events:none}
:root .cz .cz-seg[data-on="1"] .cz-seg-ind{transform:translateX(100%)}
:root .cz .cz-seg[data-on="2"] .cz-seg-ind{transform:translateX(200%)}
:root .cz .cz-seg[data-on="3"] .cz-seg-ind{transform:translateX(300%)}
:root .cz [data-cz-pane][hidden],:root .cz .cz-seg[hidden]{display:none!important}  /* panes may be lists / SVG <g> whose own display wins over [hidden] */
:root .cz .cz-seg.v{grid-auto-flow:row;grid-auto-rows:44px;border-radius:18px}
:root .cz .cz-seg.v .cz-seg-ind{right:4px;bottom:auto;width:auto;height:44px;border-radius:14px}
:root .cz .cz-seg.v[data-on="1"] .cz-seg-ind{transform:translateY(100%)}
:root .cz .cz-seg.v[data-on="2"] .cz-seg-ind{transform:translateY(200%)}
:root .cz .cz-seg.v[data-on="3"] .cz-seg-ind{transform:translateY(300%)}
:root .cz .cz-sheet{position:fixed;z-index:60;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate3d(0,calc(100% + 24px),0);opacity:0;visibility:hidden}
:root .cz .cz-sheet.on{transform:none;opacity:1;visibility:visible}
@media (min-width:900px){:root .cz .cz-sheet{left:auto;right:24px;bottom:24px;max-width:420px}}
:root .cz .cz-xf.out{opacity:0}
:root .cz .cz-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor}
:root .cz .cz-busy{pointer-events:none}
:root .cz .cz-busy .cz-spin{display:inline-block}
:root .cz .cz-dots3{display:inline-flex;gap:4px}
:root .cz .cz-dots3 i{width:7px;height:7px;border-radius:50%;background:var(--violet)}
:root .cz .cz-ico{transform-box:fill-box;transform-origin:center}
:root .cz .cz-wmap :is(.hx,.hxt,.pin,.crown){transform-box:fill-box;transform-origin:center}
:root .cz .cz-wmap .crown{transform-origin:center bottom}
:root .cz .cz-wsteps .ok .ck{background:var(--chartreuse);border-color:var(--chartreuse)}
:root .cz .cz-state .cz-hand{transform-box:view-box;transform-origin:12px 12px}
:root .cz .cz-glow .btn-pri{position:relative;isolation:isolate}
html:not([data-neon="off"]):root .cz .cz-glow .btn-pri{box-shadow:0 0 0 1px var(--nzg2),0 6px calc(var(--nzb) * 3) -4px var(--nzg2)}
html:not([data-neon="off"]):root .cz .cz-glow .btn-pri::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2px var(--nz2),0 0 calc(var(--nzb) * 3.5) var(--nzg2)}
html:not([data-neon="off"]):root .cz .cz-glow .btn-pri:is(:hover,:focus-visible)::after{opacity:1}
/* swipe rails on phones move sideways only (owner 05.11: «вертикально не должен двигаться») */
@media (max-width:640px){:root .cz .rail{overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
  :root .cz .rail > .cz-lift{transform:none!important;transition:none!important}}

/* ── motion ── */
@media (prefers-reduced-motion:no-preference){
  :root .cz .btn{transition:background var(--t-micro),color var(--t-micro),transform var(--t-micro) var(--e-out)}
  :root .cz .btn:active{transform:scale(.97)}
  :root .cz .cz-seg-ind{transition:transform .35s var(--e-out)}
  :root .cz .cz-seg > *{transition:color var(--t-small)}
  :root .cz .cz-pane-in{animation:cz-in .3s var(--e-out)}
  :root .cz .cz-sheet{transition:transform .45s var(--e-out),opacity .3s,visibility 0s linear .45s}
  :root .cz .cz-sheet.on{transition:transform .45s var(--e-out),opacity .3s,visibility 0s}
  :root .cz .cz-xf{transition:opacity .4s}
  :root .cz .cz-busy .cz-spin{animation:nz-spin .8s linear infinite}
  :root .cz .cz-dots3 i{animation:nz-dot 1.2s ease-in-out infinite}
  :root .cz .cz-dots3 i:nth-child(2){animation-delay:.2s}
  :root .cz .cz-dots3 i:nth-child(3){animation-delay:.4s}
  :root .cz .cz-fly{animation:nz-fly .45s var(--e-out) forwards}
  :root .cz .cz-wsteps .now .ck{animation:nz-breath 1.6s ease-in-out infinite}
  :root .cz .cz-wsteps .ok .ck{animation:nz-pop .35s var(--e-spring)}
  :root .cz .cz-wmap .hx[data-st="wait"]{animation:nz-breath 2s ease-in-out calc(var(--i,0) * -110ms) infinite}
  :root .cz .cz-wmap .hx.is-lit{animation:nz-pop .5s var(--e-pop)}
  :root .cz .cz-wmap .hxt.is-lit{animation:nz-pop .4s var(--e-pop) .12s backwards}
  :root .cz .cz-wmap.run .nz-halo{animation:nz-halo 2s ease-out infinite}
  html:not([data-neon="off"]):root .cz .cz-wmap.done .nz-halo{animation:nz-halo 2s ease-out .2s 3}
  html:not([data-neon="off"]):root .cz .cz-wmap.done .crown{animation:nz-glint .9s cubic-bezier(.3,1.5,.5,1) .3s backwards}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  :root .cz .cz-lift{transition:transform var(--t-small) var(--e-out),box-shadow var(--t-small)}
  :root .cz .cz-lift:hover{transform:translate3d(0,-3px,0);box-shadow:0 18px 30px -24px rgba(72,35,255,.55)}
}
@media (prefers-reduced-motion:no-preference){
  html.nz-js:root .cz .cz-steps::before{transform:scaleX(0)}
  html.nz-js:root .cz .cz-steps.nz-on::before{transform:none;transition:transform 1.1s var(--e-out) .2s}
  html.nz-js:root .cz .cz-steps .cz-n{transform:scale(.4);opacity:0}
  html.nz-js:root .cz .cz-steps.nz-on .cz-n{transform:none;opacity:1;transition:transform .45s var(--e-spring) calc(.2s + var(--i,0) * 350ms),opacity .2s calc(.2s + var(--i,0) * 350ms)}
  html.nz-js:root .cz .cz-ln{stroke-dasharray:100;stroke-dashoffset:100}
  html.nz-js:root .cz .nz-on .cz-ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--e-out) calc(.2s + var(--i,0) * 200ms)}
  html.nz-js:root .cz .nz-on .cz-ln-dot{animation:nz-pop .4s var(--e-spring) calc(1.2s + var(--i,0) * 200ms) backwards}
  html.nz-js:root .cz .nz-in .cz-ico{animation:nz-pop .45s var(--e-spring) calc(var(--i,0) * 80ms) backwards}
  html.nz-js:root .cz .cz-state .cz-state-i{animation:nz-pop .5s var(--e-spring) .1s backwards}
  html.nz-js:root .cz .cz-state .cz-hand{animation:cz-turn 1.1s var(--e-out) .3s backwards}
  html:not([data-neon="off"]).nz-js:root .cz .cz-glow .btn-pri::after{animation:nz-pulse 1.8s ease-in-out .8s 3}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  html.nz-js:root .cz .cz-steps::before{transform:scaleY(0)}
}
@media (max-width:640px){
  :root .cz .cz-steps{grid-template-columns:minmax(0,1fr)}
  :root .cz .cz-steps::before{left:19px;right:auto;top:20px;bottom:20px;width:2px;height:auto;transform-origin:center top}
  :root .cz .cz-steps > li{padding-left:56px}
  :root .cz .cz-steps .cz-n{position:absolute;left:0;top:0}
}
@keyframes nz-breath{0%,100%{opacity:.35}50%{opacity:.7}}
@keyframes nz-spin{to{transform:rotate(360deg)}}
@keyframes nz-dot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes nz-fly{to{opacity:0;transform:translate3d(0,-18px,0) scale(.96)}}
@keyframes cz-in{from{opacity:0;transform:translate3d(0,8px,0)}}
@keyframes cz-turn{from{transform:rotate(-300deg)}}
@media print{:root .cz .cz-steps::before,:root .cz .cz-steps .cz-n,:root .cz .cz-ln,:root .cz .cz-ln-dot,:root .cz .cz-ico,:root .cz .cz-wmap *,:root .cz .cz-xf{opacity:1!important;transform:none!important;animation:none!important;stroke-dashoffset:0!important}
  :root .cz .cz-sheet{display:none!important}}