/* ---------- финал: падение мамонта + призыв в команду ---------- */
.join {
  position: relative;
  isolation: isolate;
  /* по вертикали не режем: мамонт падает из-за верхнего края экрана, пролетая над секцией выше */
  overflow-x: clip;
}
.join__scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 4rem;
  /* сцена не меньше экрана, но растёт под текст — иначе на широких экранах текст вылезал на землю,
     а мамонт (прижат к низу сетки) проваливался под неё */
  min-height: 84svh;
  padding: 8svh 6vw 0;
}

/* мамонт стоит слева, ноги — на линии земли */
.join__mammoth {
  position: relative;
  z-index: 2;
  width: min(44rem, 46vw, 74svh);
  height: auto;
  margin-bottom: -5.6svh; /* ступни утоплены в землю: земля лежит поверх них, просветов нет */
  transform-origin: 50% 100%;
  will-change: transform;
}
.js .join__mammoth { visibility: hidden; }

/* пыль и осколки от удара */
.join__dust {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  /* до низа земли — облака пыли не обрезаются краем холста (ниже их закрывает земля) */
  height: calc(100% + 16svh);
  pointer-events: none;
}

/* ---------- текст и кнопка ---------- */
.join__copy {
  position: relative;
  z-index: 4;
  align-self: center;
  max-width: 38rem;
  justify-self: end;
  margin-right: 2vw;
  padding-bottom: 8svh;
}
.join__tag {
  display: block;
  width: min(16rem, 26svh);
  height: auto;
  margin: 0 0 -0.5rem -1rem;
  rotate: -6deg;
}
.join__title {
  margin: 0;
  font-family: var(--font-display-ru);
  font-size: min(5.6rem, 9.5svh);
  font-weight: 900;
  line-height: 1.04; /* место под кратку «Й» — не касается строки выше */
  text-transform: uppercase;
  background: url("../assets/offers/stone.webp") 40% 40% / 30rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.35rem 0 #050506);
}
.join__text {
  max-width: 32rem;
  margin: min(1.75rem, 2.6svh) 0 0;
  font-size: min(1.15rem, 2.1svh);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
}
.js [data-join-reveal] { opacity: 0; }

/* кнопка — каменная плита с неровными краями и вырезанной надписью */
.join__cta {
  position: relative;
  margin-top: min(6rem, 10svh); /* место под обводку баллончиком — не заходит на текст выше */
  width: max-content;
}
.join__btn {
  position: relative;
  display: inline-block;
  padding-bottom: 0.9rem; /* место под «толщину» плиты */
  will-change: transform;
}
.join__btn-face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: min(1.6rem, 2.6svh) 2.6rem min(1.6rem, 2.6svh) 2.2rem;
  background: url("../assets/offers/stone.webp") 30% 60% / 22rem auto;
  /* рваный край плиты */
  clip-path: polygon(2% 8%, 14% 0, 31% 5%, 52% 1%, 70% 6%, 88% 0, 99% 9%, 97% 34%, 100% 58%, 96% 92%, 78% 100%, 57% 95%, 36% 100%, 17% 94%, 0 98%, 3% 70%, 0 44%, 2% 22%);
  transition: translate 0.18s ease-out, filter 0.3s;
}
/* «толщина» плиты — тёмный камень снизу */
.join__btn::before {
  content: "";
  position: absolute;
  inset: 0.9rem 0 0;
  background: #050506;
  clip-path: polygon(2% 8%, 14% 0, 31% 5%, 52% 1%, 70% 6%, 88% 0, 99% 9%, 97% 34%, 100% 58%, 96% 92%, 78% 100%, 57% 95%, 36% 100%, 17% 94%, 0 98%, 3% 70%, 0 44%, 2% 22%);
}
/* надпись вырезана в камне: тёмная, со светлой кромкой снизу */
.join__btn-label {
  font-family: var(--font-display-ru);
  font-size: min(2.3rem, 4svh);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: #1a191c;
  text-shadow: 0 0.08rem 0 rgb(255 255 255 / 0.35), 0 -0.06rem 0 rgb(0 0 0 / 0.6);
}
.join__btn-icon {
  width: 2.2rem;
  height: 2.2rem;
  fill: #1a191c;
  filter: drop-shadow(0 0.08rem 0 rgb(255 255 255 / 0.35));
  transition: fill 0.3s, rotate 0.4s;
}
/* баллончик: обводка вокруг плиты и стрелка к ней — рисуются при наведении */
.join__btn-circle {
  position: absolute;
  z-index: 2;
  /* эллипс, описанный вокруг плиты: шире и выше неё на ~√2, чтобы углы плиты были внутри */
  top: -62%;
  bottom: -50%;
  left: -24%;
  right: -24%;
  width: 148%;
  max-width: none; /* иначе базовое правило canvas { max-width: 100% } сжимало обводку */
  height: 212%;
  rotate: -2deg;
  pointer-events: none;
}
@media (hover: hover) {
  .join__btn:hover .join__btn-face { filter: brightness(1.12); }
}
/* нажатие — плита вдавливается */
.join__btn:active .join__btn-face { translate: 0 0.7rem; }
.join__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.75rem; }

/* ---------- земля: граница с будущим подвалом ---------- */
.join__ground {
  position: relative;
  z-index: 3; /* поверх ступней мамонта — он стоит в грунте, а не над ним */
  pointer-events: none;
  display: block;
  width: 100%;
  height: 16svh;
  margin-top: 0;
}
.join__ground-rim {
  stroke: #9a979e;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

@media (max-width: 767px) {
  .join__scene {
    grid-template-columns: 1fr;
    gap: 0;
    height: 88svh;
    padding: 8svh 1rem 0;
  }
  .join__copy { order: -1; padding-bottom: 2rem; }
  .join__tag { width: 9rem; }
  .join__title { font-size: 2.6rem; background-size: 14rem auto; }
  .join__text { font-size: 0.8rem; margin-top: 1rem; }
  .join__cta { margin: 3.5rem 0 0 2.5rem; }
  .join__btn-face { padding: 1.1rem 1.5rem 1.1rem 1.3rem; gap: 0.6rem; background-size: 12rem auto; }
  .join__btn-label { font-size: 1.35rem; }
  .join__btn-icon { width: 1.4rem; height: 1.4rem; }
    .join__mammoth { width: 82vw; margin-bottom: -3.8svh; }
  .join__ground { height: 12svh; }
  .join__dust { height: calc(100% + 12svh); } /* до низа земли на телефоне, не ниже — иначе чёрная полоса под землёй */
}

@media (prefers-reduced-motion: reduce) {
  .js .join__mammoth { visibility: visible; }
  .js [data-join-reveal] { opacity: 1; }
}