/* ---------- 02: обо мне — живое фото (эффект 37 лаборатории), тёмная секция ---------- */
.ab {
  position: relative; overflow: clip; min-height: 100svh; background: var(--ink); color: var(--bg);
  --soft: rgba(236, 230, 218, .55); --rule: rgba(236, 230, 218, .14);   /* светлые подписи и линии на тёмном */
  --r: clamp(14px, 1.5vw, 22px);
  padding: calc(var(--pad) + 64px) var(--pad) var(--pad);
  display: grid;
}
.ab .dim { color: var(--soft); }
.ab .acc { color: var(--acc); }
.ab-label { position: absolute; left: var(--pad); top: calc(var(--pad) + 22px); color: var(--soft); }

/* тёплое пятно света на фоне — едет за курсором вместе со светом в шейдере */
.ab-glow { position: absolute; left: 0; top: 0; width: 110vmin; height: 110vmin; margin: -55vmin 0 0 -55vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 87, 47, .13), rgba(217, 87, 47, .04) 55%, transparent); will-change: transform; }

/* раскладка: портрет слева на все строки, текст справа по центру */
.ab-grid {
  --gap: clamp(32px, 6.4vw, 116px);
  position: relative; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: var(--gap);
  grid-template-rows: 1fr repeat(7, auto) 1fr;
  grid-template-areas: "card ." "card kicker" "card name" "card role" "card lead" "card body" "card facts" "card nums" "card .";
}

.ab-card-wrap { grid-area: card; align-self: center; justify-self: end; width: min(100%, calc((100svh - var(--pad) * 2 - 64px - 52px) * .8)); margin: 0; position: relative; perspective: 1300px; }
.ab-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); transform-style: preserve-3d; will-change: transform; }
.ab-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #241c16; clip-path: inset(0 0 0 0 round var(--r)); }
.ab-face canvas, .ab-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-fallback { object-fit: cover; object-position: 50% 30%; }
.ab-face canvas { opacity: 0; }
.ab-card.gl canvas { opacity: 1; }
.ab-card.gl .ab-fallback { visibility: hidden; }
.ab-rimline { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(236, 230, 218, .1); pointer-events: none; }
/* тень — отдельный размытый слой, двигается только transform */
.ab-shadow { position: absolute; left: 8%; right: 8%; top: 14%; bottom: -4%; border-radius: 30px; background: #000; filter: blur(38px); opacity: .7; z-index: -1; will-change: transform; }
.ab-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.ab-live { display: inline-flex; align-items: center; gap: 8px; }
.ab-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: ab-pulse 2s ease-in-out infinite; }
@keyframes ab-pulse { 50% { opacity: .25; } }
.ab.is-off .ab-live i { animation-play-state: paused; }   /* вне экрана не тикает */

/* бейдж-кольцо на углу портрета */
.ab-badge { position: absolute; z-index: 3; width: clamp(108px, 9.6vw, 156px); aspect-ratio: 1; right: calc(var(--gap) * -.42); top: 7%; display: grid; place-items: center; pointer-events: none; will-change: transform; }
.ab-badge::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(22, 20, 18, .86); box-shadow: inset 0 0 0 1px rgba(236, 230, 218, .14); }   /* без backdrop-filter: размытие живого WebGL под бейджем пересчитывалось каждый кадр */
.ab-ring { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.ab-ring text { font: 500 14.5px/1 var(--font-mono); letter-spacing: 0; fill: var(--bg); text-transform: uppercase; }
.ab-core { position: relative; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--acc); display: grid; place-items: center; color: var(--ink); }
.ab-core svg { width: 52%; height: 52%; will-change: transform; }

/* текст */
.ab-kicker { grid-area: kicker; display: flex; align-items: center; gap: 14px; }
.ab-kicker::after { content: ''; flex: 1; height: 1px; background: var(--rule); order: 1; }
.ab-kicker span:last-child { order: 2; }
.ab-name { grid-area: name; margin: clamp(14px, 2.6vh, 30px) 0 0; font: 700 clamp(56px, min(7vw, 12.5vh), 128px)/.9 var(--font-display); letter-spacing: -.055em; }
.ab-name em { font: italic 400 1.12em/.9 var(--font-serif); letter-spacing: -.03em; }
.ab-name b { color: var(--acc); font-weight: inherit; }
.ab-name .ab-ln-m { padding: .04em .1em .14em; margin: -.04em -.1em -.14em; }
.ab-role { grid-area: role; margin: clamp(12px, 2vh, 20px) 0 0; display: flex; gap: 14px; flex-wrap: wrap; }
.ab-lead { grid-area: lead; margin: clamp(18px, 3.4vh, 38px) 0 0; max-width: 21em; font: 500 clamp(21px, min(2.35vw, 4.1vh), 38px)/1.14 var(--font-display); letter-spacing: -.028em; text-wrap: pretty; }
.ab-lead em { font: italic 400 1.1em/1 var(--font-serif); letter-spacing: -.01em; color: var(--acc); }
.ab-body { grid-area: body; margin: clamp(12px, 2vh, 20px) 0 0; max-width: 48ch; font: 400 clamp(14px, 1.05vw, 17px)/1.55 var(--font-sans); color: var(--soft); text-wrap: pretty; }
.ab-ln-m { padding-bottom: .08em; margin-bottom: -.08em; }

.ab-facts { grid-area: facts; margin: clamp(22px, 4vh, 44px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 1.8vw, 28px); }
.ab-fact { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--rule); align-content: start; }
.ab-fact dt, .ab-fact dd { margin: 0; }
.ab-fact dd { font: 500 clamp(14px, 1.12vw, 18px)/1.25 var(--font-sans); letter-spacing: -.01em; }
.ab-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #8fd18a; vertical-align: .12em; box-shadow: 0 0 10px rgba(143, 209, 138, .7); }
.ab-nums { grid-area: nums; margin-top: clamp(18px, 3.4vh, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; column-gap: clamp(14px, 1.8vw, 28px); }
.ab-num { display: grid; gap: 6px; }
.ab-num strong { font: 600 clamp(36px, min(4.4vw, 7.6vh), 74px)/.9 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ab-num strong sup { font: italic 400 .6em/1 var(--font-serif); color: var(--acc); vertical-align: top; margin-left: .04em; letter-spacing: 0; }
.ab-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px; overflow: hidden; white-space: nowrap; isolation: isolate;
  padding: 15px 20px 15px 22px; border-radius: 999px; background: var(--bg); color: var(--ink);
  font: 500 clamp(14px, 1.05vw, 16px)/1 var(--font-sans); letter-spacing: -.01em; text-decoration: none;
}
.ab-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--acc); border-radius: inherit; transform: translateY(101%); transition: transform .7s var(--ease-out); }
.ab-arr { position: relative; width: 14px; height: 14px; overflow: hidden; }
.ab-arr svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .7s var(--ease-out); }
.ab-arr svg + svg { transform: translate(-120%, 120%); }
.ab-cta:hover::before, .ab-cta:focus-visible::before { transform: none; }
.ab-cta:hover .ab-arr svg:first-child, .ab-cta:focus-visible .ab-arr svg:first-child { transform: translate(120%, -120%); }
.ab-cta:hover .ab-arr svg + svg, .ab-cta:focus-visible .ab-arr svg + svg { transform: none; }
.ab-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* до появления — скрыто (если скрипт не запустился, класс не ставится) */
.ab.is-armed .ab-rv { opacity: 0; }

/* адаптив */
@media (max-height: 700px) and (min-width: 761px) {
  .ab-body { display: none; }
  .ab-facts { margin-top: clamp(14px, 3vh, 28px); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .ab-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .ab-nums .ab-cta { grid-column: 1 / -1; justify-self: start; }
  .ab-fact dd { font-size: 13px; }
}
@media (max-width: 760px) {
  .ab { padding-top: calc(var(--pad) + 72px); }
  .ab-grid {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "kicker" "name" "card" "role" "lead" "body" "facts" "nums";
  }
  .ab-name { margin-top: 18px; font-size: clamp(54px, 17.4vw, 96px); }
  .ab-card-wrap { justify-self: stretch; width: auto; margin-top: 22px; }
  .ab-badge { width: 96px; right: 10px; top: auto; bottom: 48px; }
  .ab-role { margin-top: 22px; }
  .ab-lead { font-size: clamp(22px, 6.4vw, 30px); }
  .ab-body { font-size: 15px; }
  .ab-facts { grid-template-columns: minmax(0, 1fr); }
  .ab-fact { grid-template-columns: 8.5em 1fr; align-items: baseline; padding-block: 10px; }
  .ab-fact:last-child { border-bottom: 1px solid var(--rule); }
  .ab-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .ab-num strong { font-size: clamp(34px, 10vw, 48px); }
  .ab-nums .ab-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .ab-live i { animation: none; } }