/* «Печать разработчика» — подпись Куин Маркетинг для подвала любого сайта.
   Тёмная капсула с фирменным знаком и написанием; из-за неё выглядывает маскот и ставит печать.
   Блок самодостаточный: шрифтов сайта не трогает (надписи — картинками), фона у него нет.
   Классы состояний ставит made.js: is-armed (ждём показа), is-live (клип идёт), is-stamped (оттиск стоит),
   is-hit (удар — на долю секунды), is-roomy (по бокам есть место под пометки), kuin-made--light (фон тёмный).
   Без скрипта видны финальная поза и оттиск.

   Слои капсулы, снизу вверх: маскот (__mascot) → сама капсула (::before) → знак, надписи, стрелка →
   пальцы маскота (__hands). Маскот стоит ЗА капсулой и продолжается под её кромку, поэтому срез фигуры —
   это кромка капсулы, вместе со скруглением; поверх кромки лежат только пальцы.
   Числа кадра (528 × 462, край на 384-й строке, полоса пальцев 36 строк, 6 из них над краем) — из kuin-stamp.json.

   Селекторы картинок идут от корня (.kuin-made …): так их не перебивают правила сайта вроде «.footer img». */
.kuin-made{
  --km-h:60px;            /* высота капсулы */
  --km-w:142px;           /* ширина кадра с маскотом */
  --km-x:9px;             /* где кадр стоит над капсулой: штамп приходится ровно над оттиском */
  display:inline-flex;align-items:flex-end;gap:34px;margin:0;padding:0;border:0;background:none;box-shadow:none;
  color:inherit;font-size:16px;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.kuin-made:hover,.kuin-made:focus{opacity:1;background:none;text-decoration:none}
.kuin-made img,.kuin-made video,.kuin-made canvas{
  display:block;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;
}
.kuin-made .kuin-made__pill{
  position:relative;isolation:isolate;       /* опора и свой порядок слоёв: маскот уходит под капсулу, но не под фон сайта */
  display:inline-flex;align-items:center;gap:12px;flex:none;box-sizing:border-box;
  height:var(--km-h);margin:84px 0 0;                /* сверху — место под голову маскота */
  padding:0 10px 0 30px;border-radius:999px;
}
/* сама капсула; absolute — отдельным слоем между маскотом и пальцами */
.kuin-made .kuin-made__pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,#2c2d31 0%,#1d1d1f 48%,#151517 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07),0 14px 26px -14px rgba(0,0,0,.6);
  transition:filter .3s,box-shadow .3s;
}
.kuin-made:hover .kuin-made__pill::before,.kuin-made:focus-visible .kuin-made__pill::before{
  filter:brightness(1.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.13),0 16px 30px -14px rgba(0,0,0,.65);
}
.kuin-made:focus-visible{outline:none}
.kuin-made:focus-visible .kuin-made__pill{outline:3px solid #124EFF;outline-offset:3px}

/* Маскот: absolute — стоит за капсулой. Край (384-я строка кадра из 462) приходится ровно на её верхнюю
   кромку: низ кадра на 78 строк глубже. Что ниже края — под капсулой, его не видно. */
.kuin-made .kuin-made__mascot{
  position:absolute;z-index:-2;left:var(--km-x);bottom:calc(100% - var(--km-w) * 78 / 528);
  width:var(--km-w);aspect-ratio:528 / 462;pointer-events:none;
}
/* Пальцы: absolute — узкая полоса поверх кромки капсулы, на 6 строк кадра выше края (нахлёст со слоем маскота) */
.kuin-made .kuin-made__hands{
  position:absolute;z-index:1;left:var(--km-x);top:calc(var(--km-w) * -6 / 528);
  width:var(--km-w);aspect-ratio:528 / 36;pointer-events:none;
}
.kuin-made .kuin-made__still,.kuin-made .kuin-made__mascot video,.kuin-made .kuin-made__hands canvas{
  position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;
}
.kuin-made .kuin-made__mascot .kuin-made__still{height:auto}   /* картинка короче клипа на полосу пальцев */
.kuin-made.is-armed .kuin-made__still{opacity:0}
.kuin-made.is-live .kuin-made__still{visibility:hidden}

/* Оттиск: фирменный знак в неглубокой «лунке» — туда, куда бьёт штамп. Сам знак не меняем. */
.kuin-made .kuin-made__seal{
  position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.3);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08);
}
.kuin-made .kuin-made__seal img{width:30px;height:30px}
/* кольцо расходится от оттиска в момент удара; absolute — лежит под знаком */
.kuin-made .kuin-made__seal::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(18,78,255,.9);opacity:0;pointer-events:none}
.kuin-made.is-armed .kuin-made__seal img{opacity:0;transform:scale(1.5) rotate(-14deg)}
.kuin-made.is-armed.is-stamped .kuin-made__seal img{opacity:1;transform:none}
.kuin-made.is-hit .kuin-made__seal img{animation:kuin-made-press .42s cubic-bezier(.2,1.4,.4,1) both}
.kuin-made.is-hit .kuin-made__seal::after{animation:kuin-made-ring .55s ease-out both}
.kuin-made.is-hit .kuin-made__pill{animation:kuin-made-thud .34s cubic-bezier(.3,1.6,.5,1) both}
@keyframes kuin-made-press{0%{opacity:0;transform:scale(1.5) rotate(-14deg)}45%{opacity:1;transform:scale(.9) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes kuin-made-ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.9)}}
@keyframes kuin-made-thud{0%{transform:none}28%{transform:translateY(3px) scaleY(.955)}100%{transform:none}}

.kuin-made .kuin-made__text{display:grid;gap:5px;justify-items:start}
.kuin-made .kuin-made__name{width:163px;height:28px}
.kuin-made .kuin-made__sub{width:200px;height:17px;opacity:.6}

.kuin-made .kuin-made__go{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:2px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .3s}
.kuin-made .kuin-made__go svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.kuin-made:hover .kuin-made__go,.kuin-made:focus-visible .kuin-made__go{background:rgba(255,255,255,.18)}
.kuin-made:hover .kuin-made__go svg,.kuin-made:focus-visible .kuin-made__go svg{transform:translate(2px,-2px)}

/* Рукописные пометки — с модификатором kuin-made--notes. Наборов два, текст один и тот же:
   · на широком месте — по бокам кнопки (__note--l и --r): класс is-roomy ставит made.js, когда блоку
     с ними хватает ширины родителя (нужно около 800 px);
   · иначе (телефон, узкая колонка, нет скрипта) — компактные: «Спасибо, что вы здесь» над кнопкой справа
     от маскота (__note--t), «Давай сделаем и ваш? kuintim.ru» под кнопкой (__note--b). Они стоят absolute
     от корня блока и не участвуют в отскоке кнопки; место под нижнюю держит отступ кнопки.
   Это обычные картинки, нарисованные тёмными чернилами. На тёмном фоне они переворачиваются в светлые:
   класс kuin-made--light ставит made.js, когда текст вокруг светлый, — или его пишут в разметке сами.
   (Маской их делать нельзя: маску из локального файла и с чужого домена браузер не рисует вовсе.) */
.kuin-made{position:relative}
.kuin-made .kuin-made__note{display:none;flex:none;margin:0 0 -14px;opacity:.8}
.kuin-made .kuin-made__note--l{width:176px;height:97px}
.kuin-made .kuin-made__note--r{width:196px;height:113px}
.kuin-made .kuin-made__note--t{position:absolute;right:2px;top:8px;width:140px;height:74px;margin:0}
.kuin-made .kuin-made__note--b{position:absolute;left:50%;bottom:0;width:312px;height:48px;margin:0 0 0 -156px}
.kuin-made.kuin-made--light .kuin-made__note{filter:invert(1)}
.kuin-made.kuin-made--notes .kuin-made__note--t,.kuin-made.kuin-made--notes .kuin-made__note--b{display:block}
.kuin-made.kuin-made--notes .kuin-made__pill{margin-bottom:56px}
.kuin-made.kuin-made--notes.is-roomy .kuin-made__note--l,.kuin-made.kuin-made--notes.is-roomy .kuin-made__note--r{display:block}
.kuin-made.kuin-made--notes.is-roomy .kuin-made__note--t,.kuin-made.kuin-made--notes.is-roomy .kuin-made__note--b{display:none}
.kuin-made.kuin-made--notes.is-roomy .kuin-made__pill{margin-bottom:0}

/* узкий телефон: без второй строки и чуть плотнее */
@media (max-width:400px){
  .kuin-made{--km-x:5px}
  .kuin-made .kuin-made__pill{gap:10px;padding:0 8px 0 26px}
  .kuin-made .kuin-made__sub{display:none}
  .kuin-made .kuin-made__go{width:34px;height:34px}
}
/* совсем узкий телефон: нижняя пометка ужимается под ширину кнопки, верхняя — чтобы не задевать голову на ударе */
@media (max-width:359px){
  .kuin-made .kuin-made__note--b{width:280px;height:43px;margin-left:-140px}
  .kuin-made .kuin-made__note--t{width:126px;height:67px;top:14px}
}
@media (max-width:340px){.kuin-made .kuin-made__name{width:146px;height:25px}}
@media (prefers-reduced-motion:reduce){
  .kuin-made.is-hit .kuin-made__seal img,.kuin-made.is-hit .kuin-made__seal::after,.kuin-made.is-hit .kuin-made__pill{animation:none}
}