/* ---------- 08: контакты — большие ссылки (эффект 32 лаборатории), тёмная секция ---------- */
.cx {
  position: relative; min-height: 100svh; background: var(--ink); color: var(--bg);
  --rule: rgba(236, 230, 218, .14); --soft: rgba(236, 230, 218, .55);   /* светлые линии и подписи на тёмном */
  padding: calc(var(--pad) + 76px) var(--pad) var(--pad);
  display: grid; grid-template-rows: auto auto 1fr auto; row-gap: clamp(12px, 2.4vh, 28px);
  --F: clamp(44px, min(8.4vw, 10.4vh), 150px);   /* кегль строк (четыре строки должны влезть в экран) */
  --cx-acc: var(--acc);
}
.cx .dim { color: var(--soft); }
.cx-label { position: absolute; left: var(--pad); top: calc(var(--pad) + 22px); color: var(--soft); }

/* вступление */
.cx-intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.cx-title { font: 600 clamp(42px, min(6.6vw, 10vh), 112px)/.88 var(--font-display); letter-spacing: -.055em; display: flex; align-items: flex-end; gap: .14em; }
.cx-title em { font: italic 400 1.1em/.8 var(--font-serif); letter-spacing: -.025em; }
.cx-title .dot { width: .2em; height: .2em; border-radius: 50%; background: var(--cx-acc); margin-bottom: .1em; }
.cx-side { display: grid; gap: 12px; justify-items: end; text-align: right; }
.cx-lede { max-width: 34ch; font: 400 clamp(13px, 1.05vw, 16px)/1.45 var(--font-sans); color: var(--soft); }
.cx-lede b { color: var(--bg); font-weight: 500; }

/* строки: список забирает свободную высоту, строки делят её поровну (с потолком) */
.cx-list { align-self: end; height: min(100%, calc(var(--F) * 9)); display: grid; grid-auto-rows: 1fr; margin-inline: calc(var(--pad) * -1); border-top: 1px solid var(--rule); }
.cx-row {
  position: relative; isolation: isolate; width: 100%; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: clamp(30px, 4.6vw, 74px) auto minmax(0, 1fr) auto auto;
  align-items: center; column-gap: clamp(12px, 1.6vw, 28px);
  padding: clamp(5px, 1.05vh, 14px) var(--pad);
  font-size: var(--F); text-align: left; color: var(--bg); cursor: pointer;
  transition: opacity .7s var(--ease-out), color .45s var(--ease-out);
}
.cx-list.has-active .cx-row:not(.is-active) { opacity: .26; }
.cx-row.is-active { color: var(--on); }
.cx-row:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; }

/* заливка: капсула вдвое выше строки, кромки — полуэллипсы; въезжает сверху или снизу */
.cx-fill { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cx-fill i { position: absolute; left: -2%; right: -2%; top: -50%; height: 200%; background: var(--c); border-radius: 50% / 25%; transform: translateY(76%); will-change: transform; }

.cx-idx { align-self: center; transition: color .45s var(--ease-out); }
.cx-row.is-active .cx-idx { color: inherit; opacity: .72; }
.cx-ico { width: .4em; height: .4em; transition: transform 1s var(--ease-out); }
.cx-ico svg { width: 100%; height: 100%; }
.cx-row.is-active .cx-ico { transform: rotate(-12deg) scale(1.06); }

/* название ↔ ник: обе строки в одной ячейке, буквы ездят по очереди внутри маски */
.cx-t { display: grid; overflow: hidden; line-height: 1.14; padding: 0 .14em .08em .12em; margin: 0 -.14em -.08em -.12em; }
.cx-t > span { grid-area: 1 / 1; align-self: end; justify-self: start; white-space: nowrap; }   /* по ширине текста: fit() меряет само слово, а не ячейку, растянутую длинным ником */
.cx-t .cx-a { font-weight: 600; font-family: var(--font-display); letter-spacing: -.05em; }
.cx-t .cx-b { font: italic 400 1.04em/1.36 var(--font-serif); letter-spacing: -.025em; margin-top: -.3em; }
.cx-t .ch { display: inline-block; transition: transform .95s var(--ease-out); transition-delay: calc(var(--i) * 16ms); }   /* без will-change: сотня постоянных слоёв на буквы; переход и так идёт на компоновщике */
.cx-t .cx-b .ch { transform: translateY(115%); }
.cx-row.is-active .cx-t .cx-a .ch { transform: translateY(-112%); }
.cx-row.is-active .cx-t .cx-b .ch { transform: none; }

/* копирование: строка прокручивается в «Copied!» тем же шрифтом, что и название */
.cx-t .cx-c { font: 600 1em/1.14 var(--font-display); letter-spacing: -.05em; }
.cx-t .cx-c .ch { transform: translateY(115%); }
.cx-row.is-copied .cx-t .cx-a .ch, .cx-row.is-copied .cx-t .cx-b .ch { transform: translateY(-112%); }
.cx-row.is-copied .cx-t .cx-c .ch { transform: none; }

/* справа: ник → действие → «Скопировано» */
.cx-meta { display: grid; overflow: hidden; text-align: right; line-height: 1.5; }
.cx-meta > span { grid-area: 1 / 1; transition: transform .75s var(--ease-out); }
.cx-meta > span:nth-child(2) { transform: translateY(110%); }
.cx-meta > span:nth-child(3) { transform: translateY(220%); }
.cx-row.is-active .cx-meta > span:nth-child(1) { transform: translateY(-110%); }
.cx-row.is-active .cx-meta > span:nth-child(2) { transform: none; }
.cx-row.is-copied .cx-meta > span:nth-child(1) { transform: translateY(-220%); }
.cx-row.is-copied .cx-meta > span:nth-child(2) { transform: translateY(-110%); }
.cx-row.is-copied .cx-meta > span:nth-child(3) { transform: none; }

/* стрелка: старая поворачивается и улетает в угол, новая приходит снизу-слева; у почты copy → check */
.cx-arr { position: relative; width: .44em; height: .44em; overflow: hidden; }
.cx-arr svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1.35; transition: transform .8s var(--ease-out); }
.cx-arr svg + svg { transform: translate(-115%, 115%) rotate(-90deg); }
.cx-row.is-active:not(.is-mail):not(.is-cv) .cx-arr svg:first-child { transform: translate(115%, -115%) rotate(45deg); }
.cx-row.is-active:not(.is-mail):not(.is-cv) .cx-arr svg + svg { transform: none; transition-delay: .06s; }
/* резюме: стрелка вниз уезжает, новая приходит сверху */
.is-cv .cx-arr svg + svg { transform: translateY(-115%); }
.is-cv.is-active .cx-arr svg:first-child { transform: translateY(115%); }
.is-cv.is-active .cx-arr svg + svg { transform: none; transition-delay: .06s; }
.is-mail .cx-arr svg + svg { transform: translateY(115%); }
.is-mail.is-copied .cx-arr svg:first-child { transform: translateY(-115%); }
.is-mail.is-copied .cx-arr svg + svg { transform: none; }

/* низ */
.cx-bottom { display: flex; justify-content: center; }   /* только копирайт по центру */
.cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .cx { --F: clamp(40px, 14.2vw, 64px); row-gap: 18px; }
  .cx-intro { grid-template-columns: 1fr; gap: 18px; }
  .cx-title { font-size: clamp(56px, 25vw, 120px); flex-wrap: wrap; column-gap: .14em; row-gap: 0; line-height: .86; }
  .cx-side { justify-items: start; text-align: left; }
  .cx-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: 12px; }
  .cx-idx, .cx-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-t .ch { transition-duration: .5s; transition-delay: 0s; }
  .cx-meta > span, .cx-arr svg, .cx-ico { transition-duration: .4s; }
}