/* ---------- четвёртая секция: огонёк в полный рост + калькулятор выплат ---------- */
.partners {
  /* у этой секции свой свет — кислотный лайм, разнообразит синий сайт */
  --accent: #c6ff3d;
  position: relative;
  isolation: isolate;
}

/* фон секции: прилипает к экрану на всю высоту секции (и сцена с огоньком, и калькулятор едут поверх) */
/* фон секции: занимает ровно секцию, внутри — прилипший к экрану слой с кольцом
   (не выходит за секцию: раньше отрицательный отступ давал «хвост» ещё на экран ниже) */
.partners__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.partners__bg-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  /* кольцо не обрезаем снизу: его нижняя половина выходит ниже сцены и видна за калькулятором */
  overflow: visible;
  --edge: 40svh;
}

/* запас прокрутки, за который камера наезжает; сцена при этом «прилипает» к экрану */
.partners__zoom { position: relative; height: 210svh; }
.partners__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  /* увеличенные слои не должны светить на соседние секции */
  overflow: clip;
}

/* слой во всю сцену: при скролле уменьшается из data-zoom в 1 — прилетает к зрителю из глубины */
.partners__layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 55%;
  will-change: transform;
  pointer-events: none;
}

/* неоновое кольцо — шейдер с дизерингом (js/partners.js), без ступенчатых полос */
.partners__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* экран сцены + нижняя половина кольца целиком: центр кольца на 58% экрана, радиус свечения — 74.5rem */
  height: calc(58svh + 76rem);
  max-width: none;
  /* верх растворяется на въезде секции (--edge ведёт js) — нет линии со стыком выше */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge));
}

/* огонёк в полный рост по центру, стоит на нижнем крае */
.partners__layer--hero {
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.partners__flame {
  position: relative;
  height: 70svh;
  aspect-ratio: 1;
  animation: flame-breathe 6s ease-in-out infinite;
}
.partners__flame-img,
.partners__flame-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* пока 3D не готово — показываем рендер; потом живую модель */
.partners__flame-3d { visibility: hidden; }
.partners__flame.has-3d .partners__flame-3d { visibility: visible; }
.partners__flame.has-3d .partners__flame-img { visibility: hidden; }
@keyframes flame-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.2svh; }
}

.partners__layer--title {
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 7svh 2rem 0;
}
/* заголовок: компактная белая строка + главное баллончиком */
.partners__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}
/* крупная строка, высеченная в камне */
.partners__kicker {
  font-family: var(--font-display-ru);
  font-size: min(5.4rem, 8.6svh);
  font-weight: 900;
  line-height: 1.12; /* место под кратку «Й» и запятые — строки не касаются */
  letter-spacing: 0.03em; /* буквы и запятые не слипаются */
  text-transform: uppercase;
  background: url("../assets/offers/stone.webp") 40% 40% / 30rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.35rem 0 #050506);
}
/* при анимации буквы становятся отдельными элементами — камень даём каждой */
.partners__kicker .kchar {
  background: url("../assets/offers/stone.webp") 40% 40% / 30rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.js .partners__kicker { visibility: hidden; }

/* граффити поверх огонька — на уровне груди */
.partners__layer--spray {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 26svh;
}
.partners__spray {
  display: flex;
  flex-direction: column;
  align-items: center;
  rotate: -7deg;
}
.partners__spray-line { display: block; width: min(60rem, 92vw); height: auto; }
.partners__spray-line--2 { width: min(44rem, 68vw); margin-top: -1.2svh; margin-left: 10rem; }

/* ---------- калькулятор: камень + баллончик ---------- */
.calc {
  --fill: 14.1%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(72rem, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 14svh 0 22svh;
  text-align: center;
}
.calc__kicker {
  font-family: var(--font-display-ru);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* сумма оборота высечена в камне */
.calc__amount,
.calc__sum {
  font-family: var(--font-display-ru);
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  background: url("../assets/offers/stone.webp") 40% 40% / 30rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.4rem 0 #050506);
}
.calc__amount { font-size: 11rem; margin-top: 0.5rem; }

/* ползунок: полоса баллончиком, тянешь каменную монету */
.calc__slider {
  position: relative;
  width: 100%;
  height: 7rem;
  margin-top: 3.5rem;
}
.calc__track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  translate: 0 -50%;
}
.calc__track--base { filter: grayscale(1) brightness(0.45); }
.calc__fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--fill)) 0 0);
}
.calc__fill .calc__track { width: 100%; }
/* отметка порога 85%: (30 000 − 1 000) / (500 000 − 1 000) = 5.81% */
.calc__zone {
  position: absolute;
  left: 5.81%;
  bottom: calc(50% + 1.3rem);
  width: 11rem;
  translate: -20% 0;
  rotate: -6deg;
  pointer-events: none;
}
.calc__zone::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 100%;
  width: 0.25rem;
  height: 1.6rem;
  border-radius: 1rem;
  background: var(--accent);
}
.calc__zone img { width: 100%; height: auto; filter: drop-shadow(0 0 0.35rem #0d0c0f) drop-shadow(0 0 0.15rem #0d0c0f); } /* читается на ярком свечении */
.calc__coin {
  position: absolute;
  top: 50%;
  left: var(--fill);
  width: 7.5rem;
  height: 7.5rem;
  translate: -50% -50%;
  rotate: var(--spin, 0deg);
  pointer-events: none;
  transition: scale 0.25s;
}
.calc.is-drag .calc__coin { scale: 1.12; }
/* сам input прозрачный поверх — работает мышь, тач и клавиатура */
.calc__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: grab;
}
.calc__range:active { cursor: grabbing; }
.calc__range:focus-visible + .calc__scale { color: var(--accent); }
.calc__scale {
  position: absolute;
  top: calc(50% + 2.2rem);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* выплаты: активную баллончиком обводит круг от руки */
.calc__outs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
  margin-top: 5rem;
}
.calc__out {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  transition: opacity 0.5s;
}
.calc__out:not(.is-on) { opacity: 0.45; }
.calc__rate {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.calc__out.is-on .calc__rate { color: var(--accent); }
.calc__sum { font-size: 7.5rem; }
.calc__lock {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.calc__circle {
  position: absolute;
  /* шире под суммы до $425 000 (тариф 85% от $500 000) */
  inset: -1rem -4rem;
  width: calc(100% + 8rem);
  max-width: none;
  height: calc(100% + 2rem);
  pointer-events: none;
}
.calc__out[data-tier="85"] .calc__circle { rotate: -4deg; }
.calc__out[data-tier="80"] .calc__circle { rotate: 3deg; scale: -1 1; }

/* граффити-пометка про 85% — под выплатами справа */
.calc__note {
  width: 26rem;
  margin: 3.5rem 0 0 auto; /* ниже обводки выплаты — не перекрываются */
  margin-right: 6%;
  rotate: -4deg;
  pointer-events: none;
}
.calc__note-line { display: block; width: 100%; height: auto; }
.calc__note-line--2 { width: 112%; margin-top: -0.4rem; margin-left: -1rem; }

@media (max-width: 767px) {
  .partners__zoom { height: 190svh; }
  .partners__flame { height: auto; width: 96vw; }
  .partners__layer--title { padding: 10svh 0.75rem 0; }
  .partners__kicker { font-size: 1.9rem; background-size: 14rem auto; }
  .partners__kicker .kchar { background-size: 14rem auto; }
  .partners__layer--spray { padding-top: 30svh; }
  .partners__spray-line { width: 21rem; }
  .partners__spray-line--2 { width: 15.5rem; margin-left: 3rem; }
  .calc { padding: 8svh 0 14svh; }
  .calc__kicker { font-size: 1rem; }
  .calc__amount { font-size: 4.2rem; }
  .calc__slider { height: 4.5rem; margin-top: 2.5rem; }
  .calc__coin { width: 4.2rem; height: 4.2rem; }
  .calc__zone { width: 6rem; bottom: calc(50% + 0.9rem); }
  .calc__scale { font-size: 0.65rem; top: calc(50% + 1.4rem); }
  .calc__outs { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 3rem; }
  .calc__out { padding: 1.5rem 0.5rem; }
  .calc__rate { font-size: 0.7rem; }
  .calc__sum { font-size: 3.6rem; background-size: 14rem auto; }
  .calc__lock { font-size: 0.6rem; }
  .calc__circle { inset: -0.25rem 0.5rem; width: calc(100% - 1rem); height: calc(100% + 0.5rem); }
  .calc__note { width: 14rem; margin-right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .partners__kicker { visibility: visible; }
  .partners__flame { animation: none; }
}