/* SnowTec — общий слой сайта (26.09.2026).
   Подключается ПОСЛЕ инлайнового <style> каждой страницы, поэтому при равной
   специфичности побеждает он. Цвета не задаёт: берёт переменные страницы
   (--accent, --ink, --line, --muted, --panel), так что у каждой страницы остаётся
   своя палитра, а поведение и отделка одинаковые.

   Зачем он нужен. Страницы сайта — рукописный HTML, и у каждой своя копия базовых
   стилей; одна и та же правка раньше означала 18 правок. Здесь то, что должно быть
   одинаковым везде:
     1. доступность — цели касания 44 px, видимый фокус, контраст подсказок в полях;
     2. отделка — сплошные заливки вместо градиентных, одно возвышение у блока
        (рамка ИЛИ тень), без цветной полосы слева у плашек;
     3. движение — один выезд первого экрана, обратная связь на наведении, появление
        блоков один раз; всё под prefers-reduced-motion;
     4. типографика — длина строки в журнале версий и во вступлениях.
   Библиотек нет: CSS и assets/site.js. Без скрипта всё видно сразу. */

:root{--ease:cubic-bezier(.16,1,.3,1)}
:where(img){height:auto}          /* height в разметке — против сдвигов вёрстки, не для растяжения */
html{scroll-padding-top:12px}

/* ---- 1. доступность ---- */
::placeholder{color:#8f9ba8;opacity:1}   /* было #757575: 4.0:1 на тёмном поле, теперь около 6:1 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.prod:focus-visible{outline-offset:8px}
.lang button{position:relative}
.lang button::after{content:"";position:absolute;inset:-9px -7px -9px -11px}   /* зона нажатия больше значка; справа не выходит за окно */
.brand{position:relative}
.brand::before{content:"";position:absolute;inset:-9px -6px}   /* зона нажатия 44 px без изменения высоты шапки */
.peq-buy{position:relative}
.peq-buy::before{content:"";position:absolute;inset:-14px -8px}
footer a{position:relative}
footer a::before{content:"";position:absolute;inset:-13px -4px}
@media (pointer:coarse),(max-width:900px){
  body.peqa .navlinks a.plink{min-height:44px;display:inline-flex;align-items:center}
}
/* строка меню на узком экране прокручивается; пока есть куда — справа затухание */
.navlinks.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}

/* ---- 2. отделка: сплошные заливки, одно возвышение ---- */
body.peqa .btn-primary,body.peqa .btn-amber{background-image:none;background-color:var(--accent);box-shadow:none}
body.peqa .btn-amber{background-color:#ee8a35}
body.peqa .btn-primary:hover{box-shadow:none}
body.peqa .badge{background-image:none;background-color:var(--accent)}
body.peqa .card.hl{background-image:none;background-color:var(--panel);box-shadow:none}
body.peqa .band{background-image:none}
body.peqa .gal-feat,body.peqa .pgal figure{box-shadow:none}   /* рамка ИЛИ тень: у карточек-картинок рамка, у панелей (.shot, .peq-shot) тень */
body.peqa .tubemodel,body.peqa table.m th{letter-spacing:.03em}
body.peqa .ptag{font-size:12.5px;letter-spacing:.03em;text-transform:none}   /* 40 знаков заглавными читаются плохо */

/* ---- 4. длина строки ---- */
.log,.log li,.log p{max-width:62ch}
.lead{max-width:62ch}

/* ---- 3. движение ---- */
.prod{transition:border-color .2s,box-shadow .2s}
body.peqa .pshot{transition:border-color .2s}
.prod .pshot img{transition:transform .7s var(--ease)}
body.peqa .prod .btn::after{display:inline-block;transition:transform .25s var(--ease)}
.btn,.peq-dl,.peq-buy{transition-property:opacity,filter,border-color,background-color,color,transform}
.btn:active,.peq-dl:active{transform:translateY(1px)}
.navlinks a.plink{transition:color .15s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .prod:hover .pshot img{transform:scale(1.03)}
  body.peqa .prod:hover .btn::after{transform:translateX(4px)}
}
.prod:focus-visible .pshot img{transform:scale(1.03)}

@media (prefers-reduced-motion:no-preference){
  /* первый экран: линейка выезжает слева, дальше текст и прибор по очереди */
  @keyframes st-rise{from{opacity:0;transform:translateY(12px)}}
  @keyframes st-rule{from{transform:scaleX(0)}}
  .peq-hero .peq-eyebrow::after{transform-origin:left;animation:st-rule 1s var(--ease) .1s backwards}
  .peq-hero h1,.peq-hero .peq-lede,.peq-hero .peq-sub,.peq-hero .peq-cta,.peq-hero .peq-metawrap{
    animation:st-rise .7s var(--ease) backwards}
  .peq-hero h1{animation-delay:.08s}
  .peq-hero .peq-lede{animation-delay:.16s}
  .peq-hero .peq-sub{animation-delay:.24s}
  .peq-hero .peq-cta{animation-delay:.32s}
  .peq-hero .peq-metawrap{animation-delay:.4s}
  .peq-hero .peq-shot,.peq-hero .hero-shot{animation:st-rise .9s var(--ease) .2s backwards}
  /* блоки ниже первого экрана появляются один раз; класс ставит site.js */
  .js .rv{opacity:0;transform:translateY(14px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--rvd,0ms)}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}