/* LOCK — animated category scenes (home "Каталог" cards) */
.lk-scene{position:relative;display:block;height:150px;margin:-8px -8px 6px;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 110% at 50% 0%,#FFFFFF 0%,#F2F4F6 62%,#E8ECF0 100%);
  box-shadow:inset 0 0 0 1px rgba(10,14,19,.04);transition:background .5s,box-shadow .5s}
.lk-scene::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,92,40,.18),transparent);opacity:0;transition:opacity .5s}
.lk-scene svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.lk-cat:hover .lk-scene{background:radial-gradient(120% 110% at 50% 0%,#FFFFFF 0%,#FFF4EE 62%,#FDE6DA 100%)}
.lk-cat:hover .lk-scene::after{opacity:1}
.lk-cat:hover .lk-scene svg{transform:scale(1.05)}
.lk-cats .lk-cat:has(.lk-scene) .lk-cat__ico{display:none}
.lk-cats .lk-cat:has(.lk-scene) .lk-cat__go{top:16px;right:16px;z-index:2;background:#fff;box-shadow:0 4px 14px rgba(10,14,19,.08)}
.lk-cats .lk-cat:has(.lk-scene){padding:16px 16px 22px;min-height:0}
.lk-cats .lk-cat:has(.lk-scene) .lk-cat__name,.lk-cats .lk-cat:has(.lk-scene) .lk-cat__kids{padding:0 10px}

.lk-scene *{animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-play-state:paused}
.lk-cat.is-live .lk-scene *{animation-play-state:running}

.lk-scene :is(.lks-key,.lks-pin,.lks-spring,.lks-cam,.lks-ok,.lks-bolt,.lks-turn,.lks-mag,.lks-field,.lks-tap,.lks-scan,.lks-wave,.lks-phone,.lks-door,.lks-push,.lks-arrows,.lks-lever,.lks-latch,.lks-drawer,.lks-shine,.lks-drill,.lks-disc,.lks-halo,.lks-leaf,.lks-slide,.lks-roll,.lks-swing,.lks-twinkle,.lks-dial,.lks-handle,.lks-sdoor){transform-box:fill-box}

/* 1 cylinder */
.lk-scene .lks-key{animation-name:lks-key}
.lk-scene .lks-pin{animation-name:lks-pin}
.lk-scene .lks-spring{transform-origin:50% 0;animation-name:lks-spring}
.lk-scene .lks-shear{animation-name:lks-shear}
.lk-scene .lks-cam{transform-origin:50% 0;animation-name:lks-cam}
.lk-scene .lks-ok{transform-origin:50% 50%;animation-name:lks-pop}
@keyframes lks-key{0%{transform:translateX(-46px);opacity:0}12%{opacity:1}34%,78%{transform:none;opacity:1}95%,100%{transform:translateX(-46px);opacity:0}}
@keyframes lks-pin{0%,26%{transform:translateY(6px)}38%,80%{transform:none}92%,100%{transform:translateY(6px)}}
@keyframes lks-spring{0%,26%{transform:scaleY(1.43)}38%,80%{transform:scaleY(1)}92%,100%{transform:scaleY(1.43)}}
@keyframes lks-shear{0%,36%{opacity:.18}44%,76%{opacity:1}86%,100%{opacity:.18}}
@keyframes lks-cam{0%,44%{transform:rotate(0)}58%,72%{transform:rotate(-75deg)}84%,100%{transform:rotate(0)}}
@keyframes lks-pop{0%,48%{transform:scale(0);opacity:0}55%{transform:scale(1.18);opacity:1}61%,78%{transform:scale(1);opacity:1}86%,100%{transform:scale(0);opacity:0}}

/* 2 mortise lock */
.lk-scene .lks-bolt{animation-name:lks-bolt}
.lk-scene .lks-turn{transform-origin:50% 42%;animation-name:lks-turn}
@keyframes lks-bolt{0%,22%{transform:translateX(-32px)}40%,74%{transform:none}92%,100%{transform:translateX(-32px)}}
@keyframes lks-turn{0%,6%{transform:rotate(0)}34%,72%{transform:rotate(360deg)}94%,100%{transform:rotate(0)}}

/* 3 electromagnetic */
.lk-scene .lks-mag{animation-name:lks-mag}
.lk-scene .lks-field{transform-origin:50% 50%;animation-name:lks-field;opacity:0}
.lk-scene .lks-led{animation-name:lks-led;fill:#FF5C28}
.lk-scene .lks-blink{animation-name:lks-blink}
.lk-scene .lks-flow{animation:lks-flow 1s linear infinite;animation-play-state:paused}
.lk-cat.is-live .lk-scene .lks-flow{animation-play-state:running}
@keyframes lks-mag{0%,16%{transform:translateY(16px)}28%{transform:translateY(-1.5px)}32%,80%{transform:none}94%,100%{transform:translateY(16px)}}
@keyframes lks-field{0%,30%{opacity:0;transform:scale(.88)}40%{opacity:.75}62%{opacity:0;transform:scale(1.2)}100%{opacity:0;transform:scale(1.2)}}
@keyframes lks-led{0%,28%{fill:#FF5C28}34%,80%{fill:#22C55E}86%,100%{fill:#FF5C28}}
@keyframes lks-blink{0%,28%,82%,100%{opacity:.35}32%,78%{opacity:1}}
@keyframes lks-flow{to{stroke-dashoffset:-20}}

/* 4 smart lock */
.lk-scene .lks-tap{animation-name:lks-tap;opacity:0}
.lk-scene .lks-scan{animation-name:lks-scan}
.lk-scene .lks-ring{animation-name:lks-ring}
.lk-scene .lks-wave{transform-origin:100% 50%;animation-name:lks-wave;opacity:0}
.lk-scene .lks-phone{animation-name:lks-phone}
@keyframes lks-tap{0%{opacity:0;transform:scale(.6)}3%{opacity:1;transform:scale(1.25)}10%{opacity:.25;transform:scale(1)}100%{opacity:0}}
@keyframes lks-scan{0%,32%{transform:translateY(0);opacity:0}34%{opacity:1}42%{transform:translateY(14px)}48%{transform:translateY(0)}54%{transform:translateY(14px);opacity:1}57%,100%{opacity:0}}
@keyframes lks-ring{0%,56%{stroke-dashoffset:44}70%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:44}}
@keyframes lks-wave{0%,58%{opacity:0;transform:scale(.7)}64%{opacity:1}74%{opacity:0;transform:scale(1.15)}100%{opacity:0}}
@keyframes lks-phone{0%,52%{transform:translateX(10px);opacity:.4}60%,86%{transform:none;opacity:1}96%,100%{transform:translateX(10px);opacity:.4}}

/* 5 panic exit */
.lk-scene .lks-door{transform-origin:0 50%;animation-name:lks-open}
.lk-scene .lks-push{transform-origin:50% 100%;animation-name:lks-push}
.lk-scene .lks-exit{animation-name:lks-exit}
.lk-scene .lks-arrows{animation-name:lks-arrows}
@keyframes lks-open{0%,24%{transform:scaleX(1)}42%,70%{transform:scaleX(.58)}90%,100%{transform:scaleX(1)}}
@keyframes lks-push{0%,8%{transform:none}14%,30%{transform:translateY(2.5px) scaleY(.7)}38%,100%{transform:none}}
@keyframes lks-exit{0%,100%{opacity:.85}40%,70%{opacity:1;filter:drop-shadow(0 0 6px rgba(22,163,74,.7))}}
@keyframes lks-arrows{0%,36%{transform:translateX(-8px);opacity:0}46%,68%{transform:none;opacity:1}80%,100%{opacity:0}}

/* 6 lever handle */
.lk-scene .lks-lever{transform-origin:8px 7px;animation-name:lks-lever}
.lk-scene .lks-latch{animation-name:lks-latch}
@keyframes lks-lever{0%,14%{transform:rotate(0)}28%,54%{transform:rotate(30deg)}66%{transform:rotate(-4deg)}72%,100%{transform:rotate(0)}}
@keyframes lks-latch{0%,15%{transform:none}28%,54%{transform:translateX(-13px)}68%,100%{transform:none}}

/* 7 furniture */
.lk-scene .lks-drawer{transform-origin:50% 50%;animation-name:lks-drawer}
.lk-scene .lks-shine{animation-name:lks-shine;opacity:0}
@keyframes lks-drawer{0%,18%{transform:none;filter:none}38%,70%{transform:translateY(6px) scale(1.09);filter:drop-shadow(0 8px 8px rgba(10,14,19,.18))}88%,100%{transform:none;filter:none}}
@keyframes lks-shine{0%,40%{transform:translateX(0);opacity:0}44%{opacity:1}62%{transform:translateX(38px);opacity:1}66%,100%{transform:translateX(38px);opacity:0}}

/* 8 armor plate */
.lk-scene .lks-drill{animation-name:lks-drill}
.lk-scene .lks-disc{transform-origin:50% 50%;animation-name:lks-spin}
.lk-scene .lks-spark{animation-name:lks-spark;opacity:0}
.lk-scene .lks-halo{transform-origin:50% 50%;animation-name:lks-halo;opacity:0}
@keyframes lks-drill{0%,10%{transform:translateX(36px)}28%{transform:translateX(0)}30%{transform:translateX(1.5px)}32%{transform:translateX(0)}34%{transform:translateX(1.5px)}36%{transform:translateX(0)}38%{transform:translateX(1.5px)}40%{transform:translateX(0)}42%{transform:translateX(1.5px)}44%{transform:translateX(0)}46%{transform:translateX(1.5px)}50%{transform:translateX(0)}62%,100%{transform:translateX(36px)}}
@keyframes lks-spin{0%,27%{transform:rotate(0)}52%,100%{transform:rotate(720deg)}}
@keyframes lks-spark{0%,28%{opacity:0}29%{opacity:1}31%{opacity:0}33%{opacity:1}35%{opacity:0}37%{opacity:1}39%{opacity:0}41%{opacity:1}43%{opacity:0}45%{opacity:1}47%,100%{opacity:0}}
@keyframes lks-halo{0%,50%{opacity:0;transform:scale(.92)}58%{opacity:.8}74%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
.lk-scene--bronenakladki .lks-ok{animation-name:lks-pop2}
@keyframes lks-pop2{0%,52%{transform:scale(0);opacity:0}58%{transform:scale(1.18);opacity:1}64%,84%{transform:scale(1);opacity:1}92%,100%{transform:scale(0);opacity:0}}

/* 9 hinge */
.lk-scene .lks-leaf{transform-origin:0 50%;animation-name:lks-leaf}
.lk-scene .lks-leafshade{animation-name:lks-shade;opacity:0}
@keyframes lks-leaf{0%,12%{transform:none}44%,60%{transform:scaleX(.2) skewY(-10deg)}92%,100%{transform:none}}
@keyframes lks-shade{0%,12%{opacity:0}44%,60%{opacity:.35}92%,100%{opacity:0}}

/* 11 sliding */
.lk-scene .lks-slide{animation-name:lks-slide}
.lk-scene .lks-roll{transform-origin:50% 50%;animation-name:lks-roll}
@keyframes lks-slide{0%,12%{transform:none}46%,58%{transform:translateX(56px)}92%,100%{transform:none}}
@keyframes lks-roll{0%,12%{transform:rotate(0)}46%,58%{transform:rotate(494deg)}92%,100%{transform:rotate(0)}}

/* 12 accessories */
.lk-scene .lks-swing{transform-origin:50% 0;animation:lks-swing 3s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
.lk-cat.is-live .lk-scene .lks-swing{animation-play-state:running}
.lk-scene .lks-twinkle{transform-origin:50% 50%;animation:lks-twinkle 3s ease-in-out infinite;animation-play-state:paused}
.lk-cat.is-live .lk-scene .lks-twinkle{animation-play-state:running}
@keyframes lks-swing{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
@keyframes lks-twinkle{0%,100%{transform:scale(.3) rotate(0);opacity:0}40%,60%{transform:scale(1) rotate(45deg);opacity:1}}

/* 13 safe */
.lk-scene .lks-dial{transform-origin:50% 50%;animation-name:lks-dial}
.lk-scene .lks-handle{transform-origin:50% 69%;animation-name:lks-handle}
.lk-scene .lks-sdoor{transform-origin:0 50%;animation-name:lks-sdoor}
.lk-scene .lks-digits{animation-name:lks-digits}
@keyframes lks-dial{0%,4%{transform:rotate(0)}14%{transform:rotate(150deg)}24%{transform:rotate(-70deg)}32%,90%{transform:rotate(210deg)}100%{transform:rotate(0)}}
@keyframes lks-handle{0%,38%{transform:rotate(0)}46%,90%{transform:rotate(60deg)}98%,100%{transform:rotate(0)}}
@keyframes lks-sdoor{0%,48%{transform:scaleX(1)}62%,80%{transform:scaleX(.3) skewY(4deg)}94%,100%{transform:scaleX(1)}}
@keyframes lks-digits{0%,36%{fill:#FF5C28;opacity:.6}40%,92%{fill:#22C55E;opacity:1}100%{fill:#FF5C28;opacity:.6}}

@media (max-width:600px){.lk-scene{height:130px}}
@media (prefers-reduced-motion:reduce){.lk-scene *{animation:none!important}}