/* Главная B+C v3 — «про меня». Макет Figma: секция 2415:2 (кадры 1440×900), анимация — 2416:2.
   Всё считаем в «u» = 1/1440 ширины экрана (на широких экранах упирается в 1.25px),
   поэтому цифры в коде = пиксели из Figma. */
:root {
  --bg: #ebebe9;
  --ink: #111;
  --mute: #595957;
  --col: rgba(17, 17, 17, .08);
  --rule: rgba(17, 17, 17, .15);
  --u: min(calc(100vw / 1440), 1.25px);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }
p, h1 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-weight: 400; }

/* рамка 1440u по центру — общая для всех блоков */
.top, .hero, .works, .end, .cols { width: calc(1440 * var(--u)); margin-inline: auto; position: relative; }

/* направляющие на всю высоту страницы */
.cols { position: fixed; inset: 0 0 0 50%; transform: translateX(-50%); height: 100vh; pointer-events: none; z-index: 0; }
.cols i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--col); }
.cols i:nth-child(1) { left: calc(80 * var(--u)); }
.cols i:nth-child(2) { left: calc(540 * var(--u)); }
.cols i:nth-child(3) { left: calc(1000 * var(--u)); }
.cols i:nth-child(4) { left: calc(1360 * var(--u)); }

/* шапка */
.top { position: fixed; top: 0; left: 50%; transform: translateX(-50%); height: calc(84 * var(--u)); z-index: 30; }
.top.is-solid { background: var(--bg); }
.top__logo { position: absolute; left: calc(80 * var(--u)); top: calc(34 * var(--u)); font-weight: 500; font-size: calc(26 * var(--u)); letter-spacing: -.02em; line-height: 1; }
.top__nav { position: absolute; right: calc(80 * var(--u)); top: calc(42 * var(--u)); display: flex; gap: calc(32 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1; }
.top__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.top__nav .lang { display: flex; gap: calc(10 * var(--u)); }

/* ---- шапка: переключатель языка (бегунок едет к выбранному языку) ---- */
.top__nav { top: calc(35 * var(--u)); align-items: center; }
.top__nav .lang { position: relative; display: inline-flex; align-items: stretch; gap: 0; height: calc(26 * var(--u)); margin-left: calc(20 * var(--u)); padding: 2px; border: 1px solid var(--ink); isolation: isolate; }
.top__nav .lang::before { content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; bottom: 2px; width: calc(50% - 2px); background: var(--ink); transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.top__nav .lang[data-cur="en"]::before { transform: translateX(100%); }
.top__nav .lang a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: calc(34 * var(--u)); padding: 0 calc(8 * var(--u)); transition: color .3s, opacity .15s; }
.top__nav .lang a.is-cur { color: var(--bg); }
.top__nav .lang a:hover { text-decoration: none; }
.top__nav .lang a:not(.is-cur):hover { opacity: .55; }

main { position: relative; z-index: 1; }

/* ---------- V1 · вход ---------- */
.hero { height: max(100vh, calc(640 * var(--u))); min-height: 560px; overflow: hidden; }
.trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ink { position: absolute; z-index: 2; left: calc(240 * var(--u)); width: calc(960 * var(--u)); top: 29.3vh; aspect-ratio: 960 / 336; }
.ink img { position: absolute; display: block; max-width: none;
  left: .84%; right: .81%; top: 2.39%; bottom: 2.3%; width: 98.35%; height: 95.31%;
  transform: scaleY(-1); user-select: none; -webkit-user-drag: none; }
.lead { position: absolute; z-index: 2; left: calc(540 * var(--u)); top: calc(29.3vh + 357 * var(--u)); width: calc(751 * var(--u));
  font-weight: 200; font-size: calc(33 * var(--u)); line-height: 1.09; letter-spacing: -.01em; }

/* след из работ за курсором */
.tr { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.tr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); }
.tr i:nth-of-type(1) { left: -4px; top: -4px; border-width: 1px 0 0 1px; }
.tr i:nth-of-type(2) { right: -4px; top: -4px; border-width: 1px 1px 0 0; }
.tr i:nth-of-type(3) { left: -4px; bottom: -4px; border-width: 0 0 1px 1px; }
.tr i:nth-of-type(4) { right: -4px; bottom: -4px; border-width: 0 1px 1px 0; }

/* ---------- V2/V3 · список ---------- */
.works { padding-bottom: 0; scroll-margin-top: calc(84 * var(--u)); }
.chips { position: sticky; top: calc(84 * var(--u)); z-index: 20; display: flex; justify-content: space-between; align-items: center;
  height: calc(56 * var(--u)); padding: 0 calc(80 * var(--u)); font-size: calc(15 * var(--u)); background: var(--bg); }
.chips__set { display: flex; gap: calc(40 * var(--u)); }
.chip { font-family: var(--mono); font-size: inherit; line-height: 1; }
.chip:hover { text-decoration: underline; text-underline-offset: 4px; }
.chip.is-on { font-weight: 500; }
.chip.is-on::before { content: "[ "; }
.chip.is-on::after { content: " ]"; }
.chips__count { white-space: nowrap; }

.list { margin: calc(20 * var(--u)) calc(80 * var(--u)) 0; border-top: 1px solid var(--rule); }
.list li { border-bottom: 1px solid var(--rule); }
.row { position: relative; display: block; height: calc(46 * var(--u)); transition: background-color .15s, color .15s, opacity .25s; }
.row > span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.row__n { left: calc(12 * var(--u)); font-size: calc(12 * var(--u)); }
.row__t { left: calc(70 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 400; }
.row__m { left: calc(460 * var(--u)); font-size: calc(12 * var(--u)); }
.row.is-hover { background: var(--ink); color: var(--bg); }
.row.is-dim { opacity: .25; }
.row.is-dim.is-hover { background: transparent; color: inherit; }

/* превью у курсора */
.peek { position: fixed; z-index: 15; left: calc(50% + (1000 - 720) * var(--u)); top: 0; width: calc(300 * var(--u)); height: calc(330 * var(--u));
  pointer-events: none; opacity: 0; transform: scale(.96); transition: opacity .18s, transform .18s; }
.peek.is-on { opacity: 1; transform: none; }
.peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.peek i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); }
.peek .c1 { left: -4px; top: -4px; border-width: 1px 0 0 1px; }
.peek .c2 { right: -4px; top: -4px; border-width: 1px 1px 0 0; }
.peek .c3 { left: -4px; bottom: -4px; border-width: 0 0 1px 1px; }
.peek .c4 { right: -4px; bottom: -4px; border-width: 0 1px 1px 0; }

/* ---------- V4 · конец ---------- */
.end { height: max(100vh, calc(760 * var(--u))); }
.end__big { position: absolute; left: calc(81 * var(--u)); top: calc(90 * var(--u)); width: calc(840 * var(--u)); font-weight: 500; font-size: calc(178 * var(--u)); letter-spacing: -.034em; line-height: calc(161 / 178); }
.end__row { position: absolute; left: 0; right: 0; top: calc(480 * var(--u)); font-size: calc(14 * var(--u)); }
.end__contacts { position: absolute; left: calc(80 * var(--u)); line-height: calc(22 * var(--u)); }
.end__contacts li + li { padding-left: 2ch; }
.end__links { position: absolute; left: calc(540 * var(--u)); display: flex; gap: calc(32 * var(--u)); white-space: nowrap; }
.end a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* справа от «Обсудим идею?» — фото в кружке и кнопка на «Обо мне» */
.end__me { position: absolute; left: calc(1000 * var(--u)); top: calc(90 * var(--u)); width: calc(360 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.end__photo { display: block; width: calc(320 * var(--u)); height: calc(320 * var(--u)); border-radius: 50%; overflow: hidden; background: #dcdcda; }
.end__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 10%; transform: translateX(-9%) scale(1.32); transform-origin: 60% 26%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.end__photo:hover img { transform: translateX(-9%) scale(1.4); }
.end .end__btn { display: inline-flex; align-items: center; height: calc(42 * var(--u)); margin-top: calc(32 * var(--u)); padding: 0 calc(24 * var(--u)); border: 1px solid var(--ink); font-size: calc(16 * var(--u)); line-height: 1; transition: background-color .15s, color .15s; }
.end .end__btn:hover { background: var(--ink); color: var(--bg); text-decoration: none; }
.copy { position: absolute; right: calc(80 * var(--u)); bottom: calc(50 * var(--u)); font-size: calc(12 * var(--u)); color: var(--mute); }

/* ---------- телефон (макет Figma, страница «Мобилка», 390 px): без мыши и следа, список с превью справа ---------- */
.row__th, .pad, .hero__down { display: none; }
@media (max-width: 760px) {
  :root { --u: calc(100vw / 390); }
  .top, .hero, .works, .end { width: 100%; }
  .cols i:nth-child(n+3) { display: none; }
  .cols i:nth-child(1) { left: 20px; } .cols i:nth-child(2) { left: calc(100% - 20px); }
  .top { height: 72px; }
  .top__logo { left: 20px; top: 25px; font-size: 22px; }
  .top__nav { right: 20px; top: 32px; gap: 14px; font-size: 11px; }
  .top__nav { top: 26px; align-items: center; }
  .top__nav .lang { height: 24px; margin-left: 6px; }
  .top__nav .lang a { min-width: 30px; padding: 0 6px; }

  .hero { height: 100svh; min-height: 620px; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  /* верх экрана — холст: палец рисует следом в любую сторону и не прокручивает страницу; нижняя полоса прокручивает */
  .pad { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 22svh; z-index: 4; touch-action: none; }
  .hero__down { display: flex; align-items: flex-end; position: absolute; left: 0; right: 0; bottom: 0; height: 22svh; padding: 0 20px 40px; z-index: 5; font: 400 11px/1 var(--mono); color: var(--mute); }
  .ink { left: 20px; width: calc(100% - 40px); top: 210px; }
  .lead { left: 20px; width: calc(100% - 40px); top: calc(210px + (100vw - 40px) * .35 + 28px); font-size: 24px; line-height: 1.12; }
  .hero::after { content: "проведи пальцем по экрану"; position: absolute; left: 20px; bottom: calc(22svh + 14px); font: 400 11px/1 var(--mono); color: var(--mute); transition: opacity .5s; }
  html[lang="en"] .hero::after { content: "swipe across the screen"; }
  .hero.is-played::after { opacity: 0; }

  /* чипы листаются пальцем, счётчик под ними */
  .chips { top: 72px; display: block; height: auto; padding: 0; font-size: 13px; }
  .chips__set { display: flex; flex-wrap: nowrap; gap: 22px; padding: 14px 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips__set::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 6px 0; }
  .chips__count { display: block; padding: 0 20px 10px; font-size: 11px; color: var(--mute); }

  .list { margin: 0 20px; }
  .row { display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 96px; padding: 12px 88px 12px 0; }
  .row > span { position: static; transform: none; display: block; white-space: normal; }
  .row__n { display: none !important; }
  .row__t { font-size: 20px; line-height: 1.1; letter-spacing: -.01em; }
  .row__m { font-size: 11px; line-height: 1.3; margin-top: 8px; }
  .row__th { display: block; position: absolute; right: 0; top: 50%; width: 72px; height: 72px; transform: translateY(-50%); object-fit: cover; background: #d7d7d3; }
  .peek { display: none; }

  .end { height: auto; min-height: 100svh; padding: 96px 20px 28px; display: flex; flex-direction: column; }
  .end__big { position: static; width: auto; font-size: 21vw; line-height: .9; letter-spacing: -.034em; }
  .end__me { position: static; width: 200px; margin-top: 44px; }
  .end__photo { width: 200px; height: 200px; }
  .end .end__btn { height: 40px; margin-top: 20px; padding: 0 22px; font-size: 15px; }
  .end__row { position: static; margin-top: 56px; font-size: 14px; }
  .end__contacts { position: static; line-height: 1.2; }
  .end__contacts li + li { padding-left: 0; }
  .end__contacts li:first-child { font-size: 12px; color: var(--mute); padding-bottom: 8px; }
  .end__contacts li + li { border-bottom: 1px solid var(--rule); }
  .end__contacts li + li a { display: block; padding: 13px 0; }
  .copy { position: static; margin-top: auto; padding-top: 48px; font-size: 12px; }
}

/* касание: строка и ссылки отвечают сразу */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .row:active { background: var(--ink); color: var(--bg); box-shadow: -8px 0 0 var(--ink), 8px 0 0 var(--ink); transition-duration: .05s; }
  .chip:active, .top__nav a:active, .end__contacts a:active, .hero__down:active { opacity: .45; }
  .end .end__btn:active { background: var(--ink); color: var(--bg); transition-duration: .05s; }
}