/* xgatespb.ru · /protetika/ — анимации (09.10.2026, порт 8744). Пара к anim.js; работает только при html.anm,
   а класс ставит anim.js, если нет prefers-reduced-motion. Двигаются только opacity/transform — 60 fps на телефоне. */

/* 1. Появление по скроллу */
.anm .rv{opacity:0;transform:translateY(18px)}
.anm .rv.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.16,1,.3,1)}
@media print{.anm .rv{opacity:1!important;transform:none!important}}

/* 2. V-type: Canvas-сцена вместо статичной SVG; SVG остаётся для скринридеров */
.anm .vt-fan.cv{position:relative}
.vt-cv{display:block;width:100%;height:auto;aspect-ratio:320/276;background:#23272b}
.anm .vt-fan.cv>svg{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:560px){.vt-cv{max-width:360px;margin:0 auto}}

/* 3. D-type: угловые схемы по очереди, подсветка пункта про держатель — когда его видно */
.anm .angs.pre figure{opacity:0;transform:translateY(12px) rotate(-3deg)}
.anm .angs.on figure{opacity:1;transform:none;transition:opacity .45s ease-out,transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*140ms)}

.anm .dsr ol li:nth-child(2){animation:none}
.anm .dsr.pz ol li:nth-child(2){animation:dsPulse 2.4s ease-out 1}

/* 4. Винты */
.anm .tqi{position:relative}
.anm .tq.pre .tqi::before{content:'';position:absolute;left:-1px;right:-1px;top:-4px;height:4px;background:#d5d7da;transform-origin:100% 50%}
.anm .tq.on .tqi::before{transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.anm .tq.on .tqi:nth-child(2)::before{transition-delay:.16s}
.anm .vm.pre>div{opacity:0;transform:translateX(-10px)}
.anm .vm.on>div{opacity:1;transform:none;transition:opacity .35s ease-out,transform .45s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*45ms)}
.anm .vm.on>.old{opacity:1}
.vm .dt{display:inline-block}
.anm .vm.pre .dt{transform:scale(0)}
.anm .vm.on .dt{transform:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*45ms + 160ms + var(--j,0)*70ms)}
/* красное предупреждение: вздрогнуть один раз, «!» — две волны */
.anm .vwarn.on{animation:wShake .5s cubic-bezier(.36,.07,.19,.97) .1s 1 both}
.anm .vwarn.on::before{animation:wRing 1s ease-out .2s 2}
.anm .vwarn.on::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(181,69,58,.16) 50%,transparent 70%) no-repeat;background-size:220% 100%;animation:wSheen 1.1s ease-out .15s 1 both}
@keyframes wShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}100%{transform:none}}
@keyframes wRing{0%{box-shadow:0 0 0 0 rgba(181,69,58,.6)}100%{box-shadow:0 0 0 12px rgba(181,69,58,0)}}
@keyframes wSheen{from{background-position:120% 0;opacity:1}to{background-position:-20% 0;opacity:0}}

/* 5. Опросники: волна от нажатия, отклик на нажатие, ответ по строкам */
.anm .chips button,.anm .kcol button{position:relative;overflow:hidden;transition:transform .12s ease-out,background-color .2s,border-color .2s,box-shadow .2s}
.anm .chips button:active,.anm .kcol button:active{transform:scale(.97)}
.rp{position:absolute;border-radius:50%;background:rgba(91,182,95,.28);pointer-events:none;transform:scale(0);animation:rpIn .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rpIn{to{transform:scale(1);opacity:0}}
.anm .qcard.sw>*:not(ul):not(ol):not(.vwarn),.anm .qcard.sw li{animation:qIn .38s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k,0)*45ms + 60ms)}
@keyframes qIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){.anm .rv,.anm .angs.pre figure,.anm .vm.pre>div,.anm .vm.pre .dt{opacity:1!important;transform:none!important}.vt-cv{display:none}.anm .vt-fan.cv>svg{position:static!important;width:100%!important;height:auto!important;clip-path:none}}

/* 6. «Два уровня»: сцены на Canvas (scene-*.js). Без JS видна картинка — стоп-кадр той же сцены */
.scn-box{position:relative;background:#23272b;aspect-ratio:3/2;overflow:hidden}
.scn-box picture img{display:block;width:100%;height:100%;object-fit:cover}
.scn-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.scn-re{position:absolute;right:8px;bottom:8px;font:600 12px/1 var(--head,Montserrat,system-ui,sans-serif);color:#e8ecee;background:rgba(27,30,33,.82);border:1px solid rgba(255,255,255,.22);padding:6px 9px;border-radius:4px;cursor:pointer}
[data-scn="mua"] .scn-re{right:auto;bottom:auto;left:8px;top:8px}
.scn-re:hover,.scn-re:focus-visible{border-color:#5bb65f;outline:none}
@media print{.scn-cv,.scn-re{display:none}}