/* ПАЗЛ — страница «Скоро» (/lk/ и /lk/soon), версия 7 · 24.10.2026
   Пазлы — как на экране «Заявка отправлена». Страница целиком помещается на экране телефона. */
.lks{
  --bg:#FFFCF7;--ink:#3A3A3A;--muted:#6B6B6B;--slot:#E6DCCB;--line:#EDE6DA;
  --k:.8;
  min-height:100vh;min-height:100dvh;box-sizing:border-box;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:24px max(16px,env(safe-area-inset-right,0px)) calc(34px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--bg);color:var(--ink);text-align:center;font-family:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.lks *{box-sizing:border-box}
.lks h1{margin:0;max-width:520px;font-family:'Rubik',sans-serif;font-weight:600;font-size:30px;line-height:1.2;text-wrap:balance;position:relative;z-index:2}

/* ---------- фоновые пазлы ---------- */
.lks-bgp{position:absolute;pointer-events:none;opacity:.55;animation:lksDrift var(--d,14s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes lksDrift{from{translate:0 0;rotate:var(--r0,-8deg)}to{translate:var(--tx,14px) var(--ty,-22px);rotate:var(--r1,10deg)}}

/* ---------- сцена с пазлом (масштаб --k) ---------- */
.lks-stage{position:relative;z-index:3;display:block;flex:none;width:300px;height:290px;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border-radius:32px;
  transform:scale(var(--k));margin:calc(-145px * (1 - var(--k))) calc(-150px * (1 - var(--k)))}
.lks-stage:focus-visible{outline:3px solid #BFE9F7;outline-offset:4px}
.lks-board{position:absolute;left:41px;top:20px;width:232px;height:232px}
.lks-glow{position:absolute;left:102px;top:128px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,209,153,.55) 0%,rgba(191,233,247,.35) 45%,rgba(255,252,247,0) 70%)}
.lks-slot,.lks-pc{position:absolute;width:130px;height:130px;overflow:visible}
.lks-slot path{fill:none;stroke:var(--slot);stroke-width:2.5;stroke-dasharray:6 7;stroke-linejoin:round}
.lks-pc{transform-origin:52px 78px;will-change:transform,opacity}
.lks-pc svg{display:block;width:130px;height:130px;overflow:visible;transform-origin:52px 78px}
.lks-pc path{stroke:#FFFCF7;stroke-width:3;stroke-linejoin:round}
.lks-pc path.sh{fill:rgba(58,58,58,.10);stroke:none;transform:translateY(4px)}
.lks-l{position:absolute;left:22px;top:36px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  font-family:'Rubik',sans-serif;font-weight:600;font-size:46px;line-height:1;color:#fff;text-shadow:0 2px 0 rgba(58,58,58,.16);pointer-events:none}
.lks-fx{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.lks-dot{position:absolute;left:0;top:0;border-radius:50%}
.lks-cf{position:absolute;left:0;top:0;border-radius:3px}

/* ---------- облако функций ---------- */
.lks-cloud{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 7px;max-width:540px}
.lks-tag{--a:4px;font-family:'Rubik',sans-serif;font-weight:500;border:0;margin:0;cursor:default;border-radius:999px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  animation:lksPop .55s cubic-bezier(.34,1.56,.64,1) backwards,lksBob var(--d,5s) ease-in-out var(--dl,0s) infinite alternate;
  animation-delay:calc(var(--i,0) * 80ms + 300ms),var(--dl,0s);
  transition:scale .2s cubic-bezier(.34,1.56,.64,1),background-color .2s,box-shadow .2s}
.lks-tag:hover{scale:1.08}
.t-xl{font-size:21px;height:48px;padding:0 22px;font-weight:600}
.t-l{font-size:17px;height:40px;padding:0 17px}
.t-m{font-size:15px;height:36px;padding:0 14px}
.t-s{font-size:13px;height:32px;padding:0 12px}
.c-blue{background:#E3F4FA;color:#075E7D}.c-blue.t-xl,.c-blue.t-l{background:#BFE9F7;color:#0A3A4D}
.c-coral{background:#FFE8EA;color:#A3203A}.c-coral.t-xl,.c-coral.t-l{background:#FFC7CD;color:#4A0E18}
.c-green{background:#EEF3DC;color:#3F6A0A}.c-green.t-xl,.c-green.t-l{background:#D4EDA8;color:#22380A}
.c-orange{background:#FFF1DE;color:#8A4300}.c-orange.t-xl,.c-orange.t-l{background:#FFD199;color:#4A2600}
.c-lilac{background:#D6C8FF;color:#3B2470}.c-lilac.t-xl,.c-lilac.t-l{background:#C7B5FF;color:#2A1860}
.c-yellow{background:#FFD43B;color:#3D2E00;font-weight:600}
@keyframes lksPop{from{opacity:0;scale:.3}}
@keyframes lksBob{from{translate:0 calc(var(--a) * -1);rotate:var(--r0,-1.5deg)}to{translate:0 var(--a);rotate:var(--r1,1.5deg)}}


/* ---------- вернуться на сайт ---------- */
.lks .lks-back{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 6px;border-radius:22px;
  background:#fff;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line);
  transition:box-shadow .16s ease-out,transform .2s cubic-bezier(.34,1.56,.64,1),color .16s}
.lks-back i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#E3F4FA;color:#0B7FA8;
  transition:background-color .16s,color .16s,translate .2s cubic-bezier(.34,1.56,.64,1)}
.lks .lks-back:hover{color:#075E7D;transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px #BFE9F7,0 3px 0 #BFE9F7}
.lks .lks-back:hover i{background:#1FB6E8;color:#fff;translate:-2px 0}
.lks .lks-back:active{transform:translateY(1px);box-shadow:inset 0 0 0 1.5px #BFE9F7,0 0 0 #BFE9F7}
.lks .lks-back:focus-visible{outline:3px solid #BFE9F7;outline-offset:3px}

/* ---------- телефон: всё на одном экране ---------- */
@media (max-width:480px){
  .lks{--k:.62;gap:16px;padding-top:16px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .lks h1{font-size:22px}
  .lks-cloud{gap:7px 6px}
  .t-xl{font-size:18px;height:42px;padding:0 18px}
  .t-l{font-size:15px;height:36px;padding:0 14px}
  .t-m{font-size:14px;height:33px;padding:0 12px}
  .t-s{font-size:12.5px;height:30px;padding:0 11px}
}
@media (max-width:480px) and (max-height:700px){
  .lks{--k:.52;gap:12px}
  .lks h1{font-size:20px}
}
@media (max-width:480px) and (max-height:600px){
  .lks{--k:.44;gap:10px}
  .t-xl{font-size:16px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .lks-bgp,.lks-tag{animation:none!important}
}