/* Вау-набір еталону: токени руху і компоненти, які сесії вставляють, а не вигадують (25.10.2026).
   Підключення: <link rel="stylesheet" href="https://etalon.initask.com/kit/wow.css"> і <script type="module" src=".../kit/wow.js">.
   Кожен компонент має кінцевий кадр для prefers-reduced-motion. */
:root{
  --w-ink:#0E1422;--w-dim:#333B4A;--w-muted:#5F6673;--w-line:#E2E6EC;--w-soft:#EEF1F5;--w-card:#fff;--w-page:#F2F4F7;
  --w-accent:#1A99FE;--w-accent-t:#0B6BC2;--w-ok:#047857;--w-warn:#B45309;--w-bad:#BE123C;--w-focus:#0B6BC2;--w-btn-bg:linear-gradient(180deg,#1C83DC,#0B62B4);
  --w-sh-1:0 1px 1px rgba(14,20,34,.05);
  --w-sh-2:0 2px 4px -1px rgba(14,20,34,.06),0 8px 10px -6px rgba(14,20,34,.07);
  --w-sh-3:0 14px 28px -14px rgba(14,20,34,.18),0 40px 56px -28px rgba(14,20,34,.16);
  --w-in:cubic-bezier(.16,1,.3,1);--w-std:cubic-bezier(.2,.8,.2,1);--w-fly:cubic-bezier(.65,0,.35,1);--w-spring:cubic-bezier(.34,1.56,.64,1);
  --w-micro:140ms;--w-small:240ms;--w-mid:500ms;--w-big:900ms;--w-count:1400ms;--w-bg:9s;--w-stagger:60ms;
  /* Пружини з motion.js (spring(SPRING.*)) як CSS linear(): мʼяка 810 мс, жвава 540 мс, пружна 1080 мс */
  --w-spring-soft:linear(0,.084,.238,.399,.542,.658,.75,.818,.87,.907,.934,.953,.967,.977,.984,.989,.992,.994,.996,.997,.998,.999,.999,.999,1);
  --w-spring-snappy:linear(0,.08,.233,.406,.568,.704,.81,.888,.942,.977,.997,1.008,1.013,1.014,1.012,1.01,1.008,1.006,1.004,1.002,1.001,1.001,1,1,1);
  --w-spring-bouncy:linear(0,.21,.597,.941,1.142,1.198,1.157,1.081,1.013,.972,.961,.969,.984,.997,1.005,1.008,1.006,1.003,1.001,.999,.998,.999,.999,1,1);
  --w-soft-ms:810ms;--w-snappy-ms:540ms;--w-bouncy-ms:1080ms;
}

/* Поява один раз при вході в екран, крок 60 мс через --i */
.w-rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--w-in),transform .7s var(--w-in);transition-delay:calc(var(--i,0) * 60ms)}
.w-rv.in{opacity:1;transform:none}

/* Графіки, що виростають: смуги від основи, лінії малюються */
.w-grow-x{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--w-in);transition-delay:calc(var(--i,0) * 80ms)}
.w-grow-y{transform-origin:center bottom;transform:scaleY(0);transition:transform .9s var(--w-in);transition-delay:calc(var(--i,0) * 70ms)}
.in .w-grow-x,.w-grow-x.in{transform:scaleX(1)}
.in .w-grow-y,.w-grow-y.in{transform:scaleY(1)}
.w-draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--w-fly)}
.in .w-draw,.w-draw.in{stroke-dashoffset:0}

/* Кнопка: магніт, натиск, відблиск, кільце фокусу */
.w-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border:0;border-radius:14px;
  font:inherit;font-weight:750;color:#fff;background:var(--w-btn-bg,linear-gradient(180deg,#1C83DC,#0B62B4));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 22px -12px rgba(11,107,194,.7);
  cursor:pointer;transition:transform var(--w-micro) var(--w-std),box-shadow var(--w-micro) var(--w-std);will-change:transform}
.w-btn::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0}
.w-btn:hover::after{animation:w-shine .7s var(--w-std)}
.w-btn:active{transform:scale(.97)}
.w-btn:focus-visible{outline:3px solid var(--w-focus,#0B6BC2);outline-offset:3px}
.w-btn.ghost{color:var(--w-ink);background:#fff;box-shadow:var(--w-sh-1),var(--w-sh-2);border:1px solid var(--w-line)}
@keyframes w-shine{0%{left:-60%;opacity:1}100%{left:120%;opacity:0}}

/* Скелет із шимером на час завантаження */
.w-sk{position:relative;overflow:hidden;background:var(--w-soft);border-radius:10px}
.w-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:w-sk 1.3s var(--w-std) infinite}
@keyframes w-sk{to{transform:translateX(100%)}}

/* Святкова анімація на успіху: частинки з кнопки */
.w-burst{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:9999;will-change:transform,opacity}

/* Слайдер «до і після» */
.w-ba{position:relative;overflow:hidden;border-radius:20px;box-shadow:var(--w-sh-1),var(--w-sh-2),var(--w-sh-3);user-select:none;touch-action:pan-y;--x:50%}
.w-ba>.w-ba-a,.w-ba>.w-ba-b{position:absolute;inset:0}
.w-ba>.w-ba-b{clip-path:inset(0 0 0 var(--x))}
.w-ba .w-ba-h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(14,20,34,.12);transform:translateX(-1px)}
.w-ba .w-ba-h i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:var(--w-sh-2),var(--w-sh-3);display:grid;place-items:center;color:var(--w-ink)}
.w-ba .w-ba-l{position:absolute;top:14px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--w-dim)}

/* Схема процесу з документами, що летять між вузлами */
.w-flow .node{transition:transform .3s var(--w-spring)}
.w-flow .node.hit{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .w-rv,.w-grow-x,.w-grow-y{opacity:1!important;transform:none!important;transition:none!important}
  .w-draw{stroke-dashoffset:0!important;transition:none!important}
  .w-btn::after,.w-sk::after{animation:none!important}
}