/* shenzhen-systems.ru: общая сдержанная анимация. Только transform/opacity. Без JS и при reduced-motion весь контент виден сразу. */
:root{--hwm-ease:cubic-bezier(.2,.7,.2,1);--hwm-off:72px;--hwm-sh:rgba(27,34,39,.16);--hwm-card-sh:0 10px 28px -12px rgba(27,34,39,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hwm-sh:rgba(0,0,0,.5);--hwm-card-sh:0 10px 28px -12px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--hwm-sh:rgba(0,0,0,.5);--hwm-card-sh:0 10px 28px -12px rgba(0,0,0,.6)}

/* 1. плавные якоря с учётом липкой шапки */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{scroll-padding-top:calc(var(--hwm-off) + 16px)}
main.lp section[id]{scroll-margin-top:0}

/* 2. появление при прокрутке: класс .hwr ставит JS только блокам ниже первого экрана */
@keyframes hwm-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hwr{opacity:0}
.hwr.hwr-in{opacity:1;animation:hwm-in 640ms var(--hwm-ease) var(--hwm-d,0ms) backwards}

/* 3. шапка: тонкая тень и полупрозрачный фон с blur 8px при прокрутке (blur на псевдоэлементе: на самой шапке он сломал бы fixed-меню внутри неё) */
header.site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
header.site{transition:box-shadow .25s ease,background-color .25s ease}
header.site.hwm-s{background-color:transparent;box-shadow:0 8px 24px -14px var(--hwm-sh)}
header.site.hwm-s::before{opacity:1}
@supports not (background:color-mix(in srgb,red,blue)){header.site.hwm-s{background-color:var(--bg)}}
.hwm-sent{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden}
/* мегаменю, выпадающие списки, поиск: fade + лёгкий сдвиг (display:none заменён на visibility, чтобы работал и выход) */
.hn-panel,.hn-drop,.hn-search{transition:opacity .18s ease,transform .18s var(--hwm-ease),visibility 0s}
.hn-panel[hidden],.hn-drop[hidden],.hn-search[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}

/* 4. карточки */
.fam,.k-card,.lp-m,.c-card,.mc-item{transition:transform .2s var(--hwm-ease),box-shadow .2s ease,border-color .2s ease}
.k-pic,.lp-m figure,.hm-lead{overflow:hidden}
@media (hover:hover){
 .fam:hover,.k-card:hover,.lp-m:hover,.c-card:hover,.mc-item:hover{transform:translateY(-3px);box-shadow:var(--hwm-card-sh)}
 .k-pic img,.lp-m figure img,.hm-lead img{transition:transform .5s var(--hwm-ease)}
 .k-card:hover .k-pic img,.lp-m:hover figure img,.hm-lead:hover img{transform:scale(1.02)}
}

/* 5. кнопки */
.btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .12s ease}
.btn:hover{box-shadow:0 4px 14px -6px var(--hwm-sh)}
.btn:active{transform:scale(.985);box-shadow:none}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--hw);outline-offset:3px}

/* 6. счётчики: без скачков ширины */
.hwm-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}

/* 7. полоса якорей: подчёркивание переезжает */
.lp-sub nav{position:relative}
.lp-sub nav a{transition:color .2s ease}
.hwm-ink{position:absolute;left:0;bottom:2px;width:1px;height:2px;background:var(--hw);transform-origin:0 0;transform:translateX(0) scaleX(0);opacity:0;transition:transform .35s var(--hwm-ease),opacity .2s ease;pointer-events:none}
.hwm-ink.on{opacity:1}

/* 8. прогресс чтения */
.hwm-prog{position:fixed;left:0;top:0;right:0;height:2px;z-index:55;pointer-events:none;opacity:0;transition:opacity .2s ease}
.hwm-prog.on{opacity:1}
.hwm-prog i{display:block;height:100%;background:#C7000B;transform-origin:0 0;transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
 .hwr{opacity:1!important}.hwr.hwr-in{animation:none!important}
 .fam,.k-card,.lp-m,.c-card,.mc-item,.btn,header.site,header.site::before,.hn-panel,.hn-drop,.hn-search,.hwm-ink,.k-pic img,.lp-m figure img,.hm-lead img{transition:none!important}
 .fam:hover,.k-card:hover,.lp-m:hover,.c-card:hover,.mc-item:hover,.k-card:hover .k-pic img,.lp-m:hover figure img,.hm-lead:hover img,.btn:active{transform:none!important}
}