@charset "UTF-8";
/* Общие стили всех страниц: шрифты, токены, база, раскладка и компоненты, которые есть на каждой странице.
   Стили остальных компонентов, секций и страниц — отдельными файлами в css/components, css/sections, css/pages. */
/* Onest — вариативный (100–900), полный набор символов, OFL. Источник: google/fonts, ofl/onest/Onest[wght].ttf → woff2.
   TT Bluescreens — лицензию на прод проверить (в макете trial). */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-variable.woff2") format("woff2");
}
@font-face {
  font-family: "TT Bluescreens";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tt-bluescreens-extrabold.woff2") format("woff2");
}
/* Токены темы (Figma: Core KIT 4156:10081). Единственный источник цветов, шрифтов, радиусов. */
:root {
  /* Светлые */
  --color-white: #ffffff;
  --color-white-60: rgb(255 255 255 / 60%);
  --color-white-40: rgb(255 255 255 / 40%);
  --color-white-30: rgb(255 255 255 / 30%);
  --color-white-20: rgb(255 255 255 / 20%);
  --color-white-8: rgb(255 255 255 / 8%);
  --color-white-4: rgb(255 255 255 / 4%);
  --color-gray: #f0edec;
  --color-gray-light: #f7f6f5;
  /* Тёмные */
  --color-black: #181818;
  --color-black-90: rgb(24 24 24 / 90%);
  --color-black-60: rgb(24 24 24 / 60%);
  --color-black-40: rgb(24 24 24 / 40%);
  --color-black-20: rgb(24 24 24 / 20%);
  --color-black-8: rgb(24 24 24 / 8%);
  --color-black-bg: #1e1e1e;
  --color-black-pale: #272727;
  /* Цветные */
  --color-blue: #0051ff;
  --color-green: #daff75;
  --color-green-dark: #8fb81c;
  --color-red: #d61500;
  /* Фон фотографий тренеров — градиент карточки тренера */
  --color-navy: #1a3048;
  --color-navy-0: rgb(30 52 76 / 0%);
  /* Шрифты */
  --font-heading: 'TT Bluescreens', 'Arial Narrow', sans-serif;
  --font-text: 'Onest', system-ui, sans-serif;
  /* Радиусы */
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-10: 0.625rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-20: 1.25rem;
  --radius-24: 1.5rem;
  --radius-28: 1.75rem;
  --radius-32: 2rem;
  --radius-pill: 100vmax;
  /* Эффекты */
  --blur: 0.625rem;
  --transition-duration: 0.3s;
  --transition-duration-fast: 0.2s;
  --transition-duration-slow: 0.4s;
  --transition-ease: ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Макет нарисован на 1440. Выше этой ширины 1rem = 1px макета × (ширина окна / 1440):
   вся вёрстка в rem растёт пропорционально. Второе объявление округляет вниз до целых px
   (браузеры без round() берут первое). +0.01px — поправка на погрешность float: без неё на ровно
   1440 выходит 15.999… → 15px. Округление вверх нельзя: на 1450–1480 даст 17px и горизонтальный скролл. */
html {
  font-size: 16px;
  /* место под полосу прокрутки резервируется всегда — страница и фиксированная шапка не прыгают,
     когда меню блокирует прокрутку */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
    font-size: round(down, 1.1111111111vw + 0.01px, 1px);
  }
}

/* Открыто меню сайта (класс ставит JS меню) или модальное окно (<dialog> через showModal — истории,
   просмотр фото) — страница под ним не прокручивается */
.is-menu-open,
html:has(dialog:modal) {
  overflow: hidden;
}

body {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  min-height: 100vh;
  color: var(--color-black);
  background-color: var(--color-gray-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 0.125rem solid var(--color-blue);
  outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Контейнер с полями страницы; сетка — колонки и gap по макету */
.container {
  padding-inline: 1.125rem;
}
@media (min-width: 768px) {
  .container {
    padding-inline: 1.25rem;
  }
}
@media (min-width: 1280px) {
  .container {
    padding-inline: 1.5rem;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0.875rem;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 1rem;
  }
}
@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* SVG-иконка из спрайта: <svg class="icon"><use href="…/sprite.svg#name"></use></svg>.
   Размер задаёт блок-родитель через микс, цвет — currentColor. */
.icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  color: inherit;
}

/* Кружок 28 с глифом (Figma: Mini move). Анимация глифа управляется снаружи переменной
   --icon-circle-hover (0 → 1): родитель ставит её на hover, сам кружок от родителя не зависит. */
.icon-circle {
  --_hover: var(--icon-circle-hover, 0);
  --_rotate-from: 0deg;
  --_rotate-to: 0deg;
  --_scale-to: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 50%;
}
.icon-circle__glyph {
  width: 0.5rem;
  height: 0.5rem;
  transform: rotate(calc(var(--_rotate-from) + var(--_hover) * (var(--_rotate-to) - var(--_rotate-from)))) scale(calc(1 + var(--_hover) * (var(--_scale-to) - 1)));
  transition: transform var(--transition-duration) var(--transition-ease);
}
.icon-circle__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.icon-circle--plus {
  --_rotate-to: 180deg;
  --_scale-to: 1.334;
}
.icon-circle--arrow {
  --_rotate-from: 45deg;
}
.icon-circle--x {
  --_rotate-to: 45deg;
  --_scale-to: 1.334;
}
.icon-circle--accent {
  color: var(--color-green);
}
.icon-circle--light {
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Кнопка-«пилюля» с кружком-иконкой справа (Figma: Button 4189:14146).
   Размеры 48 / 44 / 40 / 36, цвета green / white / black. На hover меняется только иконка. */
.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 3rem;
  padding: 0 0.625rem 0 1.5rem;
  white-space: nowrap;
  color: var(--color-black);
  background-color: var(--color-green);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
}
@media (hover: hover) {
  .button:hover {
    --icon-circle-hover: 1;
  }
}
.button:focus-visible {
  --icon-circle-hover: 1;
}
.button__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
}
.button--no-icon {
  padding-inline: 1.5rem;
}
.button--size-44 {
  height: 2.75rem;
  padding: 0 0.5rem 0 1.5rem;
}
.button--size-adaptive {
  height: 2.75rem;
  padding: 0 0.5rem 0 1.5rem;
}
@media (min-width: 768px) {
  .button--size-adaptive {
    height: 3rem;
    padding: 0 0.625rem 0 1.5rem;
  }
}
.button--size-40 {
  height: 2.5rem;
  padding: 0 0.375rem 0 1rem;
}
.button--size-40 .button__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.button--size-36 {
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.25rem 0 0.75rem;
}
.button--size-36 .button__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.button--size-adaptive.button--no-icon {
  padding-inline: 1.5rem;
}
.button--size-40.button--no-icon, .button--size-36.button--no-icon {
  padding-inline: 1rem;
}
.button__extra {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 768px) {
  .button__extra {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: inherit;
  }
}
.button--white {
  background-color: var(--color-white);
}
.button--black {
  color: var(--color-white);
  background-color: var(--color-black);
}
.button:disabled, .button--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Кнопка меню в шапке: 4 точки + «Меню» ↔ 2 точки + «Закрыть» (Figma: menu_bt 4189:14524).
   Телефон: 44, в закрытом виде без подписи; с md — 40. Открытое состояние — --open (ставит JS).
   До xl точки сразу зелёные (в шапках 390/768 стоит вариант Hover — наведения на тач-экранах нет),
   с xl — серые, зелёные по наведению. */
.menu-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.75rem;
  white-space: nowrap;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: var(--radius-4);
  cursor: pointer;
  user-select: none;
}
@media (min-width: 768px) {
  .menu-toggle {
    height: 2.5rem;
  }
}
.menu-toggle__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
}
.menu-toggle__text--closed {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 768px) {
  .menu-toggle__text--closed {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
  }
}
.menu-toggle__text--open {
  display: none;
}
.menu-toggle__icon {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.menu-toggle__dot {
  position: absolute;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--color-green);
  border-radius: 50%;
  transition: background-color var(--transition-duration) ease-out, transform var(--transition-duration) ease-out;
}
@media (min-width: 1280px) {
  .menu-toggle__dot {
    background-color: var(--color-white-20);
  }
}
.menu-toggle__dot:nth-child(1) {
  top: 0;
  left: 0;
}
.menu-toggle__dot:nth-child(2) {
  top: 0;
  right: 0;
}
.menu-toggle__dot:nth-child(3) {
  bottom: 0;
  left: 0;
}
.menu-toggle__dot:nth-child(4) {
  right: 0;
  bottom: 0;
}
@media (hover: hover) {
  .menu-toggle:hover .menu-toggle__dot {
    background-color: var(--color-green);
  }
}
.menu-toggle:focus-visible .menu-toggle__dot {
  background-color: var(--color-green);
}
.menu-toggle--open .menu-toggle__dot {
  background-color: var(--color-green);
}
.menu-toggle--open .menu-toggle__dot:nth-child(-n+2) {
  transform: translateY(0.3125rem);
}
.menu-toggle--open .menu-toggle__dot:nth-child(n+3) {
  transform: translateY(-0.3125rem);
}
.menu-toggle--open .menu-toggle__text--closed {
  display: none;
}
.menu-toggle--open .menu-toggle__text--open {
  display: inline;
}

/* Ссылка меню (Figma: 1440/Menu button 4207:10627, 768-390/Menu button 4655:16614).
   Строка 40, с xl — 32. Внешняя — со стрелкой ↗ 20. --muted — контакты и соцсети (40%).
   --inverse — на тёмном фоне (подвал, Figma 4223:12941): белая T2, с xl — T3 и 40%; стрелка 40%; hover — зелёный.
   --accent — зелёная T3 на тёмном фоне, строка 32 (главная, «Страница тренера»); hover — белая (нет в макете). */
.menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.5rem;
  color: var(--color-black-bg);
  transition: color var(--transition-duration-fast) linear;
}
@media (min-width: 1280px) {
  .menu-link {
    min-height: 2rem;
  }
}
@media (hover: hover) {
  .menu-link:hover {
    color: var(--color-green-dark);
  }
}
.menu-link:focus-visible {
  color: var(--color-green-dark);
}
.menu-link__text {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .menu-link__text {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.menu-link__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
}
.menu-link__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.menu-link__arrow {
  width: 0.5rem;
  height: 0.5rem;
}
.menu-link--muted {
  color: var(--color-black-40);
}
.menu-link--inverse {
  color: var(--color-white);
}
@media (min-width: 1280px) {
  .menu-link--inverse {
    color: var(--color-white-40);
  }
}
@media (hover: hover) {
  .menu-link--inverse:hover {
    color: var(--color-green);
  }
  .menu-link--inverse:hover .menu-link__icon {
    color: inherit;
  }
}
.menu-link--inverse:focus-visible {
  color: var(--color-green);
}
.menu-link--inverse:focus-visible .menu-link__icon {
  color: inherit;
}
@media (min-width: 1280px) {
  .menu-link--inverse .menu-link__text {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}
.menu-link--inverse .menu-link__icon {
  color: var(--color-white-40);
  transition: color var(--transition-duration-fast) linear;
}
.menu-link--accent {
  min-height: 2rem;
  color: var(--color-green);
}
@media (hover: hover) {
  .menu-link--accent:hover {
    color: var(--color-white);
  }
}
.menu-link--accent:focus-visible {
  color: var(--color-white);
}
.menu-link--accent .menu-link__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Кнопка бронирования с иконкой 26 (Figma: Booking_bt 4192:14967, Menu ico 4189:14782).
   Размеры 40 (по умолчанию) и 48. На hover иконка зацикленно анимируется — анимации по прототипу:
   мяч — новый мяч падает сверху, корт — мяч пересекает поле по диагонали, ракетка — качается ±30°.
   Ширина по содержимому; растягивает кнопку родитель миксом. */
.booking-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.375rem 0 0.75rem;
  text-align: left;
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-4);
  cursor: pointer;
  user-select: none;
}
.booking-button__text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  flex: 1 1 auto;
  white-space: nowrap;
}
.booking-button__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  overflow: hidden;
  background-color: var(--color-black-pale);
  border-radius: var(--radius-2);
}
.booking-button__icon--court {
  background-color: var(--color-blue);
}
.booking-button__part, .booking-button__court {
  position: absolute;
  display: block;
}
.booking-button__part--ball-first, .booking-button__part--ball-second {
  inset: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
}
.booking-button__part--ball-second {
  transform: translateY(-115%);
}
.booking-button__court {
  inset: 0;
  width: 2rem;
  height: 2.25rem;
  margin: auto;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.5;
}
.booking-button__part--court-ball {
  top: -0.5rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
}
.booking-button__part--racket {
  top: 11.54%;
  left: 11.54%;
  width: 1.25rem;
  transform-origin: 50% 100%;
}
.booking-button__ball-fill {
  fill: var(--color-green);
}
.booking-button__ball-seam, .booking-button__racket-fill {
  fill: var(--color-white);
}
.booking-button__racket-holes {
  fill: var(--color-black-pale);
}
@media (hover: hover) {
  .booking-button:hover .booking-button__part--ball-first,
  .booking-button:hover .booking-button__part--ball-second {
    animation: booking-button-ball 1.5s ease-out infinite;
  }
  .booking-button:hover .booking-button__part--court-ball {
    animation: booking-button-court 1.1s ease-out infinite;
  }
  .booking-button:hover .booking-button__part--racket {
    animation: booking-button-racket 1.7s ease-out infinite;
  }
}
.booking-button:focus-visible .booking-button__part--ball-first,
.booking-button:focus-visible .booking-button__part--ball-second {
  animation: booking-button-ball 1.5s ease-out infinite;
}
.booking-button:focus-visible .booking-button__part--court-ball {
  animation: booking-button-court 1.1s ease-out infinite;
}
.booking-button:focus-visible .booking-button__part--racket {
  animation: booking-button-racket 1.7s ease-out infinite;
}
.booking-button--size-48 {
  height: 3rem;
  padding: 0 0.625rem 0 1.25rem;
  border-radius: var(--radius-12);
}
.booking-button--size-48 .booking-button__text {
  min-width: 6.75rem;
}

/* Мячи сдвигаются на одну «ячейку» вниз: первый уходит за нижний край, второй встаёт на его место.
   Конец цикла неотличим от начала, поэтому повтор без скачка. */
@keyframes booking-button-ball {
  0% {
    translate: 0 0;
  }
  20%, 100% {
    translate: 0 115%;
  }
}
@keyframes booking-button-court {
  0% {
    translate: 0 0;
  }
  30%, 100% {
    translate: 1.125rem 2.125rem;
  }
}
@keyframes booking-button-racket {
  0% {
    rotate: 0deg;
  }
  18% {
    rotate: -30deg;
  }
  36% {
    rotate: 30deg;
  }
  54%, 100% {
    rotate: 0deg;
  }
}
/* Меню бронирования (Figma: Booking_group 4199:7550). Пункты в закрытом виде лежат стопкой под главной
   кнопкой и выезжают вниз с шагом 4; --up — вверх (плашка у нижнего края экрана). --open ставит JS.
   Шаг 4 — внутренний отступ списка, а не зазор: иначе курсор, переходя к пунктам, покидал бы блок
   и hover-меню закрывалось. Номер пункта (--i, с 1) проставляет PHP — пунктов может быть сколько угодно. */
.booking-menu {
  position: relative;
  width: 10rem;
}
.booking-menu__toggle {
  position: relative;
  z-index: 2;
  width: 100%;
}
.booking-menu__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding-top: 0.25rem;
  pointer-events: none;
}
.booking-menu__item {
  visibility: hidden;
  transform: translateY(calc((-100% - 0.25rem) * var(--i, 1)));
  transition: transform var(--transition-duration) ease-out, visibility 0s var(--transition-duration);
}
.booking-menu__button {
  width: 100%;
}
.booking-menu--open .booking-menu__list {
  pointer-events: auto;
}
.booking-menu--open .booking-menu__item {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.booking-menu--up .booking-menu__list {
  top: auto;
  bottom: 100%;
  flex-direction: column-reverse;
  padding-top: 0;
  padding-bottom: 0.25rem;
}
.booking-menu--up .booking-menu__item {
  transform: translateY(calc((100% + 0.25rem) * var(--i, 1)));
}
.booking-menu--up.booking-menu--open .booking-menu__item {
  transform: none;
}
.booking-menu--size-48 {
  width: max-content;
}

/* Росчерк с мячом (Figma: ball_animation 4657:17404). Анимация перенесена с лоадера лендинга как есть: цикл 2.5 с —
   1.8 с движения и пауза. Кривые Figma (у штриха одновременно меняются длина и сдвиг) просэмплированы
   в кадры через 2 %. Цвет — currentColor, по умолчанию зелёный; размер задаёт родитель (пропорции 155 × 26). */
.scribble {
  display: block;
  width: 9.75rem;
  height: auto;
  overflow: visible;
  color: var(--color-green);
}
.scribble__line {
  animation: scribble-line 2.5s linear infinite;
}
.scribble__ball {
  transform-box: fill-box;
  transform-origin: center;
  animation: scribble-ball-fade 2.5s linear infinite, scribble-ball-pop 2.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scribble__line {
    animation: none;
  }
  .scribble__ball {
    animation: none;
  }
}

@keyframes scribble-line {
  0% {
    visibility: hidden;
    stroke-dasharray: 0 1;
    stroke-dashoffset: 0;
  }
  2% {
    visibility: visible;
    stroke-dasharray: 0.0174 1;
    stroke-dashoffset: 0;
  }
  4% {
    stroke-dasharray: 0.0456 1;
    stroke-dashoffset: 0;
  }
  6% {
    stroke-dasharray: 0.0854 1;
    stroke-dashoffset: 0;
  }
  8% {
    stroke-dasharray: 0.1369 1;
    stroke-dashoffset: 0;
  }
  10% {
    stroke-dasharray: 0.1984 1;
    stroke-dashoffset: 0;
  }
  12% {
    stroke-dasharray: 0.2669 1;
    stroke-dashoffset: 0;
  }
  14% {
    stroke-dasharray: 0.3192 1;
    stroke-dashoffset: -0.019;
  }
  16% {
    stroke-dasharray: 0.3583 1;
    stroke-dashoffset: -0.0502;
  }
  18% {
    stroke-dasharray: 0.3807 1;
    stroke-dashoffset: -0.0948;
  }
  20% {
    stroke-dasharray: 0.3851 1;
    stroke-dashoffset: -0.1524;
  }
  22% {
    stroke-dasharray: 0.3735 1;
    stroke-dashoffset: -0.2207;
  }
  24% {
    stroke-dasharray: 0.3501 1;
    stroke-dashoffset: -0.2952;
  }
  26% {
    stroke-dasharray: 0.3201 1;
    stroke-dashoffset: -0.3713;
  }
  28% {
    stroke-dasharray: 0.2878 1;
    stroke-dashoffset: -0.4448;
  }
  30% {
    stroke-dasharray: 0.2562 1;
    stroke-dashoffset: -0.5133;
  }
  32% {
    stroke-dasharray: 0.2265 1;
    stroke-dashoffset: -0.5759;
  }
  34% {
    stroke-dasharray: 0.1995 1;
    stroke-dashoffset: -0.6322;
  }
  36% {
    stroke-dasharray: 0.1753 1;
    stroke-dashoffset: -0.6825;
  }
  38% {
    stroke-dasharray: 0.1536 1;
    stroke-dashoffset: -0.7274;
  }
  40% {
    stroke-dasharray: 0.1342 1;
    stroke-dashoffset: -0.7672;
  }
  42% {
    stroke-dasharray: 0.1169 1;
    stroke-dashoffset: -0.8024;
  }
  44% {
    stroke-dasharray: 0.1015 1;
    stroke-dashoffset: -0.8336;
  }
  46% {
    stroke-dasharray: 0.0877 1;
    stroke-dashoffset: -0.8611;
  }
  48% {
    stroke-dasharray: 0.0752 1;
    stroke-dashoffset: -0.8852;
  }
  50% {
    stroke-dasharray: 0.064 1;
    stroke-dashoffset: -0.9064;
  }
  52% {
    stroke-dasharray: 0.0539 1;
    stroke-dashoffset: -0.9248;
  }
  54% {
    stroke-dasharray: 0.0448 1;
    stroke-dashoffset: -0.9408;
  }
  56% {
    stroke-dasharray: 0.0365 1;
    stroke-dashoffset: -0.9544;
  }
  58% {
    stroke-dasharray: 0.029 1;
    stroke-dashoffset: -0.966;
  }
  60% {
    stroke-dasharray: 0.0222 1;
    stroke-dashoffset: -0.9756;
  }
  62% {
    stroke-dasharray: 0.016 1;
    stroke-dashoffset: -0.9835;
  }
  64% {
    stroke-dasharray: 0.0103 1;
    stroke-dashoffset: -0.9897;
  }
  66% {
    stroke-dasharray: 0.0057 1;
    stroke-dashoffset: -0.9943;
  }
  68% {
    stroke-dasharray: 0.0025 1;
    stroke-dashoffset: -0.9975;
  }
  70% {
    visibility: visible;
    stroke-dasharray: 0.0006 1;
    stroke-dashoffset: -0.9994;
  }
  72%, 100% {
    visibility: hidden;
    stroke-dasharray: 0 1;
    stroke-dashoffset: -1;
  }
}
@keyframes scribble-ball-fade {
  0%, 48% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  56%, 100% {
    opacity: 1;
  }
}
@keyframes scribble-ball-pop {
  0%, 48% {
    transform: scale(0.3);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  60% {
    transform: scale(1.15);
  }
  61.6% {
    transform: scale(1.009);
  }
  62.4% {
    transform: scale(0.986);
  }
  64% {
    transform: scale(0.998);
  }
  65.6% {
    transform: scale(1.001);
  }
  68%, 100% {
    transform: scale(1);
  }
}
/* Шапка сайта (Figma: 390/Header 4680:25316, 768/Header 4544:72874, 1440/Header 4199:7695).
   Фиксирована и лежит поверх меню. Сама полоса не перехватывает клики — только логотип и кнопки.
   Логотип: телефон — mini 72×44, md — 114, xl — 108. Бронирование в шапке — с md. */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .header {
    padding: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .header {
    padding: 1.75rem;
  }
}
.header__logo, .header__controls {
  pointer-events: auto;
}
.header__logo {
  display: block;
  flex-shrink: 0;
  border-radius: var(--radius-4);
}
.header__logo-image {
  display: block;
  width: 4.5rem;
  height: 2.75rem;
}
@media (min-width: 768px) {
  .header__logo-image {
    width: 7.125rem;
    height: 7.125rem;
  }
}
@media (min-width: 1280px) {
  .header__logo-image {
    width: 6.75rem;
    height: 6.75rem;
  }
}
.header__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
}
.header__booking {
  display: none;
}
@media (min-width: 768px) {
  .header__booking {
    display: block;
  }
}

/* Меню сайта (Figma: 390/Меню 4687:29673, 768/Меню 4540:64807, 1440/Меню 4540:63964).
   Шапка остаётся поверх меню, поэтому у панели сверху отступ под неё.
   Телефон — на весь экран, внизу липкая плашка бронирования.
   md — панель на всю ширину с полями 12, высота по контенту, затемнение страницы; видео рядом с логотипом.
   xl — панель 702 справа на всю высоту (поля 14). Панель выезжает справа; открытое состояние — --open (JS). */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  transition: visibility 0s var(--transition-duration);
}
.menu__overlay {
  display: none;
}
@media (min-width: 768px) {
  .menu__overlay {
    position: absolute;
    inset: 0;
    display: block;
    background-color: var(--color-black-40);
    backdrop-filter: blur(1rem);
    opacity: 0;
    transition: opacity var(--transition-duration) ease-out;
  }
}
.menu__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: 4.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.menu__panel::-webkit-scrollbar {
  display: none;
}
.menu__panel {
  background-color: var(--color-gray);
  transform: translateX(100%);
  transition: transform var(--transition-duration) ease-out;
}
@media (min-width: 768px) {
  .menu__panel {
    inset: 0.75rem 0.75rem auto;
    max-height: calc(100dvh - 1.5rem);
    padding-top: 9.125rem;
    border-radius: var(--radius-16);
    transform: translateX(calc(100% + 0.75rem));
  }
}
@media (min-width: 1280px) {
  .menu__panel {
    inset: 0.875rem 0.875rem 0.875rem auto;
    justify-content: space-between;
    width: 43.875rem;
    max-height: none;
    padding-top: 0;
    transform: translateX(calc(100% + 0.875rem));
  }
}
.menu--open {
  visibility: visible;
  transition-delay: 0s;
}
.menu--open .menu__overlay {
  opacity: 1;
}
.menu--open .menu__panel {
  transform: none;
}
.menu__top {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 0.875rem 1.25rem;
}
@media (min-width: 768px) {
  .menu__top {
    display: block;
    padding: 1.25rem;
  }
}
@media (min-width: 1280px) {
  .menu__top {
    display: flex;
    align-items: flex-end;
    padding: 0;
  }
}
.menu__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .menu__main {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }
}
@media (min-width: 1280px) {
  .menu__main {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.25rem;
  }
}
.menu__big-link {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 4rem;
  line-height: 0.85;
}
@media (min-width: 768px) {
  .menu__big-link {
    font-size: 5.5rem;
    line-height: 0.86;
  }
}
@media (min-width: 1280px) {
  .menu__big-link {
    font-size: 7.5rem;
    line-height: 0.85;
  }
}
.menu__big-link {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 3.5rem;
  color: transparent;
  background-image: radial-gradient(closest-side, var(--color-green) 98%, transparent), linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-position: 50% 150%, 0 0;
  background-size: 130% 300%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position var(--transition-duration-slow) ease-out;
}
@media (min-width: 768px) {
  .menu__big-link {
    height: auto;
  }
}
@media (min-width: 1280px) {
  .menu__big-link {
    height: 5.25rem;
  }
}
@media (hover: hover) {
  .menu__big-link:hover {
    background-position: 50% 50%, 0 0;
  }
}
.menu__big-link:focus-visible {
  background-position: 50% 50%, 0 0;
}
.menu__video {
  flex-shrink: 0;
  width: 5.375rem;
  overflow: hidden;
  background-color: var(--color-black-8);
  border-radius: var(--radius-8);
}
@media (min-width: 768px) {
  .menu__video {
    position: absolute;
    top: 0.625rem;
    left: 8.25rem;
    width: 7.125rem;
    height: 7.125rem;
  }
}
@media (min-width: 1280px) {
  .menu__video {
    position: static;
    width: 6.75rem;
    height: 6.75rem;
    margin: 1.25rem;
  }
}
.menu__video-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
}
@media (min-width: 768px) {
  .menu__row {
    flex-direction: row;
    align-items: flex-start;
    padding: 1rem 1.25rem;
  }
}
.menu__row--contacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 768px) {
  .menu__row--contacts {
    grid-template-columns: 14.125rem minmax(0, 1fr);
    align-items: end;
    column-gap: 0.5rem;
  }
}
@media (min-width: 1280px) {
  .menu__row--contacts {
    grid-template-columns: 12.75rem minmax(0, 1fr);
  }
}
.menu__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 2.5rem;
}
@media (min-width: 768px) {
  .menu__label {
    width: 14.125rem;
  }
}
@media (min-width: 1280px) {
  .menu__label {
    width: 12.75rem;
    min-height: 2rem;
  }
}
.menu__label--caption {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .menu__label--caption {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.menu__label--caption {
  opacity: 0.3;
}
.menu__list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.menu__list--split {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  column-gap: 0.375rem;
  justify-items: start;
}
@media (min-width: 768px) {
  .menu__list--split {
    display: flex;
  }
}
.menu__contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.375rem;
}
@media (min-width: 768px) {
  .menu__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
.menu__socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  order: -1;
}
@media (min-width: 768px) {
  .menu__socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.5rem;
    order: 0;
  }
}
.menu__booking {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 2rem 0.875rem 3rem;
  background-image: linear-gradient(to bottom, transparent, var(--color-gray-light));
  backdrop-filter: blur(0.5rem);
}
@media (min-width: 768px) {
  .menu__booking {
    display: none;
  }
}

/* Подвал сайта (Figma: 390/Footer 4658:19125, 768/Footer 4658:18730, 1440/Footer 4223:12941).
   Сверху фон с halftone-фото (240 / 400) и знаком «RCC Padel ©», на него наезжает тёмная панель на величину скругления.
   Панель — одна сетка с именованными областями, по брейкпоинтам меняется только расстановка:
   телефон — 2 колонки; md — 3 колонки, «PADEL» на всю ширину; xl — «PADEL» слева, меню в колонке 456 справа. */
.footer__hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 15rem;
  overflow: hidden;
  background-color: var(--color-black);
}
@media (min-width: 768px) {
  .footer__hero {
    height: 25rem;
  }
}
.footer__media {
  position: absolute;
  inset: 0;
}
.footer__picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer__logo {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.5rem;
  line-height: 0.94;
  color: var(--color-green);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__logo {
    font-size: 4rem;
  }
}
@media (min-width: 1280px) {
  .footer__logo {
    margin-top: -2.5rem;
  }
}
.footer__logo-mark {
  position: absolute;
  top: -0.34em;
  right: -0.53em;
}
.footer__panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "about locations" "scribble scribble" "contacts-head contacts-head" "socials contacts" "top top" "padel padel" "legal legal" "copyright copyright";
  column-gap: 0.375rem;
  align-items: start;
  margin-top: -1.5rem;
  padding: 1.25rem 0.875rem;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: var(--radius-24) var(--radius-24) 0 0;
}
@media (min-width: 768px) {
  .footer__panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "about locations scribble" "contacts-head contacts-head contacts-head" "socials contacts top" "padel padel padel" "legal legal copyright";
    column-gap: 0.5rem;
    margin-top: -1.75rem;
    padding: 1.375rem 1.375rem 1.5rem;
    border-radius: var(--radius-28) var(--radius-28) 0 0;
  }
}
@media (min-width: 1280px) {
  .footer__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14rem 14rem;
    grid-template-areas: "padel padel about locations" "padel padel contacts-head scribble" "padel padel socials contacts" "legal legal copyright top";
    margin-top: -2rem;
    padding: 1.75rem 1.75rem 1.25rem;
    border-radius: var(--radius-32) var(--radius-32) 0 0;
  }
}
.footer__column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .footer__column {
    gap: 0.75rem;
    padding-bottom: 2rem;
  }
}
@media (min-width: 1280px) {
  .footer__column {
    padding-bottom: 3rem;
  }
}
.footer__column--about {
  grid-area: about;
}
.footer__column--locations {
  grid-area: locations;
}
.footer__head {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .footer__head {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.footer__head {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 2rem;
  color: var(--color-white-40);
}
@media (min-width: 1280px) {
  .footer__head {
    color: var(--color-white-60);
  }
}
.footer__head--contacts {
  grid-area: contacts-head;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .footer__head--contacts {
    margin-bottom: 0.75rem;
  }
}
.footer__list {
  display: flex;
  flex-direction: column;
}
.footer__list--socials {
  grid-area: socials;
}
.footer__list--contacts {
  grid-area: contacts;
}
@media (min-width: 1280px) {
  .footer__list--contacts {
    align-self: end;
    padding-block: 0.25rem;
  }
}
.footer__scribble {
  grid-area: scribble;
  width: 9rem;
  margin-block: 1.5rem 2.75rem;
}
@media (min-width: 768px) {
  .footer__scribble {
    width: 9.75rem;
    margin-block: 0;
  }
}
.footer__contact, .footer__legal, .footer__copyright, .footer__top {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 2.5rem;
}
@media (min-width: 1280px) {
  .footer__contact, .footer__legal, .footer__copyright, .footer__top {
    min-height: 2rem;
  }
}
@media (min-width: 1280px) {
  .footer__contact {
    min-height: 1.5rem;
  }
}
.footer__contact, .footer__legal, .footer__top {
  transition: color var(--transition-duration-fast) linear;
}
@media (hover: hover) {
  .footer__contact:hover, .footer__legal:hover, .footer__top:hover {
    color: var(--color-green);
  }
}
.footer__contact:focus-visible, .footer__legal:focus-visible, .footer__top:focus-visible {
  color: var(--color-green);
}
.footer__top {
  grid-area: top;
  justify-self: end;
  color: var(--color-white);
}
.footer__top-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.footer__padel {
  grid-area: padel;
  width: 100%;
  height: auto;
  aspect-ratio: 893.94/408;
  margin-block: 0.875rem;
  color: var(--color-white-4);
}
@media (min-width: 768px) {
  .footer__padel {
    margin-block: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .footer__padel {
    max-width: 55.875rem;
    margin-block: 0.5rem 0;
  }
}
.footer__legal, .footer__copyright {
  color: var(--color-white-20);
}
.footer__legal-list {
  grid-area: legal;
  display: grid;
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  .footer__legal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    margin-top: 0;
  }
}
@media (min-width: 1280px) {
  .footer__legal-list {
    column-gap: 1rem;
  }
}
@media (min-width: 1280px) {
  .footer__legal-list, .footer__copyright, .footer__top {
    margin-top: 3rem;
  }
}
.footer__copyright {
  grid-area: copyright;
  justify-self: end;
}
@media (min-width: 768px) {
  .footer__copyright {
    justify-self: start;
  }
}