/* Dapsite 2026 — маскот Дэп (краб из фирменного паттерна).
   Подключается ПОСЛЕ css/style.css и только на страницах *_maskot.html.
   Правила героя: один цвет за раз (задаётся через color), силуэт не поворачивается и не растягивается,
   двигается только боком (translateX), клешни умеют «щёлк». */

/* ==========================================================================
   Сам краб: встроенный SVG, цвет берётся из color
   ========================================================================== */
.dap { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.dap__t { transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1); }
.dap.is-snap .dap__t { transform: translateY(-9px); }

/* ==========================================================================
   404 — стоит на нижнем крае блока, въезжает из-за правого края
   ========================================================================== */
.dap-nf { position: absolute; right: clamp(16px, 5cqi, 90px); bottom: 0; width: clamp(140px, 19cqi, 280px); color: var(--white); cursor: pointer; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.js .dap-nf { transform: translateX(calc(100% + 120px)); }
.js .dap-nf.is-in { transform: none; }

@media (max-width: 1199px) {
  /* на планшете и телефоне — в потоке под кнопкой, чтобы не перекрывать текст */
  .dap-nf { position: relative; right: auto; bottom: auto; align-self: flex-end; box-sizing: content-box; width: clamp(120px, 30cqi, 200px); margin: auto 0 calc(-1 * var(--box)); padding-top: 36px; }
}

/* ==========================================================================
   «Скоро» (вакансии) — выглядывает из-за правого края экрана
   ========================================================================== */
.s--soon { overflow-x: clip; }
.dap-peek { position: absolute; right: 0; bottom: calc(var(--sy) / 2); z-index: 1; width: clamp(120px, 15vw, 230px); color: var(--ink); cursor: pointer; transform: translateX(46%); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .dap-peek { transform: translateX(105%); }
.js .dap-peek.is-in { transform: translateX(46%); }
.js .dap-peek.is-in.is-out { transform: translateX(-14%); }
@media (hover: hover) {
  .s--soon:hover .dap-peek, .js .s--soon:hover .dap-peek.is-in { transform: translateX(-14%); }
}
@media (max-width: 767px) {
  .s--soon .soon { padding-bottom: 84px; }
}

/* ==========================================================================
   Окно «заявка отправлена» — въезжает слева и щёлкает клешнями
   ========================================================================== */
.dap-ok { width: clamp(96px, 14vw, 140px); margin-bottom: 22px; color: var(--ink); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; }
.js .modal:not(.is-open) .dap-ok { transform: translateX(-220%); transition: none; }

/* ==========================================================================
   Подвал — стоит на нижней линии, на компьютере ходит за курсором (js/maskot.js)
   ========================================================================== */
.footer__bottom { position: relative; }
.dap-foot { position: absolute; right: 0; bottom: calc(100% + 1px); width: 44px; color: var(--red); pointer-events: none; will-change: transform; }

/* ==========================================================================
   Пустой фильтр кейсов и блога
   ========================================================================== */
.dap-empty { display: grid; justify-items: start; gap: 6px; padding-block: 10px 60px; }
.dap-empty[hidden] { display: none; }
.dap-empty__crab { width: clamp(110px, 16cqi, 180px); margin-bottom: 20px; color: var(--ink); }
.dap-empty__title { font-size: clamp(26px, 3.4cqi, 44px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.dap-empty__reset { margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }

/* ==========================================================================
   «Уменьшение движения»: краб на месте, без въездов
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dap-nf, .dap-peek, .dap-ok, .dap__t { transition: none; }
  .js .dap-nf { transform: none; }
  .js .dap-peek { transform: translateX(46%); }
}