/* ---------- третья секция: офферы ---------- */
.offers {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(3.5rem, 4.5svh);
  height: 100svh;
  min-height: 40rem;
  padding: 5rem 3rem 4rem;
  overflow-x: clip;
  overflow-y: visible;
}
/* подсветка секции цветом оффера — рисуется в js на холсте с дизерингом (без ступенчатых полос) */
.offers__glow {
  position: absolute;
  /* выходит вверх на 60% высоты секции и плавно гаснет поверх предыдущей — без шва */
  top: -60%;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 200%; /* выходит и вниз на 40% — свет гаснет поверх следующей секции, без шва */
  pointer-events: none;
}

/* заголовок — граффити баллончиком: контраст к тяжёлым каменным офферам */
.offers__title {
  margin: 0;
  line-height: 0;
  rotate: -4deg;
}
.offers__spray {
  width: min(48rem, 80vw);
  height: auto;
}

.offers__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.offers__sub {
  margin: -0.6rem 0 0;
  line-height: 0;
  rotate: -3deg;
}
.offers__sub-spray {
  width: min(30rem, 52vw);
  height: auto;
}

/* список офферов: строки с линиями, как списки вакансий у roiheads */
.offers__list {
  display: flex;
  flex-direction: column;
  gap: min(3.4rem, 5svh);
  width: min(84rem, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ступенькой: слева — справа — слева */
.offer { display: flex; }
.offer--swap { justify-content: flex-end; }
.offer__link {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-block: min(1.6rem, 2.3svh);
}
.offer--swap .offer__link { flex-direction: row-reverse; }

/* название залито камнем — той же текстурой, что огонёк и монеты */
.offer__name {
  position: relative;
  justify-self: start;
  font-family: var(--font-display-ru);
  font-size: min(7rem, 10.5svh);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  background: url("../assets/offers/stone.webp") 30% 40% / 34rem auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* высеченный край: тёмная грань снизу */
  filter: drop-shadow(0 0.35rem 0 #050506);
  transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-position 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* подчёркивание баллончиком — рисуется при наведении, цвет под подсветку строки */
.offer--exchange .offer__underline { filter: hue-rotate(15deg) saturate(1.4); }
.offer--swap .offer__underline { filter: hue-rotate(-70deg) saturate(1.2); }
.offer--polymarket .offer__underline { filter: hue-rotate(55deg) saturate(1.3); }
.offer__underline {
  position: absolute;
  left: -2%;
  top: 100%;
  translate: 0 -12%;
  width: 104%;
  height: auto;
  pointer-events: none;
}

/* стрелка — граффити: в покое серая, как камень; при наведении перерисовывается баллончиком в цвет оффера */
.offer__go {
  display: block;
  width: min(5.5rem, 8svh);
  flex: none;
  transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1), scale 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.offer__go canvas {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) brightness(1.5);
  transition: filter 0.3s;
}
.offer--swap .offer__go canvas { scale: -1 1; }

@media (hover: hover) {
  .offer__link:hover .offer__name {
    translate: 1.5rem 0;
    background-position: 60% 55%;
  }
  .offer--swap .offer__link:hover .offer__name { translate: -1.5rem 0; }
  .offer__link:hover .offer__go { translate: 0.4rem -0.4rem; scale: 1.1; }
  .offer--swap .offer__link:hover .offer__go { translate: -0.4rem -0.4rem; }
  .offer--exchange .offer__link:hover .offer__go canvas { filter: hue-rotate(15deg) saturate(1.4); }
  .offer--swap .offer__link:hover .offer__go canvas { filter: hue-rotate(-70deg) saturate(1.2); }
  .offer--polymarket .offer__link:hover .offer__go canvas { filter: hue-rotate(55deg) saturate(1.3); }
}
.offer__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0.25rem;
}


@media (max-width: 767px) {
  .offers { gap: 2rem; padding: 4rem 0.75rem 3rem; }
  .offers__spray { width: 20rem; }
  .offers__sub-spray { width: 13rem; }
  .offers__list { gap: 1.6rem; }
  .offer__link { gap: 1rem; padding-block: 0.6rem; }
  .offer__name { font-size: 2.3rem; background-size: 14rem auto; }
  .offer__go { width: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
}