/* Анимация сайта. Значения — из скиллов Эмиля Ковальски (animate, find-animation-opportunities),
   а не из токенов системы: анимацию в системе пока не прорабатывали (решение пользователя 2026-09-26).
   Библиотек нет — только CSS и js/site.js.
   Кто отключил анимацию в системе (prefers-reduced-motion) — видит только мягкое проявление, без движения. */

:root {
  --motion-curve: cubic-bezier(0.23, 1, 0.32, 1); /* быстрый старт, мягкая остановка */
  --motion-press: 160ms;       /* отклик на нажатие */
  --motion-menu-in: 200ms;     /* меню открывается */
  --motion-menu-out: 150ms;    /* меню закрывается — быстрее, чем открывается */
  --motion-disclosure: 250ms;  /* раскрытие ответа в FAQ */
  --motion-enter: 400ms;       /* появление карточек при прокрутке */
  --motion-stagger: 50ms;      /* шаг между карточками */
  --motion-press-scale: 0.97;  /* насколько сжимается нажатая кнопка */
  --motion-pop-scale: 0.97;    /* из какого размера вырастает меню */
  --reveal-i: 0;               /* номер карточки в сетке; у каждой карточки его ставит js/site.js */
  --motion-drawer-curve: cubic-bezier(0.32, 0.72, 0, 1); /* «шторка» (скилл: --ease-drawer) */
  --motion-drawer-in: 300ms;   /* панель записи выезжает */
  --motion-drawer-out: 200ms;  /* и уезжает — быстрее */
  interpolate-size: allow-keywords; /* разрешает плавную высоту «до auto» для FAQ */
}

/* ---------- 1. FAQ: ответ плавно раскрывается ---------- */
/* Браузер без поддержки ::details-content откроет ответ мгновенно, как раньше */
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size var(--motion-disclosure) var(--motion-curve),
    opacity var(--motion-disclosure) var(--motion-curve),
    content-visibility var(--motion-disclosure) allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content {
    transition:
      opacity var(--motion-disclosure) var(--motion-curve),
      content-visibility var(--motion-disclosure) allow-discrete;
  }
}

/* ---------- 2–3. Кнопки и карточки причин визита: лёгкое сжатие при нажатии ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform var(--motion-press) var(--motion-curve);
  }

  .reason {
    transition:
      border-color var(--duration-base) var(--easing-standard),
      transform var(--motion-press) var(--motion-curve);
  }

  .btn:active,
  .reason:active {
    transform: scale(var(--motion-press-scale));
  }
}

/* ---------- 4. Меню на планшете и телефоне: вырастает от кнопки «Menu» ---------- */
@media (max-width: 1279px) {
  .nav {
    opacity: 0;
    transform-origin: top right; /* кнопка «Menu» — справа сверху */
    transition:
      opacity var(--motion-menu-out) var(--motion-curve),
      transform var(--motion-menu-out) var(--motion-curve),
      display var(--motion-menu-out) allow-discrete;
  }

  .is-menu-open .nav {
    opacity: 1;
    transition-duration: var(--motion-menu-in);
  }

  @starting-style {
    .is-menu-open .nav {
      opacity: 0;
    }
  }
}

@media (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .nav {
    transform: scale(var(--motion-pop-scale));
  }

  .is-menu-open .nav {
    transform: none;
  }

  @starting-style {
    .is-menu-open .nav {
      transform: scale(var(--motion-pop-scale));
    }
  }
}

/* ---------- 5. Плавная прокрутка к разделу по ссылке из меню ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- 6. Сетки карточек: карточки по очереди проявляются при прокрутке ---------- */
/* Класс has-reveal ставит js/site.js. Без скрипта карточки видны сразу.
   Номер карточки (--reveal-i) тоже ставит скрипт — отсюда задержка по очереди. */
.has-reveal :is(.why__grid, .services__grid, .visit__steps, .doctors__grid):not(.is-revealed) > * {
  opacity: 0;
}

.has-reveal .is-revealed > * {
  animation: reveal-fade var(--motion-enter) var(--motion-curve) both;
  animation-delay: calc(var(--reveal-i) * var(--motion-stagger));
}

@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-revealed > * {
    animation-name: reveal-rise;
  }
}

@keyframes reveal-fade {
  from { opacity: 0; }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-8));
  }
}

/* ---------- 7. Панель записи: выезжает справа, фон затемняется ---------- */
/* Без движения (prefers-reduced-motion) — только проявление */
.drawer,
.drawer::backdrop {
  opacity: 0;
  transition:
    opacity var(--motion-drawer-out) var(--motion-curve),
    transform var(--motion-drawer-out) var(--motion-drawer-curve),
    overlay var(--motion-drawer-out) allow-discrete,
    display var(--motion-drawer-out) allow-discrete;
}

.drawer[open],
.drawer[open]::backdrop {
  opacity: 1;
  transition-duration: var(--motion-drawer-in);
}

@starting-style {
  .drawer[open],
  .drawer[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .drawer {
    opacity: 1;
    transform: translateX(100%);
  }

  .drawer[open] {
    transform: none;
  }

  @starting-style {
    .drawer[open] {
      opacity: 1;
      transform: translateX(100%);
    }
  }
}