/* Демо v3: курсор ИИ в простое и при сборке блока, пустые места, подвал. Подключается после header.css. */

/* ——— курсор: спрятан, пока превращён; щелчок ——— */
.cur{z-index:5;transition:opacity var(--t-mid),scale var(--t-base) var(--ease-out)}
.cur.cur--hide{opacity:0;scale:.4}
.cur.cur--click svg{scale:.8;transition:scale .12s}

/* ——— виджеты курсора ——— */
.cw{position:absolute;z-index:2;border-radius:14px;background:#0B0B0B;color:#D0D0D0;box-shadow:0 0 0 1px #242424,0 24px 60px rgba(8,8,8,.35);overflow:hidden;pointer-events:none;
  clip-path:inset(0 100% calc(100% - 30px) 0 round 14px)}
/* превращение (простой и версия А): из кончика курсора выезжает строка заголовка, потом окно опускается клетками */
.cw.in{animation:cwMorphIn .75s forwards}
@keyframes cwMorphIn{
  0%{clip-path:inset(0 100% calc(100% - 30px) 0 round 14px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  38%{clip-path:inset(0 0 calc(100% - 30px) 0 round 14px);animation-timing-function:steps(7)}
  100%{clip-path:inset(0 0 0 0 round 14px)}}
.cw.out{animation:cwMorphOut .5s forwards}
@keyframes cwMorphOut{
  0%{clip-path:inset(0 0 0 0 round 14px);animation-timing-function:steps(6)}
  55%{clip-path:inset(0 0 calc(100% - 30px) 0 round 14px);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{clip-path:inset(0 100% calc(100% - 30px) 0 round 14px)}}
.cw.in .cw-bar>*,.cw.in .cw-pre,.cw.in canvas,.cw.in .cw-prog{animation:cwFade .3s .3s both}
@keyframes cwFade{from{opacity:0}to{opacity:1}}
/* отдельное окно (версия Б): точка → линия → окно, как старый монитор; закрытие обратно и улетает к курсору */
.cw--win{transform-origin:50% 50%;clip-path:inset(49% 49% 49% 49% round 14px)}
.cw--win.in{animation:cwWinIn .8s forwards}
@keyframes cwWinIn{
  0%{opacity:0;transform:scale(.3);clip-path:inset(49% 49% 49% 49% round 14px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  22%{opacity:1;transform:scale(1);clip-path:inset(49% 49% 49% 49% round 14px);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  50%{clip-path:inset(49% 0 49% 0 round 4px);box-shadow:0 0 0 1px #242424,0 0 40px rgba(255,255,255,.35);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 14px)}}
.cw--win.in .cw-bar>*,.cw--win.in .cw-pre,.cw--win.in .cw-prog{animation:cwFade .25s .55s both}
.cw--win.out{animation:cwWinOut .5s forwards}
@keyframes cwWinOut{
  0%{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 14px);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  40%{clip-path:inset(49% 0 49% 0 round 4px);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  70%{opacity:1;transform:none;clip-path:inset(49% 49% 49% 49% round 4px);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(.2);clip-path:inset(49% 49% 49% 49% round 4px)}}
.cw-caret{font-style:normal;color:#FBFBFB;animation:blink .6s steps(1) infinite}
/* подсветка кода */
.k-t{color:#7AA2F7}.k-a{color:#E0AF68}.k-s{color:#9ECE6A}.k-k{color:#BB9AF7}.k-f{color:#7DCFFF}.k-n{color:#FF9E64}.k-p{color:#F7768E}.k-c{color:#565F89}.k-x{color:#8A8FA8}.k-ok{color:#9ECE6A}
.cw-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;height:30px;padding:0 12px;border-bottom:1px solid #1E1E1E;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;white-space:nowrap}
.cw-bar span:first-of-type{color:#FBFBFB}
.cw-x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#232323;color:#FBFBFB;font:500 13px/1 var(--f-text);order:3}
.cw canvas{display:block;width:100%;height:calc(100% - 30px)}
.cw-score{color:#FBFBFB!important}
.cw-pre{margin:0;padding:10px 12px;font:400 11px/16px var(--f-mono);color:#D0D0D0;white-space:pre-wrap;word-break:break-all;overflow:hidden;height:calc(100% - 30px)}
.cw-pre--fast{height:calc(100% - 58px);font-size:7px;line-height:9px;letter-spacing:.02em;color:#8A8FA8;filter:blur(.15px);display:flex;flex-direction:column;justify-content:flex-end}
.cw-prog{display:flex;align-items:center;gap:10px;height:28px;padding:0 12px;border-top:1px solid #1E1E1E}
.cw-prog i{display:block;height:3px;width:0;border-radius:3px;background:#FBFBFB;flex:none;max-width:calc(100% - 50px)}
.cw-prog span{margin-left:auto;font:500 10px/1 var(--f-mono);letter-spacing:.1em;color:#FBFBFB}

/* ——— пустое место, которое соберёт ИИ (data-build) ——— */
.bld{position:relative}
.bld:not(.bld-done)>*:not(.bld-ph){visibility:hidden}
.bld-ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:24px;border:1.5px dashed #C8C8C8;
  background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(8,8,8,.025) 14px 15px)}
[data-theme=dark] .bld-ph,.cool .bld-ph{border-color:#BDBDBD}
.bld-ph-t{font:500 22px/28px var(--f-head);color:#8A8A8A}
.bld-ph-t i{font-style:normal;margin-left:4px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bld-done .bld-ph{opacity:0;transition:opacity .3s;pointer-events:none}
.bld-cover{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.bld-cover i{position:absolute;transition:opacity .16s steps(2)}
.bld-cover.go i{opacity:0}

/* ——— подвал: пять колонок, строка «обновлено», кнопка наверх ——— */
.foot-cols--5{grid-template-columns:4fr 2fr 2fr 2fr 2fr}
.foot-cols .foot-upd{font:500 11px/1 var(--f-mono);letter-spacing:.14em;white-space:nowrap;margin-top:22px;display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 12px;border-radius:99px;box-shadow:inset 0 0 0 1px #242424;color:#BDBDBD!important}
.foot-upd::before{content:"";width:6px;height:6px;border-radius:50%;background:#FBFBFB;box-shadow:0 0 0 0 rgba(251,251,251,.5);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,251,251,.45)}70%{box-shadow:0 0 0 8px rgba(251,251,251,0)}100%{box-shadow:0 0 0 0 rgba(251,251,251,0)}}
.foot-cols a small{margin-left:8px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:48px 0 24px}
.foot-bar .label{color:#8A8A8A}
.foot-top{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:99px;box-shadow:inset 0 0 0 1px #2A2A2A;color:#D9D9D9!important;transition:box-shadow var(--t-base)}
.foot-top:hover{box-shadow:inset 0 0 0 1px #8A8A8A}
.foot-top svg{width:14px;height:14px;transition:transform var(--t-base) var(--ease-out)}
.foot-top:hover svg{transform:translateY(-3px)}
@media (max-width:1100px){.foot-cols--5{grid-template-columns:repeat(4,1fr)}.foot-cols--5 .foot-brand{grid-column:1/-1}}
@media (max-width:640px){.foot-cols--5{grid-template-columns:1fr 1fr}}