/* ============================================================
   Компетенции – закрепленная сцена между блоком кейсов и финальной строкой.
   Механика перенесена с bridge.surf (разбор – в каталоге анимаций,
   demos/competence-cards): экран замирает, плиты проходят снизу вверх с
   поворотом в объеме, плиту можно раскрутить мышью.

   Тон – тон страницы (#1f1e1f), плиты – теплый беж (цвет задан в
   js/competence.js, материал plane). Стыка с соседними блоками не видно:
   сверху светлая панель кончается, снизу тем же тоном продолжается
   финальная строка.
   ============================================================ */

.competence {
  position: relative;
  z-index: 2;                      /* выше вейла перехода (z-index 1) */
  background: #1f1e1f;
  --cmp-fg: #f5f5f5;

  /* раскладка сцены – числа оригинала */
  --stage-width: 300px;
  --stage-mask: 86px;
  --stage-peek: 58px;
  --stage-card-gap: 28dvh;
  --layout-gap: clamp(56px, 7dvw, 120px);
  --pad-x: clamp(12px, 1.3vw, 20px);   /* как боковые поля панели кейсов */

  /* запас полотна под кувырок плиты: она выходит за колонку сцены */
  --safe-x: 300px;
  --safe-y: 240px;

  --edge-mask: linear-gradient(to bottom, transparent 0, #00000024 18px, #00000094 52px,
    #000 var(--stage-mask), #000 calc(100% - var(--stage-mask)), #00000094 calc(100% - 52px),
    #00000024 calc(100% - 18px), transparent 100%);
}

/* 600dvh на шесть плит: закрепленный экран занимает 100dvh, на проезд остается
   пять экранов – ровно по экрану на переход между соседними плитами, как в
   оригинале (там пять плит на 500dvh). Меньше – плиты начинают частить */
.competence__scroll { position: relative; width: 100%; height: 600dvh; }
.competence__sticky { position: sticky; top: 0; width: 100%; }
.competence__screen { position: relative; height: 100dvh; max-height: 1600px; }

.competence__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stage-width) minmax(0, 1fr);
  align-items: center;
  gap: var(--layout-gap);
  height: 100%; min-height: 0;
  max-width: 1456px; margin-inline: auto;
  /* viewport-fit=cover рисует страницу под вырезом и скругленными углами.
     env() на устройствах без выреза равен нулю, поэтому max() ничего не
     меняет на обычных экранах и отводит поля только там, где вырез есть */
  padding-inline: max(var(--pad-x), env(safe-area-inset-left))
                  max(var(--pad-x), env(safe-area-inset-right));
}

.competence__lead { z-index: 2; justify-self: start; min-width: 0; }
.competence__slot { z-index: 1; justify-self: center; height: 100%; position: relative; }
.competence__tail { z-index: 2; justify-self: end; }

/* ---------- тексты: шрифт и тон сайта ---------- */
.competence__head,
.competence__closing,
.competence__desc {
  font-family: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;
  margin: 0;
}
/* описание активной плиты – только для узких экранов */
.competence__desc { display: none; }
.competence__head {
  color: var(--cmp-fg);
  font-size: clamp(34px, 3.4vw, 56px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.03em;
}
/* Правая строка НЕ полужирная: в оригинале это обычное начертание,
   полужирный спорил с заголовком слева */
.competence__closing {
  max-width: 336px;
  color: rgba(245, 245, 245, .72);
  font-size: 20px; font-weight: 400; line-height: 26px; letter-spacing: -.01em;
}

/* ---------- сцена ---------- */
.competence__shell {
  width: var(--stage-width); height: 100%; position: relative;
  max-width: calc(100dvw - var(--pad-x) * 2);
}
/* объем: полотно вылезает на запас, мягкие края уходят на само полотно */
.competence__shell[data-renderer="3d"] {
  contain: layout style; overflow: visible; cursor: grab; touch-action: pan-y;
}
.competence__shell[data-renderer="3d"]:active { cursor: grabbing; }
.competence__shell[data-renderer="3d"] canvas {
  position: absolute;
  top: calc(var(--safe-y) * -1); left: calc(var(--safe-x) * -1);
  width: calc(100% + var(--safe-x) * 2); height: calc(100% + var(--safe-y) * 2);
  -webkit-mask-image: var(--edge-mask); mask-image: var(--edge-mask);
}
/* плоский путь без WebGL: маска на самой сцене, полотно по ее размеру */
.competence__shell[data-renderer="2d"] {
  contain: layout paint style;
  -webkit-mask-image: var(--edge-mask); mask-image: var(--edge-mask);
}
.competence__shell[data-renderer="2d"] canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.competence__shell[data-renderer="2d"] canvas[data-model] { display: none; }

.competence__shell canvas { display: block; }

/* высота этого элемента = зазор из --cmp-gap, его и читает js/competence.js */
.competence__gap-probe {
  position: absolute; top: 0; left: 0; width: 0; height: var(--cmp-gap, 88px);
  visibility: hidden; pointer-events: none;
}

/* Полотно в объемном режиме намеренно вылезает за свою рамку на запас
   (--safe-x / --safe-y выше) – так мягкие края ложатся на само полотно. Но
   вылет уходил ВВЕРХ, на блок проектов, и накрывал нижнюю часть двух карточек
   вместе с кнопкой «Исследовать»: замер показал перехват в точках 0.85 высоты
   у карточек «цифровая система» и «когнитивная архитектура» – они перестали
   нажиматься. Полотно рисует картинку и само событий не слушает: pointerdown,
   pointermove и pointerup висят на .competence__shell (js/competence.js).
   Поэтому снимаем с полотна прием мыши – вращение плит остается, а клики по
   карточкам выше больше не перехватываются. */
.competence__shell canvas { pointer-events: none; }

/* Полотно недоступно для чтения вслух, поэтому рядом лежит обычный список.
   В outro.css правило свое, на .outro – здесь нужно собственное */
.competence .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- узкие экраны: плиты едут по горизонтали ---------- */
@media (max-width: 1099px) {
  .competence {
    --stage-width: min(240px, calc(100dvw - 32px));
    --stage-mask: 54px;
    --stage-peek: clamp(38px, 11dvw, 48px);
    --stage-card-gap: 45dvw;
    /* Зазор от плиты до подписи. Высота сцены считается из него, поэтому
       размер плиты от этого не меняется */
    --cmp-gap: clamp(84px, 14dvh, 158px);
    --plate-h: clamp(140px, 19dvh, 260px);
    --layout-gap: 0;          /* разрывы строк задаем отступами ниже, поштучно */
    --pad-x: 16px;
    --safe-x: 140px; --safe-y: 120px;
    --edge-mask: linear-gradient(to right, transparent 0, #00000024 12px, #00000094 32px,
      #000 var(--stage-mask), #000 calc(100% - var(--stage-mask)), #00000094 calc(100% - 32px),
      #00000024 calc(100% - 12px), transparent 100%);
  }
  /* Шапка сайта закреплена сверху и накрывала заголовок блока: когда экран
     залипал, «Компетенции» уходили ровно под пилюлю меню. Отступ снимает это */
  .competence__screen { padding-top: var(--nav-h, 72px); }

  /* Заголовок сверху, а лента с подписью и описанием прижата к НИЗУ блока:
     пустая вторая строка забирает весь остаток, поэтому воздух собирается
     между «Картой компетенций» и плитами, а не под текстом. Нижний отступ
     держит последнюю строку описания над краем экрана */
  .competence__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    justify-items: center; align-content: stretch;
    padding-block: clamp(14px, 2.4dvh, 28px) clamp(20px, 4dvh, 40px);
  }
  .competence__lead { grid-row: 1; }
  .competence__slot { grid-row: 3; }
  .competence__tail { grid-row: 4; }
  /* Описание идет вплотную за подписями: подпись заканчивается на 18 px выше
     низа сцены, этот зазор и остается */
  .competence__tail { margin-top: 0; }
  /* Текст поднят к ленте: зазор от ленты до описания 70 px вместо прежних 106
     (ровно в 1.5 раза). Отдельный сдвиг для этого не нужен – место освободил
     отступ под шапку, который ужал среднюю строку сетки */
  .competence__lead, .competence__tail { justify-self: stretch; width: 100%; max-width: none; }
  .competence__closing { max-width: none; font-size: 17px; line-height: 23px; }
  .competence__head { font-size: clamp(28px, 7.4vw, 40px); }
  .competence__slot {
    display: flex; align-items: center; justify-content: center;
    width: 100dvw; margin-inline: calc(50% - 50dvw);
  }
  /* Плиты идут лентой, видно сразу несколько, под каждой только название –
     принцип оригинала. Высота чуть больше его 38dvh: там подпись в два
     коротких слова, а здесь названия компетенций длиннее */
  .competence__shell {
    width: 100dvw; max-width: 100dvw;
    /* Без предела в 100%: строка сетки теперь меряется по содержимому, и высота
       в процентах от нее схлопывала сцену в полоску */
    /* высота = плита + зазор до подписи + сама подпись (44) и центровка (36) */
    height: calc(var(--plate-h) + var(--cmp-gap) + 80px);
  }

  /* Оригинал на узком экране держит внизу отдельный текстовый блок, а под
     плитой – только короткую подпись. Тем же приемом сюда уезжает описание
     той компетенции, которая сейчас в центре ленты */
  .competence__closing { display: none; }
  /* Описание растянуто на всю ширину и уменьшено: так текст занимает меньше
     строк. Дальше сокращать нечем – это упирается в длину самой фразы,
     а не в верстку (210 знаков при 358 px не лягут в две строки читаемым кеглем) */
  /* Строка короче: во всю ширину экрана текст читался тяжело. Ширина взята
     как треть от прежней с запасом – примерно 1.5 раза */
  /* Выровнено по левому краю заголовка: блок начинается от того же поля сетки,
     что и «Карта компетенций». Центрирование сдвигало его вправо */
  .competence__desc {
    display: block;
    max-width: min(360px, calc(100dvw - 32px)); margin-inline: 0; text-align: left;
    color: rgba(245, 245, 245, .72);
    font-size: 13px; line-height: 18px;
    min-height: calc(18px * 6);          /* блок не прыгает при смене текста */
    transition: opacity .28s ease;
  }
}

/* Короткие экраны в альбомной ориентации: сцене не хватает высоты под
   заголовок, плиту и подпись разом – текст сверху убираем, оставляем плиты */
@media (max-width: 1099px) and (max-height: 520px) {
  .competence__lead, .competence__tail { display: none; }
  .competence__layout { grid-template-rows: minmax(0, 1fr); }
}