/* ═══════════════════════════════════════════════════════════════
   v2 — смелый вариант. Подключается ПОВЕРХ site.css.
   Три слоя: крупная кинетическая типографика, холст географии,
   материальность (зерно, тиснение, глубина).
   ═══════════════════════════════════════════════════════════════ */

/* ── Материальность: зерно бумаги поверх всей страницы ──────── */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  /* Зерно намеренно крупное: мелкий шум на дробном масштабе Windows
     даёт муар и рябит при прокрутке. */
  opacity:.038;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.042}
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.042}

/* Тиснение на заголовках — свет сверху, тень снизу */
.hero-v2 h1,.blk > h2,.rail-name,.major h3,.geo-city{
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(19,30,40,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-v2 h1,
  :root:not([data-theme="light"]) .blk > h2,
  :root:not([data-theme="light"]) .rail-name,
  :root:not([data-theme="light"]) .major h3{
    text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(231,236,240,.05);
  }
}
:root[data-theme="dark"] .hero-v2 h1,
:root[data-theme="dark"] .blk > h2,
:root[data-theme="dark"] .rail-name,
:root[data-theme="dark"] .major h3{
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(231,236,240,.05);
}

/* Глубина у портрета */
.portrait{
  box-shadow:0 1px 1px rgba(19,30,40,.06),
             0 18px 40px -28px rgba(19,30,40,.55),
             0 40px 80px -60px rgba(19,30,40,.6);
}

/* ── Шапка во весь экран ────────────────────────────────────── */
.hero-v2{
  min-height:100vh;
  min-height:100svh;   /* мобильные браузеры с плавающей панелью */
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,72px);
  position:relative;
}
.hero-v2 h1{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(52px,12.4vw,196px);
  line-height:.92;letter-spacing:-.035em;
  color:var(--ink);
}
.hero-v2 h1{will-change:transform,opacity}
.hero-tag,.hero-lede{will-change:transform,opacity}
.hero-v2 h1 .ln{display:block}
.hero-v2 h1 .ln + .ln{text-indent:.055em}

/* Буквы: стартовое состояние ставится только когда скрипт готов их вернуть */
.kin .k{
  display:inline-block;
  opacity:0;transform:translateY(.42em) rotate(-4deg) scale(.96);
  transform-origin:50% 90%;
}
.kin .w{display:inline-block;white-space:nowrap}
.kin.go .k{
  opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),
             transform .78s cubic-bezier(.16,.9,.28,1);
}
@media (prefers-reduced-motion:reduce){
  .kin .k{opacity:1;transform:none}
  .kin.go .k{transition:none}
}

.hero-tag{
  margin:clamp(44px,9vh,120px) 0 0;
  font-size:clamp(15px,1.6vw,20px);line-height:1.5;color:var(--ink-2);
  max-width:34em;
  opacity:0;transform:translateY(10px);
}
.hero-lede{
  margin:20px 0 0;max-width:40em;font-size:clamp(16.5px,1.45vw,19.5px);
  line-height:1.6;color:var(--ink-3);
  opacity:0;transform:translateY(10px);
}
.go .hero-tag,.go .hero-lede{
  opacity:1;transform:none;
  transition:opacity .8s ease .55s, transform .8s cubic-bezier(.2,.8,.3,1) .55s;
}
.go .hero-lede{transition-delay:.68s}
@media (prefers-reduced-motion:reduce){
  .hero-tag,.hero-lede{opacity:1;transform:none}
}

/* Тонкая линия-подпись внизу шапки */
.hero-rule{
  margin-top:auto;padding-top:clamp(32px,6vh,72px);
  display:flex;align-items:baseline;gap:18px;
  font-size:12.5px;color:var(--ink-3);
}
.hero-rule i{flex:1;height:1px;background:linear-gradient(90deg,var(--rule),var(--accent) 62%,var(--rule));
             transform:scaleX(0);transform-origin:left}
.go .hero-rule i{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.25,.8,.3,1) .5s}
@media (prefers-reduced-motion:reduce){.hero-rule i{transform:scaleX(1)}}

/* Широкий экран: подпись слева, лид справа — шапка становится
   двухколонной композицией, а не текстом в левом углу пустыни */
@media (min-width:1600px){
  .hero-v2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
           grid-template-rows:auto auto 1fr auto;column-gap:88px;
           align-content:center}
  .hero-v2 h1{grid-column:1/-1;grid-row:1}
  .hero-tag{grid-column:1;grid-row:2}
  .hero-lede{grid-column:2;grid-row:2;margin-top:clamp(44px,9vh,120px);justify-self:end}
  .hero-rule{grid-column:1/-1;grid-row:4;margin-top:0;padding-top:clamp(32px,6vh,72px)}
}

/* Имя тянется вместе с экраном, а не упирается в потолок */
@media (min-width:1600px){ .hero-v2 h1{font-size:clamp(52px,12.4vw,248px)} }
@media (min-width:2000px){ .hero-v2 h1{font-size:clamp(52px,12.4vw,286px)} }
@media (min-width:2400px){ .hero-v2 h1{font-size:clamp(52px,12.4vw,320px)} }
@media (min-width:1600px){
  .hero-tag{font-size:clamp(15px,1.45vw,22px);max-width:38em}
  .hero-lede{font-size:clamp(16.5px,1.25vw,20.5px);max-width:44em}
}

/* ── Счётчики в показателях ─────────────────────────────────── */
.stat b{font-variant-numeric:tabular-nums}

/* ── Мобильная фотосцена ────────────────────────────────────────
   До 1020px визитка превращается в сцену: после экрана с именем
   фотография занимает почти весь экран, при прокрутке снизу
   проявляется подпись, дальше фото растворяется в портфолио.
   Скрытие текста включает только скрипт (.stage-init) — без JS
   всё видно сразу. ─────────────────────────────────────────── */
@media screen and (max-width:1019.98px){
  .rail-head{display:block;position:relative;margin:0 -28px;overflow:hidden}
  .portrait{
    width:100%;min-width:0;max-width:none;height:80svh;min-height:440px;
    aspect-ratio:auto;border:none;box-shadow:none;
    object-position:50% 22%;
    will-change:transform,opacity;
    /* края растворяются маской на самой картинке; растворение
       ЗАВЕРШАЕТСЯ на 92% высоты — под подписью фото уже нет */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 72%,transparent 92%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 72%,transparent 92%);
  }
  /* страховка для браузеров без mask-image: градиент поверх низа фото,
     сплошной цвет начинается там же, где маска уводит фото в ноль */
  .rail-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
    background:linear-gradient(180deg,transparent,var(--paper) 55%);pointer-events:none}
  .rail-name{display:none}      /* имя уже занимает первый экран */
  /* подпись под фото, чуть внахлёст на уже пустую кромку */
  .rail-id{position:relative;z-index:2;padding:0 28px;margin-top:-20px}
  .rail-role{color:var(--ink);font-size:17px;line-height:1.5;max-width:30em;margin:0}
  .rail-head .lang{margin-top:14px}

  .stage-init .rail-role,.stage-init .lang{opacity:0;transform:translateY(16px)}
  .stage-init.stage-on .rail-role,.stage-init.stage-on .lang{
    opacity:1;transform:none;
    transition:opacity .6s ease,transform .65s cubic-bezier(.2,.8,.3,1);
  }
  .stage-init.stage-on .lang{transition-delay:.12s}
}
@media (prefers-reduced-motion:reduce){
  .stage-init .rail-role,.stage-init .lang{opacity:1;transform:none}
}

/* ── Линия прогресса прокрутки ──────────────────────────────── */
.scroll-line{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:30;
  background:linear-gradient(90deg,var(--accent),#C6614C);
  transform:scaleX(0);transform-origin:left;
  opacity:0;transition:opacity .4s ease;
  pointer-events:none;
}

/* ── Холст географии ────────────────────────────────────────── */
.geo-canvas-wrap{position:relative;margin:0 0 34px;display:none}
@media (min-width:780px){.geo-canvas-wrap{display:block}}
#geoCanvas{display:block;width:100%;height:390px}
.geo-legend{
  display:flex;gap:22px;flex-wrap:wrap;margin:12px 0 0;
  font-size:12px;color:var(--ink-3);
}
.geo-legend b{color:var(--accent);font-weight:600}

/* Когда холст показан — список остаётся, но становится справочным */
@media (min-width:780px){
  .geo-list{opacity:.92}
  .geo .geo-cap{margin-bottom:20px}
}
@media print{
  .scroll-line{display:none}
  .geo-canvas-wrap{display:none}
  body::after{display:none}
  .hero-v2{min-height:0;padding:0 0 14px;display:block}
  .hero-v2 h1{font-size:24pt;line-height:1.02}
  .hero-tag,.hero-lede{opacity:1;transform:none;font-size:9.4pt;margin-top:8px}
  .hero-rule{display:none}
  .kin .k{opacity:1;transform:none}
  .portrait{box-shadow:none}
  .hero-v2 h1,.blk > h2,.rail-name,.major h3,.geo-city{text-shadow:none}
}