/* =========================================================
   noumy.ai — блок 2 «Что вы получаете»:
   «Результаты сотен интервью за минуты»

   Размеры и отступы сняты с макета один в один (Figma,
   frame 29:2887 — десктоп 1440, frame 29:2918 — iPhone 393).

   Картинки лежат отдельно, в claude/benefits-images.css:
   там четыре webp в data-URI. Вынесены, чтобы не мешать
   читать вёрстку — это единственное, что там есть.
   ========================================================= */

.benefits {
  position: relative;
  background: var(--bg);
  /* цвет текста внутри блока в макете темнее общего --ink: #141414 */
  --benefit-ink: #141414;
}

.benefits__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* по макету контент начинается в 40px от края, как и в hero */
  padding: 80px 40px;
}

/* «/ Что вы получаете» — Inter Regular 20/1.3, трекинг -0.4px, синий */
.benefits__eyebrow {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Две колонки макета: слева заголовок, справа список — по три
   колонки шестиколоночной сетки, то есть ровно по половине
   (1360 = 668 + 24 + 668 на 1440, 1120 = 548 + 24 + 548 на 1200). */
.benefits__grid {
  display: grid;
  /* шесть колонок макета: слева 3, справа 3 — обе половины равны на
     всех десктопных ширинах (на 1440 это ровно 668 + 24 + 668) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 24px;
}

/* Заголовок: Inter Medium 64px, интерлиньяж 1.0, трекинг -2.56px */
.benefits__title {
  margin: 0;
  max-width: 518px;
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.benefits__list {
  margin: 0;
  max-width: 668px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 80px;          /* по макету между пунктами ровно 80 */
}

/* Пункт: картинка + текст, отступ 24px, выравнивание по верху */
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Картинка. Размер слота — из макета, у каждой свой; фон — в
   benefits-images.css. Внутри картинки фон уже залит цветом
   страницы (#E9E8E4), поэтому прямоугольник не виден и его
   можно спокойно двигать и наклонять при наведении. */
.benefit__pic {
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 50% 60%;
  /* 125 на 1440 и 110 на 1200 — ровно как в двух макетах, между ними
     ширина едет плавно; высоту держит aspect-ratio каждой картинки */
  width: clamp(110px, 8.68vw, 125px);
}

.benefit__pic--dialog { aspect-ratio: 125 / 102; }
.benefit__pic--report { aspect-ratio: 125 / 140; }
.benefit__pic--time   { aspect-ratio: 125 / 118; }
/* у четвёртой картинки рука вылезает за верх слота (в макете слот
   128×109, а сама картинка выше) — вычитаем разницу отрицательными
   полями, чтобы строка осталась той же высоты, что в макете */
.benefit__pic--setup  {
  width: clamp(110px, 8.89vw, 128px);
  aspect-ratio: 128 / 114;
  margin: -4px 0 -1px;
}

.benefit__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Подзаголовок: Inter Regular 40/1.03, трекинг -2px */
.benefit__h {
  margin: 0;
  font-size: 40px;
  line-height: 1.03;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--benefit-ink);
}

/* Текст: Inter Regular 20/1.3, трекинг -0.8px */
.benefit__p {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--benefit-ink);
}

/* ============================ ПОЯВЛЕНИЕ ============================
   Элементы с классом .reveal ждут своей очереди и выезжают снизу,
   когда попадают в кадр (класс .is-in ставит claude/benefits.js).
   Задержку внутри списка даём по порядку — пункты появляются
   один за другим, а не все разом. */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

.benefits__title.reveal { --d: 60ms; }
.benefit:nth-child(1) { --d: 0ms; }
.benefit:nth-child(2) { --d: 110ms; }
.benefit:nth-child(3) { --d: 220ms; }
.benefit:nth-child(4) { --d: 330ms; }

/* ============================ НАВЕДЕНИЕ ============================
   Наводим на ВЕСЬ пункт (текст + картинка) — шевелится картинка.
   Только там, где есть настоящий курсор: на тач-экранах :hover
   залипает после тапа. */

@media (hover: hover) {
  /* один проход на одно наведение: анимация снимается, когда курсор
     уходит с пункта, и запускается заново только при повторном
     наведении — цикл не повторяется, пока курсор стоит на месте */
  .benefit:hover .benefit__pic,
  .benefit:focus-within .benefit__pic {
    animation: benefitWiggle 1.15s ease-in-out 1 both;
  }
}

@keyframes benefitWiggle {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  22%  { transform: translate3d(-3px, -5px, 0) rotate(-2.4deg) scale(1.03); }
  48%  { transform: translate3d(3px, -2px, 0) rotate(2deg) scale(1.02); }
  74%  { transform: translate3d(-2px, -5px, 0) rotate(-1.2deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* ============================ АДАПТИВ ============================ */

@media (max-width: 1199px) {
  /* макет «от 1200 до 900»: половины больше не расходятся —
     заголовок встаёт над списком, список занимает всю ширину,
     между заголовком и пунктами по макету ровно 80px.
     На самой отметке 1200 ещё действует раскладка в две половины —
     она нарисована во фрейме шириной ровно 1200. */
  .benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 80px; }
  .benefits__title { max-width: none; }
  .benefits__list { max-width: none; }
}

@media (max-width: 900px) {
  .benefits__inner { padding: 50px 12px; }

  .benefits__eyebrow { margin-bottom: 24px; font-size: 16px; letter-spacing: -0.02em; }

  /* в макете iPhone заголовок 40px, тот же интерлиньяж и трекинг */
  .benefits__title { font-size: clamp(30px, 10.2vw, 40px); }

  .benefits__grid { gap: 64px; }

  .benefits__list { gap: 32px; }

  /* на мобильном картинка встаёт НАД текстом (как в макете) */
  .benefit { flex-direction: column; gap: 16px; }

  .benefit__pic { width: 80px; }
  .benefit__pic--setup  { width: 80px; margin: -2px 0 0; }

  .benefit__text { gap: 12px; }
  .benefit__h { font-size: 24px; letter-spacing: -0.03em; }
  .benefit__p { font-size: 16px; letter-spacing: -0.02em; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .benefit:hover .benefit__pic,
  .benefit:focus-within .benefit__pic { animation: none; }
}