/* ===== ЭКРАН 3 — ОПЫТ =====
   Макет 1440 × 950 (сетка Тильды 1200 + поля по 120), масштабируется под ширину окна.
   Координаты — в единицах макета: calc(N * var(--e)). При окне 1440 px совпадает с Тильдой. */

.exp {
  /* — настройки — */
  --count-grad: linear-gradient(90deg, #ff4fd8, #ff8cf0, #7a6cff, #4fd8ff); /* цифры счётчиков */
  --line-dim: 0.55;        /* яркость линии карьеры в покое */
  --logo-dim: 0.3;         /* прозрачность логотипов, которые «не в этом году» */
  --logo-hover: 1.12;      /* увеличение логотипа при наведении */

  /* — банка с мозгом летит вниз со стыка экранов 2 и 3 и плавно тормозит к экрану 4 (js/experience.js) — */
  --brain-from: -330;      /* откуда стартует (ед. макета; минус — выше начала экрана, на экране 2) */
  --brain-speed: 0.79;     /* начальная скорость спуска относительно прокрутки */
  --brain-stop: 1700;      /* за сколько ед. прокрутки полностью останавливается (≈ к началу экрана 4) */

  container-type: inline-size;
  position: relative;
  overflow-x: clip;        /* по вертикали не обрезаем — банка заходит на экран 2 */
  background: var(--bg);
}

.exp__stage {
  --e: calc(100cqw / 1440);
  --u: var(--e); /* курсор и выделение считают размеры в --u */
  position: relative;
  height: calc(950 * var(--e));
}

.exp__stage > *,
.career > *,
.career__logos > li {
  position: absolute;
  left: calc(var(--x, 0) * var(--e));
  top: calc(var(--y, 0) * var(--e));
  width: calc(var(--w) * var(--e));
  margin: 0;
}

/* — заголовок «Опыт» + глитч-«Ы» — */
.exp__title { --x: 118; --y: 118; --w: 420; height: calc(113 * var(--e)); }
.exp__title img { width: 100%; height: 100%; object-fit: cover; }
.exp__y { --x: 294; --y: 97; --w: 196; height: calc(172 * var(--e)); object-fit: cover; }

/* — счётчики — */
.exp__panel {
  --x: 530; --y: 148; --w: 847;
  height: calc(124 * var(--e));
  background: #181819;
  opacity: 0.5;
}
.exp__num {
  --y: 140; --w: 177;
  font-weight: 300;
  font-size: calc(80 * var(--e));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--count-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.exp__label {
  --w: 113;
  font-weight: 400;
  font-size: calc(17 * var(--e));
  line-height: 1;
  color: #F98DC8;
}

/* — мозг в банке: спускается при скролле со стыка экранов 2 и 3 (js/experience.js) — */
.exp__brain {
  --x: 1147; --y: var(--brain-from); --w: 294;
  height: calc(393 * var(--e));
  object-fit: cover;
  translate: 0 var(--ty, 0px);
  opacity: var(--brain-op, 1);
  pointer-events: none;    /* сквозь банку можно наводить на график */
  z-index: 4;              /* верхний слой экрана 3 — над графиком и карточками (выше только курсоры) */
  will-change: translate, opacity;
}

/* ===== КАРЬЕРНЫЙ ГРАФИК ===== */
.career {
  --x: 174; --y: 359; --w: 1091;
  height: calc(542 * var(--e));
}
.career__svg { --x: 0; --y: 0; --w: 1091; height: 100%; overflow: visible; }
.career__svg text { font-family: var(--font); font-weight: 300; }

.career__logos { --x: 0; --y: 0; --w: 1091; height: 100%; padding: 0; list-style: none; }
.career__logo {
  height: calc(var(--h) * var(--e));
  cursor: pointer;
  transform-origin: 30% 60%;
  transition: scale 0.25s cubic-bezier(.2,.9,.1,1), opacity 0.25s ease, filter 0.25s ease;
}
.career__logo img { width: 100%; height: 100%; object-fit: contain; }
.career__logo:focus-visible { outline: none; }

/* наведение на график: «не тот год» — приглушаем */
.career.is-scrubbing .career__logo:not(.is-active) { opacity: var(--logo-dim); }
/* наведение на логотип */
.career.is-focus .career__logo:not(.is-focus) { opacity: var(--logo-dim); }
.career__logo.is-focus { scale: var(--logo-hover); filter: drop-shadow(0 0 calc(10 * var(--e)) rgba(231, 85, 174, 0.55)); z-index: 2; }

/* до того как курсор нарисует график (js/experience.js) */
.career.is-pending .career__logo { opacity: 0; }

/* карточка — как комментарий в Figma */
.career__card {
  --w: 330;
  padding: calc(14 * var(--e)) calc(16 * var(--e)) calc(15 * var(--e));
  border-radius: calc(16 * var(--e)) calc(16 * var(--e)) calc(16 * var(--e)) calc(4 * var(--e));
  background: rgba(30, 28, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 calc(14 * var(--e)) calc(40 * var(--e)) rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: 300;
  font-size: calc(12 * var(--e));
  line-height: 1.5;
  opacity: 0;
  translate: 0 calc(8 * var(--e));
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.3s cubic-bezier(.2,.9,.1,1);
  z-index: 3;
}
.career__card.is-on { opacity: 1; translate: 0 0; }
.career__card.is-right { border-radius: calc(16 * var(--e)) calc(16 * var(--e)) calc(4 * var(--e)) calc(16 * var(--e)); }
.career__card b {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--e));
  margin-bottom: calc(4 * var(--e));
  font-weight: 500;
  font-size: calc(14 * var(--e));
}
.career__card b::before {
  content: "";
  flex: none;
  width: calc(16 * var(--e));
  height: calc(16 * var(--e));
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue));
}
.career__card em {
  display: block;
  margin-bottom: calc(8 * var(--e));
  font-style: normal;
  color: #F98DC8;
}

/* перо вместо стрелки, пока курсор рисует линию */
.intro-cursor .cursor-pen { display: none; }
.intro-cursor.is-pen .cursor-arrow { display: none; }
.intro-cursor.is-pen .cursor-pen {
  display: block;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: var(--pink);
  stroke: #fff;
  stroke-width: 1.2;
  translate: 0 calc(-18 * var(--u)); /* кончик пера — в точке курсора */
}