/* pains.css — блок «Что закрываем»: карусель карточек поверх фона, где офисные
   предметы контуром (папка, документ, скрепка, конверт, калькулятор, чашка кофе,
   карандаш, диаграммы, монета-рубль, часы, стикер) летят из глубины к зрителю.
   Общие классы страницы (.section, .container, .eyebrow, .card, .pain, .reveal,
   .icon) живут в styles.css — здесь только новое, с префиксом .pains.
   Движение — только transform/opacity. pains.js ставит: .is-js/.is-visible
   (пауза предметов вне экрана), .is-ready (эффект карусели, стрелки, точки),
   .is-current и data-pos="-1|0|1" у слайдов. Без скрипта — обычная прокрутка,
   все карточки в полный размер. */

.pains-wrap {
  --pains-gap: 12px;                                   /* зазор между слайдами */
  --pains-side: 34px;                                  /* телефон: место под края соседей */
  --pains-w: calc(100% - 2 * var(--pains-side));       /* ширина слайда */
  --pains-gutter: clamp(1rem, 4.5vw, 2.5rem);          /* как поля у .container */
  isolation: isolate;
}
.pains-wrap > .container {
  position: relative;
  z-index: 1;
}

/* ---------- фон с предметами ---------- */
.pains__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
}
.pains__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Непрозрачность сидит в цвете линии (0,11–0,14) — текст карточек читается */
.pains__fly {
  position: absolute;
  display: block;
  height: auto;
  color: rgba(201, 169, 97, 0.14);                      /* латунь */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: pains-fly 16s cubic-bezier(0.4, 0.1, 0.75, 0.6) infinite;
}
.pains__fly:nth-child(even) { color: rgba(242, 239, 233, 0.11); }   /* светлый камень */
.pains__fly:nth-child(5n) { color: rgba(224, 201, 140, 0.13); }     /* светлая латунь */
.pains__fly--spin { animation-name: pains-spin; }
.pains__fly--spin-r { animation-name: pains-spin-r; }

/* место старта, размер, направление полёта (rotate), длительность, сдвиг по фазе */
.pains__fly:nth-child(1)  { left: 30%; top: 28%; width: 8rem;   rotate: 220deg; animation-duration: 21s; animation-delay: -6s; }
.pains__fly:nth-child(2)  { left: 64%; top: 18%; width: 4.5rem; rotate: 300deg; animation-duration: 14s; animation-delay: -3s; }
.pains__fly:nth-child(3)  { left: 14%; top: 60%; width: 3rem;   rotate: 160deg; animation-duration: 17s; animation-delay: -11s; }
.pains__fly:nth-child(4)  { left: 72%; top: 54%; width: 6rem;   rotate: 10deg;  animation-duration: 15s; animation-delay: -9s; }
.pains__fly:nth-child(5)  { left: 48%; top: 8%;  width: 3rem;   rotate: 265deg; animation-duration: 13s; animation-delay: -5s; }
.pains__fly:nth-child(6)  { left: 24%; top: 78%; width: 6rem;   rotate: 130deg; animation-duration: 19s; animation-delay: -13s; }
.pains__fly:nth-child(7)  { left: 58%; top: 72%; width: 8rem;   rotate: 60deg;  animation-duration: 16s; animation-delay: -4s; }
.pains__fly:nth-child(8)  { left: 86%; top: 28%; width: 4rem;   rotate: 335deg; animation-duration: 12s; animation-delay: -7s; }
.pains__fly:nth-child(9)  { left: 6%;  top: 16%; width: 5rem;   rotate: 215deg; animation-duration: 18s; animation-delay: -15s; }
.pains__fly:nth-child(10) { left: 90%; top: 74%; width: 3.5rem; rotate: 30deg;  animation-duration: 11s; animation-delay: -2s; }
.pains__fly:nth-child(11) { left: 44%; top: 44%; width: 5rem;   rotate: 235deg; animation-duration: 20s; animation-delay: -17s; }
.pains__fly:nth-child(12) { left: 8%;  top: 86%; width: 3rem;   rotate: 140deg; animation-duration: 14s; animation-delay: -10s; }
.pains__fly:nth-child(13) { left: 78%; top: 6%;  width: 6.5rem; rotate: 305deg; animation-duration: 22s; animation-delay: -12s; }
.pains__fly:nth-child(14) { left: 52%; top: 62%; width: 4rem;   rotate: 80deg;  animation-duration: 13s; animation-delay: -8s; }

/* Полёт к зрителю: из глубины (0.3) мимо камеры (1.6–1.9). Сдвиг идёт вдоль rotate
   предмета, кривая с разгоном — ближние летят быстрее, как в перспективе. */
@keyframes pains-fly {
  0%       { transform: translateX(0) scale(0.3) rotate(-20deg); opacity: 0; }
  14%, 72% { opacity: 1; }
  100%     { transform: translateX(22rem) scale(1.9) rotate(12deg); opacity: 0; }
}
@keyframes pains-spin {
  0%       { transform: translateX(0) scale(0.3) rotate(0); opacity: 0; }
  14%, 72% { opacity: 1; }
  100%     { transform: translateX(16rem) scale(1.7) rotate(180deg); opacity: 0; }
}
@keyframes pains-spin-r {
  0%       { transform: translateX(0) scale(0.3) rotate(0); opacity: 0; }
  14%, 72% { opacity: 1; }
  100%     { transform: translateX(18rem) scale(1.6) rotate(-150deg); opacity: 0; }
}

/* pains.js: блок за экраном — предметы стоят */
.pains-wrap.is-js:not(.is-visible) .pains__fly {
  animation-play-state: paused;
}

/* ---------- лента ----------
   На телефоне и планшете лента выезжает за поля контейнера до краёв экрана.
   Вертикальные поля — место под свечение и увеличение текущей карточки. */
.pains__deck {
  position: relative;
}
.pains__track {
  position: relative;
  margin: -28px calc(var(--pains-gutter) * -1);
  padding: 28px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pains__track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.pains__track:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: -24px;
  border-radius: var(--radius);
}
.pains__list {
  display: flex;
  gap: var(--pains-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Пустые поля по краям ленты: крайние слайды тоже встают по центру */
.pains__list::before,
.pains__list::after {
  content: "";
  flex: 0 0 calc(50% - var(--pains-w) / 2 - var(--pains-gap));
}

/* ---------- слайд ----------
   Слайд — точка прилипания, его не трансформируем (иначе лента встаёт мимо центра);
   «впереди / позади» получает вложенная карточка .pain. Высота у всех одна: слайды
   растянуты по ленте, карточка заполняет слайд. */
.pains__slide {
  position: relative;
  display: flex;
  flex: 0 0 var(--pains-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  -webkit-tap-highlight-color: transparent;
}

/* Карточка — стекло: сквозь неё чуть видны предметы фона */
.pains-wrap .pain {
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 60%), rgba(21, 24, 28, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pains-wrap .pain--any {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(201, 169, 97, 0.12), transparent 70%),
    rgba(21, 24, 28, 0.72);
}
/* без размытия под стеклом — непрозрачная карточка */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pains-wrap .pain {
    background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 60%), var(--bg-card);
  }
  .pains-wrap .pain--any {
    background: radial-gradient(90% 70% at 100% 0%, rgba(201, 169, 97, 0.12), transparent 70%), var(--bg-card);
  }
}
/* свечение и латунная кромка текущей — отдельным слоем, чтобы включать через opacity */
.pains-wrap .pain::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.85), 0 0 44px -6px rgba(201, 169, 97, 0.22);
  opacity: 0;
}

/* Эффект только при .is-ready; без скрипта все карточки в полный размер */
.pains-wrap.is-ready .pain {
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease),
    border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), translate 0.3s var(--ease);
}
.pains-wrap.is-ready .pain::after {
  transition: opacity 0.45s var(--ease);
}
.pains-wrap.is-ready .is-current .pain {
  z-index: 2;
}
.pains-wrap.is-ready .is-current .pain::after {
  opacity: 1;
}
/* соседи: позади, уменьшены и полупрозрачны; на телефоне — чуть, видны только края */
.pains-wrap.is-ready .pains__slide:not(.is-current) .pain {
  opacity: 0.5;
  cursor: pointer;
}
.pains-wrap.is-ready [data-pos="-1"] .pain {
  transform: translateX(3%) scale(0.94);
}
.pains-wrap.is-ready [data-pos="1"] .pain {
  transform: translateX(-3%) scale(0.94);
}
.pains-wrap.is-ready .pains__slide:not(.is-current) .pain:hover {
  opacity: 0.7;
}

/* ---------- стрелки и точки (показываются, когда JS поставил .is-ready) ---------- */
.pains__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.pains-wrap.is-ready .pains__controls {
  display: flex;
}
.pains__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: rgba(242, 239, 233, 0.04);
  color: var(--accent-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pains__arrow .icon {
  width: 20px;
  height: 20px;
}
.pains__arrow--prev .icon {
  transform: scaleX(-1);
}
.pains__arrow--next .icon {
  transform: none;
}
.pains__arrow:hover {
  border-color: var(--accent-light);
  background: rgba(201, 169, 97, 0.1);
}
.pains__arrow:active {
  transform: scale(0.94);
}
.pains__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pains__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pains__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.28;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.pains__dot:hover::before {
  opacity: 0.6;
}
.pains__dot.is-active::before {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.4);
}
.pains__dot:focus-visible {
  outline-offset: -2px;
}

/* ---------- адаптив ---------- */
/* телефон: 8 предметов вместо 14 */
@media (max-width: 759px) {
  .pains__fly:nth-child(n+9) {
    display: none;
  }
}
/* планшет: текущая карточка ~половина ленты, по бокам видны половинки соседей */
@media (min-width: 600px) {
  .pains-wrap {
    --pains-gap: 1.25rem;
    --pains-w: 52%;
  }
  .pains-wrap.is-ready [data-pos="-1"] .pain {
    transform: translateX(8%) scale(0.9);
  }
  .pains-wrap.is-ready [data-pos="1"] .pain {
    transform: translateX(-8%) scale(0.9);
  }
}
/* широкий: три карточки в контейнере, текущая по центру крупнее и впереди */
@media (min-width: 1100px) {
  .pains-wrap {
    --pains-w: calc((100% - 2 * var(--pains-gap)) / 3);
  }
  .pains__track {
    margin-inline: 0;
  }
  .pains-wrap.is-ready .is-current .pain {
    transform: scale(1.04);
  }
  .pains-wrap.is-ready [data-pos="-1"] .pain {
    transform: translateX(10%) scale(0.9);
  }
  .pains-wrap.is-ready [data-pos="1"] .pain {
    transform: translateX(-10%) scale(0.9);
  }
}

/* «уменьшить движение»: предметы стоят россыпью, карусель переключается мгновенно */
@media (prefers-reduced-motion: reduce) {
  .pains__fly {
    animation: none;
    transform: translateX(5rem) scale(0.95);
  }
  .pains__fly:nth-child(3n) {
    transform: translateX(9rem) scale(1.25);
  }
  .pains__fly:nth-child(3n+1) {
    transform: translateX(2rem) scale(0.7);
  }
  .pains__track {
    scroll-behavior: auto;
  }
  .pains-wrap.is-ready .pain,
  .pains-wrap.is-ready .pain::after,
  .pains__arrow,
  .pains__dot::before {
    transition: none;
  }
  .pains__arrow:active {
    transform: none;
  }
}