@charset "UTF-8";
/* «Записаться»: тёмный блок 640 / 768 / 800 с разметкой корта (линии 20% белого: края по полям, на xl — 10% ширины,
   центр и горизонталь посередине), фото 268×360 / 380×480 / 460×580 по центру, надпись Line и подпись T1.
   На xl надпись по центру блока, подпись — на 50 ниже неё.
   Мячи (Figma: Buy_bt, Hover=Yes, Smart Animate 0.8 с): копия надписи поверх с двумя мячами фоном,
   обрезанными по буквам (background-clip: text); по наведению мячи заезжают сверху и закрывают буквы целиком.
   В макете мячи при этом поворачиваются (−31° и 60°) — фон не вращается, поэтому SVG мячей уже повёрнуты.
   Позиции — в em от кегля надписи (мяч 652.8 / 200 = 3.264em), поэтому одни на любом размере. */
.coach-signup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rem;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-black);
}
@media (min-width: 768px) {
  .coach-signup {
    height: 48rem;
  }
}
@media (min-width: 1280px) {
  .coach-signup {
    height: 50rem;
  }
}
.coach-signup__lines {
  position: absolute;
  inset-block: 0;
  border-inline: 1px solid var(--color-white-20);
  inset-inline: 0.875rem;
}
@media (min-width: 768px) {
  .coach-signup__lines {
    inset-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .coach-signup__lines {
    inset-inline: 1.75rem;
  }
}
@media (min-width: 1280px) {
  .coach-signup__lines {
    inset-inline: 10%;
  }
}
.coach-signup__lines::before, .coach-signup__lines::after {
  position: absolute;
  content: "";
  background-color: var(--color-white-20);
}
.coach-signup__lines::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.coach-signup__lines::after {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}
.coach-signup__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16.75rem;
  height: 22.5rem;
  object-fit: cover;
  border-radius: var(--radius-28);
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .coach-signup__image {
    width: 23.75rem;
    height: 30rem;
  }
}
@media (min-width: 1280px) {
  .coach-signup__image {
    width: 28.75rem;
    height: 36.25rem;
    border-radius: var(--radius-24);
  }
}
.coach-signup__button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  color: inherit;
  text-align: center;
}
@media (min-width: 768px) {
  .coach-signup__button {
    gap: 2rem;
  }
}
@media (min-width: 1280px) and (hover: hover) {
  .coach-signup__button:hover {
    --coach-signup-balls: -0.998em -1.36em, 1.603em -1.522em;
  }
}
@media (min-width: 1280px) {
  .coach-signup__button:focus-visible {
    --coach-signup-balls: -0.998em -1.36em, 1.603em -1.522em;
  }
}
.coach-signup__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 5rem;
  line-height: 0.85;
}
@media (min-width: 768px) {
  .coach-signup__title {
    font-size: 8.5rem;
  }
}
@media (min-width: 1280px) {
  .coach-signup__title {
    font-size: 12.5rem;
  }
}
.coach-signup__title {
  position: relative;
  color: var(--color-green);
}
@media (hover: hover) and (min-width: 1280px) {
  .coach-signup__title {
    color: var(--color-white);
  }
}
.coach-signup__balls {
  display: none;
}
@media (hover: hover) and (min-width: 1280px) {
  .coach-signup__balls {
    position: absolute;
    inset: 0;
    display: block;
    color: transparent;
    background-image: url("../../img/coach-detail/ball-1.svg"), url("../../img/coach-detail/ball-2.svg");
    background-repeat: no-repeat;
    background-position: var(--coach-signup-balls, -0.637em -3.232em, 1.603em -3.232em);
    background-size: 3.264em 3.264em;
    background-clip: text;
    transition: background-position 0.8s var(--transition-ease);
  }
}
.coach-signup__text {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .coach-signup__text {
    font-size: 1.125rem;
  }
}
.coach-signup__text {
  max-width: 19.125rem;
}
@media (min-width: 1280px) {
  .coach-signup__text {
    position: absolute;
    top: calc(100% + 3.125rem);
  }
}