@charset "utf-8";

/* =========================================================================
   Портфолио Митяевой Ксении — базовые стили
   Mobile-first. Десктопные раскладки подключаются медиазапросами min-width.
   ========================================================================= */

/* ---------- Токены ---------- */
:root {
  --ink: #0a0a0a;
  --graphite: #121212;
  --paper: #f4f4f1;
  --muted: #8c8c86;
  --muted-2: #c9c9c2;
  --soft: #9c9c95;
  --lime: #b9f65a;
  --cyan: #00e5ff;
  --error: #ff5a5a;
  --error-soft: #ff9a9a;

  --line: rgba(244, 244, 241, .14);
  --line-2: rgba(244, 244, 241, .22);
  --line-3: rgba(244, 244, 241, .3);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pad: 20px;
  --maxw: 1440px;
}

@media (min-width: 768px) {
  :root { --pad: clamp(28px, 4vw, 64px); }
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; border: 0; }

/* Атрибут hidden должен побеждать любые авторские display-правила:
   иначе блоки состояний формы показываются пустыми */
[hidden] { display: none !important; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--cyan); }

button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Ссылка «к содержимому» для клавиатуры */
.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 14px 20px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  transition: top .18s;
}
.skip-link:focus { top: 12px; color: var(--ink); }

/* ---------- Каркас ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--lime { color: var(--lime); }
.eyebrow--cyan { color: var(--cyan); }

.h-display {
  font-family: var(--display);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.stroke-text {
  color: transparent;
  /* На мелком кегле контур в 2px съедает просветы и буквы слипаются */
  -webkit-text-stroke: 1.4px var(--paper);
}
@media (min-width: 768px) {
  .stroke-text { -webkit-text-stroke-width: 2px; }
}
.stroke-text--lime { -webkit-text-stroke-color: var(--lime); }
.stroke-text--cyan { -webkit-text-stroke-color: var(--cyan); }

/* Запасной вариант, если -webkit-text-stroke не поддержан: текст не исчезает */
@supports not (-webkit-text-stroke: 1px red) {
  .stroke-text { color: var(--paper); }
  .stroke-text--lime { color: var(--lime); }
  .stroke-text--cyan { color: var(--cyan); }
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 22px;
  border: 2px solid transparent;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn .arr { font-family: var(--mono); }

.btn--lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 600;
}
.btn--lime:hover { background: var(--ink); color: var(--lime); }

.btn--ghost {
  border: 1px solid var(--line-3);
  color: var(--paper);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------- Зерно и курсор ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url(../../img/grain.png);
  background-size: 160px 160px;
  opacity: .3;
}

.cursor-dot, .cursor-ring {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
}
.cursor-dot {
  z-index: 70;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--lime);
  transition: opacity .2s;
}
.cursor-ring {
  z-index: 69;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid rgba(185, 246, 90, .55);
  transition: opacity .2s, width .18s, height .18s, margin .18s;
}
/* На сенсорных экранах курсора нет */
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* =========================================================================
   01. Баннер
   ========================================================================= */
.banner {
  position: relative;
  height: 78vh;
  height: 78svh;
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
}

.banner__bg {
  position: absolute;
  inset: -6% -2% -10%;
  background-image: url(../../img/banner.jpg);
  background-size: cover;
  background-position: 50% 42%;
  will-change: transform;
}

.banner__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(10, 10, 10, .55) 0%,
      rgba(10, 10, 10, .08) 30%,
      rgba(10, 10, 10, .5) 74%,
      var(--ink) 100%);
}

.banner__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 10, 10, .55) 1.4px, transparent 1.5px);
  background-size: 7px 7px;
  opacity: .45;
}

.banner__char, .banner__shadow {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: min(430px, 88vw);
  height: auto;
  transform: translateX(-50%);
  will-change: transform;
}
.banner__char { z-index: 3; }
.banner__shadow {
  z-index: 2;
  filter: brightness(0) blur(14px);
  opacity: .62;
}

.banner__marks {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px var(--pad);
  pointer-events: none;
}
.banner__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.banner__row--bottom { align-items: flex-end; }
.banner__mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.banner__mark--lime { color: var(--lime); }
.banner__mark--muted { color: var(--muted); text-transform: none; }

.banner__scroll {
  display: flex;
  align-items: center;
  gap: 10px;
}
.banner__rule {
  display: block;
  width: 36px; height: 1px;
  background: var(--lime);
}
.banner__scroll span:last-child { animation: bob 2.4s ease-in-out infinite; }

@media (min-width: 768px) {
  .banner { height: 86vh; height: 86svh; min-height: 600px; }
  .banner__char, .banner__shadow { bottom: -7%; width: min(660px, 46vw); }
  .banner__marks { padding: 26px var(--pad) 22px; }
  .banner__mark { font-size: 13px; }
  .banner__rule { width: 64px; }
}

/* =========================================================================
   02. Знакомство
   ========================================================================= */
.intro {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(40px, 9vw, 110px) var(--pad) clamp(36px, 7vw, 90px);
}

.intro__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(185, 246, 90, .45);
  background: rgba(185, 246, 90, .08);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
}
.intro__badge i {
  width: 9px; height: 9px;
  background: var(--lime);
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}

.intro__name {
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 13.5vw, 138px);
  line-height: .84;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.intro__name span { display: block; }
.intro__name .fill {
  color: var(--paper);
  text-shadow: 6px 6px 0 rgba(185, 246, 90, .92);
}

.intro__role {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.intro__bio {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--muted-2);
  text-wrap: pretty;
}

.intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.intro__art {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 36px;
  margin-bottom: 30px;
}
.intro__sticker {
  position: relative;
  width: min(420px, 92%);
  transform: rotate(-2.5deg);
  filter: drop-shadow(14px 16px 0 rgba(0, 0, 0, .85));
}
.intro__halftone {
  position: absolute;
  inset: -6% -8% -4%;
  background-image: radial-gradient(circle, rgba(185, 246, 90, .5) 1.3px, transparent 1.4px);
  background-size: 11px 11px;
  opacity: .5;
}
.intro__face, .intro__eyes {
  display: block;
  width: 100%;
  height: auto;
}
.intro__face { position: relative; }
.intro__eyes {
  position: absolute;
  left: 0; top: 0;
  will-change: transform;
}
.intro__hint {
  position: absolute;
  right: 0;
  bottom: -22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 1000px) {
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
  .intro__badge { grid-area: 1 / 1; justify-self: start; }
  .intro__name  { grid-area: 2 / 1; }
  .intro__role  { grid-area: 3 / 1; margin-top: 30px; }
  .intro__bio   { grid-area: 4 / 1; }
  .intro__links { grid-area: 5 / 1; margin-top: 34px; }
  .intro__art   { grid-area: 1 / 2 / 6 / 3; margin-top: 0; margin-bottom: 0; align-self: center; }
  .intro__name .fill { text-shadow: 9px 9px 0 rgba(185, 246, 90, .92); }
  .intro__sticker { filter: drop-shadow(20px 22px 0 rgba(0, 0, 0, .85)); }
  .intro__hint { right: -4px; bottom: -6px; }
}

/* =========================================================================
   03. Растр ↔ Вектор
   ========================================================================= */
.split { position: relative; margin-top: clamp(28px, 5vw, 80px); }

.split__head {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.split__title {
  margin-top: 10px;
  font-size: clamp(30px, 8vw, 72px);
  line-height: .9;
  letter-spacing: -.03em;
}
.split__title i { font-style: normal; color: var(--lime); }
.split__hint {
  max-width: 34ch;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* На телефоне раскол ГОРИЗОНТАЛЬНЫЙ по оси Y: растр сверху, вектор снизу.
   Делить 390px по вертикали нельзя — заголовок и список не помещаются в
   половину ширины и рвутся посреди слова. Тянется только сам бегунок,
   иначе жест конфликтует с прокруткой страницы. */
.split__box {
  --split: 50%;
  position: relative;
  height: 620px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
}

/* Верхняя половина — растр */
.split__raster,
.split__raster-bg,
.split__raster-veil,
.split__raster-dots {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 calc(100% - var(--split)) 0);
}
.split__raster-bg {
  background-image: url(../../img/art-2.jpg);
  background-size: cover;
  background-position: 50% 30%;
  filter: saturate(1.05);
}
.split__raster-veil {
  background: linear-gradient(90deg,
      rgba(10, 10, 10, .88) 0%,
      rgba(10, 10, 10, .64) 60%,
      rgba(10, 10, 10, .35) 100%);
}
.split__raster-dots {
  background-image: radial-gradient(circle, rgba(10, 10, 10, .7) 1.6px, transparent 1.7px);
  background-size: 6px 6px;
  opacity: .55;
}
.split__raster {
  padding: clamp(22px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Нижняя половина — вектор */
.split__vector,
.split__vector-bg,
.split__vector-grid,
.split__vector-char {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--split) 0 0 0);
}
.split__vector-bg { background: #0e1412; }
.split__vector-grid {
  background-image:
    linear-gradient(rgba(244, 244, 241, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 244, 241, .06) 1px, transparent 1px);
  background-size: 44px 44px;
}
.split__vector-char { pointer-events: none; }
.split__vector-char img {
  position: absolute;
  /* На телефоне список прижат вправо — персонажа уводим влево, иначе текст
     ложится поверх яркой заливки и теряет контраст */
  left: -4%;
  bottom: 0;
  width: min(210px, 44vw);
  height: auto;
}
.split__vector {
  /* Слой с текстом начинается прямо от линии раздела и раскрывается сверху
     вниз по мере её подъёма. Сдвигаем его через top, а не padding-top:
     процентный padding считается от ШИРИНЫ контейнера, а не от высоты. */
  top: var(--split);
  clip-path: none;
  padding: 20px clamp(22px, 5vw, 56px) clamp(22px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: right;
}

.split__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.split__word {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 11vw, 112px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.split__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  color: #e6e6e0;
}
.split__list li { display: flex; gap: 10px; align-items: baseline; }
.split__list--right li { justify-content: flex-end; color: var(--paper); }
.split__list .sl {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
}
.split__list--right .sl { color: var(--cyan); }
.split__vector .split__list { margin-top: 24px; }

.split__handle {
  position: absolute;
  left: 0; right: 0;
  top: var(--split);
  height: 2px;
  background: var(--lime);
  z-index: 5;
  pointer-events: none;
}
.split__grip {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  padding: 0;
  border: 2px solid var(--lime);
  background: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--lime);
  cursor: row-resize;
  pointer-events: auto;
  touch-action: none;
  transform: rotate(90deg);
}

/* С 768px раскол становится ВЕРТИКАЛЬНЫМ: растр слева, вектор справа */
@media (min-width: 768px) {
  .split__box {
    --split: 52%;
    height: clamp(460px, 52vw, 640px);
    cursor: col-resize;
    touch-action: pan-y;
  }
  .split__raster,
  .split__raster-bg,
  .split__raster-veil,
  .split__raster-dots { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
  .split__raster { justify-content: space-between; }

  .split__vector-bg,
  .split__vector-grid,
  .split__vector-char { clip-path: inset(0 0 0 var(--split)); }
  .split__vector-char img { left: 58%; width: min(330px, 24vw); }
  .split__vector {
    top: 0;
    clip-path: inset(0 0 0 var(--split));
    padding: clamp(22px, 5vw, 56px);
  }

  .split__handle {
    top: 0; bottom: 0;
    left: var(--split);
    right: auto;
    width: 2px;
    height: auto;
  }
  .split__grip {
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    font-size: 15px;
    cursor: col-resize;
    transform: none;
  }

  .split__hint { font-size: 12px; }
  .split__list { font-size: 17px; }
}

/* Инструменты */
.tools {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 44px) var(--pad) 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  flex-wrap: wrap;
}
.tools__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 100%;
}
.tools img {
  width: 44px; height: 44px;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s, opacity .2s;
}
.tools img:hover { filter: none; opacity: 1; }

@media (min-width: 768px) {
  .tools__label { flex: 0 0 auto; }
  .tools img { width: 52px; height: 52px; }
}

/* =========================================================================
   04. Три карточки
   ========================================================================= */
.dirs {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(52px, 9vw, 130px) var(--pad) clamp(36px, 7vw, 90px);
}
.dirs__grid {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}

.card {
  position: relative;
  display: block;
  padding: 20px 20px 24px;
  background: var(--graphite);
  border: 1px solid rgba(244, 244, 241, .12);
  color: var(--paper);
  transition: transform .25s, border-color .25s;
}
.card:hover, .card:focus-visible {
  color: var(--paper);
  border-color: var(--lime);
}
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  margin-top: -46px;
  border: 1px solid rgba(244, 244, 241, .12);
}
.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__media--1 { aspect-ratio: 4 / 3; }
/* Логотип «Сонви» — небольшая марка на чёрном поле: без приближения
   обложка карточки читается как пустой прямоугольник */
.card__media--zoom img { transform: scale(1.45); }
.card__media--2 { aspect-ratio: 1 / 1; }
.card__media--3 { aspect-ratio: 3 / 4; }
.card__over {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
}
.card__over--vector { right: -8%; bottom: -6%; width: 58%; }
.card__over--holder {
  left: -6%; bottom: 6%; width: 74%;
  transform: rotate(-6deg);
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .7));
}
.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
}
.card__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--lime);
}
.card__name {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}
.card__sub {
  margin-top: 10px;
  font-size: 15px;
  color: var(--soft);
}
.card__arr {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--lime);
  transition: transform .25s;
}
.card:hover .card__arr { transform: translate(3px, -3px); }

@media (min-width: 1000px) {
  .dirs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-top: 26px;
  }
  .card--1 { margin-top: 42px; transform: rotate(-1.2deg); }
  .card--2 { transform: rotate(.8deg); }
  .card--3 { margin-top: 76px; transform: rotate(-.6deg); }
  .card--1:hover, .card--1:focus-visible { transform: rotate(-1.2deg) translateY(-12px); }
  .card--2:hover, .card--2:focus-visible { transform: rotate(.8deg) translateY(-12px); }
  .card--3:hover, .card--3:focus-visible { transform: rotate(-.6deg) translateY(-12px); }
}

/* =========================================================================
   05. Вход в «Примеры работ»
   ========================================================================= */
.works-intro {
  position: relative;
  min-height: clamp(280px, 62vw, 520px);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: 40px;
}
.works-intro__bg {
  position: absolute;
  inset: 0;
  background-image: url(../../img/gallery-intro.jpg);
  background-size: cover;
  background-position: 50% 34%;
}
.works-intro__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(10, 10, 10, .94) 0%,
      rgba(10, 10, 10, .76) 45%,
      rgba(10, 10, 10, .3) 100%);
}
.works-intro__inner {
  position: relative;
  width: 100%;
}
.works-intro__title {
  margin-top: 14px;
  font-size: clamp(40px, 13.2vw, 132px);
  line-height: .86;
  letter-spacing: -.04em;
}

/* =========================================================================
   06. Сцена «Примеры работ»
   Базовое состояние (мобильное и без JS) — спокойная вертикальная лента.
   Класс .scene--3d добавляет JS только на десктопе без reduced-motion.
   ========================================================================= */
.scene { position: relative; background: var(--ink); }

.scene__sticky { position: relative; }

.scene__plane {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: clamp(28px, 7vw, 60px) var(--pad);
  max-width: 760px;
  margin-inline: auto;
}

.work {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .65);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}
.work img { display: block; width: 100%; height: auto; }

/* Прятать до появления можно только при живом JS: без него всё видно сразу */
.js .work {
  opacity: 0;
  transform: translateY(26px) rotate(var(--tilt, 0deg));
  transition: opacity .6s ease, transform .6s ease;
}
.js .work.is-in { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }

.work:nth-child(odd)  { --tilt: -1.6deg; }
.work:nth-child(even) { --tilt: 1.4deg; }

.scene__phases { display: none; }

.scene__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 760px;
  margin-inline: auto;
  padding: 0 var(--pad) clamp(28px, 6vw, 56px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.scene__meta b { color: var(--lime); font-weight: 400; }

.scene__bar { display: none; }

/* --- Режим 3D (только десктоп) --- */
.scene--3d { height: 520vh; }

.scene--3d .scene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scene--3d .scene__stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}
.scene--3d .scene__plane {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.scene--3d .work {
  position: absolute;
  left: 50%; top: 50%;
  width: auto;
  opacity: 1;
  transition: none;
  will-change: transform;
}
.scene--3d .work.is-in { transform: none; }

.scene--3d .scene__phases {
  position: absolute;
  right: clamp(18px, 2.5vw, 38px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.scene__phase { transition: color .2s; }
.scene__phase.is-on { color: var(--lime); }

.scene--3d .scene__meta {
  position: absolute;
  left: clamp(18px, 2.5vw, 38px);
  bottom: clamp(20px, 3vw, 40px);
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.scene--3d .scene__bar {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(244, 244, 241, .1);
}
.scene__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lime);
  will-change: width;
}

/* =========================================================================
   07. Связь
   ========================================================================= */
.contact {
  position: relative;
  padding: clamp(52px, 9vw, 130px) 0 clamp(36px, 5vw, 80px);
}
.contact__dots {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 120px;
  background-image: radial-gradient(circle, rgba(185, 246, 90, .35) 1.4px, transparent 1.5px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.contact__inner { position: relative; }
.contact__title {
  margin-top: 16px;
  font-size: clamp(30px, 9.8vw, 124px);
  line-height: .86;
  letter-spacing: -.04em;
}
.contact__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(30px, 5vw, 72px);
  align-items: start;
}

.field {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field + .field { margin-top: 24px; }
.field input, .field textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: var(--graphite);
  border: 1px solid rgba(244, 244, 241, .18);
  color: var(--paper);
  font-family: var(--text);
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .2s;
}
.field input { min-height: 56px; padding: 0 18px; }
.field textarea { padding: 16px 18px; line-height: 1.6; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--lime); outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.field ::placeholder { color: #6e6e69; }

.tags__label { margin: 26px 0 12px; }
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Поле после набора тегов — соседний .field, поэтому правило .field + .field
   до него не достаёт */
.tags + .field { margin-top: 26px; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: #e6e6e0;
  font-size: 16px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.tag:hover { border-color: var(--lime); }
.tag[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 600;
}

.form__error {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--error);
  background: rgba(255, 90, 90, .1);
  color: var(--error-soft);
  font-size: 15px;
}
.form__error b { font-family: var(--mono); font-weight: 400; }

.form__submit {
  width: 100%;
  min-height: 58px;
  margin-top: 24px;
  font-size: 17px;
  position: sticky;
  bottom: 14px;
}

.form__ok {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--lime);
  color: var(--ink);
}
.form__ok a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); display: inline-block; margin-top: 14px; }
.form__ok a:hover { color: var(--ink); }
.form__ok .t {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.form__ok .m { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.form__ok .s { margin-top: 8px; font-size: 15px; line-height: 1.5; }

.form__fallback {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--cyan);
  background: rgba(0, 229, 255, .08);
}
.form__fallback .t {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.form__fallback p { margin-top: 10px; font-size: 16px; line-height: 1.5; }
.form__fallback textarea {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--ink);
  border: 1px solid rgba(244, 244, 241, .2);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.form__fallback .row { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.btn--cyan { border: 1px solid var(--cyan); color: var(--cyan); min-height: 48px; }
.btn--cyan:hover { background: var(--cyan); color: var(--ink); }

.direct { display: flex; flex-direction: column; gap: 14px; }
.direct__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 14px 22px;
  background: var(--graphite);
  border: 1px solid rgba(244, 244, 241, .16);
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s;
}
.contact-card:hover { border-color: var(--lime); color: var(--paper); }
.contact-card--ig:hover { border-color: var(--cyan); }
.contact-card .k {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card .v { display: block; margin-top: 5px; font-size: 18px; font-weight: 600; }
.contact-card .act {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  flex: 0 0 auto;
}
.contact-card--ig .act { color: var(--cyan); }

.direct__char {
  width: min(240px, 70%);
  height: auto;
  margin-top: 18px;
  align-self: flex-end;
  transform: rotate(3deg);
  filter: drop-shadow(14px 16px 0 rgba(0, 0, 0, .85));
}

@media (min-width: 1000px) {
  .contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .form__submit { width: auto; position: static; padding-inline: 26px; }
  .field input, .field textarea { font-size: 17px; }
}

/* =========================================================================
   Подвал
   ========================================================================= */
.site-footer { border-top: 1px solid var(--line); overflow: hidden; }

.marquee {
  display: flex;
  width: max-content;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
  animation: mq 26s linear infinite;
}
.marquee span { padding-right: 40px; white-space: nowrap; }

.site-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 64px) var(--pad);
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 10vw, 128px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(244, 244, 241, .55);
}
@supports not (-webkit-text-stroke: 1px red) {
  .wordmark { color: rgba(244, 244, 241, .55); }
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer__links { display: flex; gap: 6px 22px; flex-wrap: wrap; }
/* Область нажатия не меньше 48px — ссылки подвала это отдельные цели */
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* =========================================================================
   Лайтбокс
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 6, .96);
  display: flex;
  flex-direction: column;
}
.lightbox[hidden] { display: none; }
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px var(--pad);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lightbox__counter { color: var(--lime); }
.lightbox__body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 20px;
}
.lightbox__img {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(244, 244, 241, .18);
}
.lb-btn {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--line-3);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 18px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lb-btn:hover { border-color: var(--lime); color: var(--lime); }
.lb-btn--close { width: auto; min-width: 48px; font-size: 16px; padding: 0 14px; }

@media (min-width: 768px) {
  .lightbox__body { gap: clamp(8px, 2vw, 24px); padding: 0 clamp(12px, 2vw, 28px) 28px; }
  .lb-btn { width: 56px; height: 56px; }
  .lb-btn--close { height: 48px; }
}

/* =========================================================================
   Внутренние страницы
   ========================================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 10, .92);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.topbar__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 8px var(--pad);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topbar__back:hover { color: var(--lime); }
.topbar__mid {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.topbar__cta {
  min-height: 48px;
  padding: 10px 18px;
  font-size: 15px;
}
@media (min-width: 900px) {
  .topbar__mid { display: block; }
}

.page-hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(30px, 6vw, 80px) var(--pad) clamp(26px, 4vw, 56px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.page-hero__title {
  margin-top: 14px;
  font-size: clamp(48px, 16vw, 150px);
  line-height: .84;
  letter-spacing: -.04em;
}
.page-hero__lead {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted-2);
  text-wrap: pretty;
}
.page-hero__note {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(244, 244, 241, .2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-hero__art { position: relative; }
.page-hero__art img.main {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(244, 244, 241, .16);
}
.page-hero__art img.over {
  position: absolute;
  right: -4%;
  bottom: -12%;
  width: 42%;
  height: auto;
  filter: drop-shadow(14px 16px 0 rgba(0, 0, 0, .85));
}
@media (min-width: 900px) {
  .page-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-hero__lead { font-size: 18px; }
}

.works-stack {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 96px) var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 64px);
}
.work-figure {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.work-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(244, 244, 241, .16);
}
/* Предметы с прозрачным фоном: подложка вместо рамки по пустоте */
.work-figure--object img {
  border: 0;
  background: var(--graphite);
  padding: 6%;
  border: 1px solid rgba(244, 244, 241, .1);
}
.wf-cap {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wf-cap .go { color: var(--lime); transition: color .2s; }
.work-figure:hover .wf-cap .go { color: var(--cyan); }
@media (min-width: 900px) {
  .work-figure--inset-right { max-width: 78%; align-self: flex-end; }
  .work-figure--inset-left { max-width: 88%; }
  .wf-cap { font-size: 12px; }
}

.other-dirs { border-top: 1px solid var(--line); }
.other-dirs__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 64px) var(--pad);
}
.other-dirs__grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.other-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: var(--graphite);
  border: 1px solid rgba(244, 244, 241, .12);
  color: var(--paper);
  transition: border-color .2s;
}
.other-card:hover { border-color: var(--lime); color: var(--paper); }
.other-card img {
  width: 92px; height: 92px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--ink);
}
.other-card .n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--lime); }
.other-card .t {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 5vw, 32px);
  text-transform: uppercase;
}
.other-card .d { display: block; margin-top: 6px; font-size: 15px; color: var(--soft); }
@media (min-width: 700px) {
  .other-dirs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
  .other-card img { width: 104px; height: 104px; }
}

.cta-strip { border-top: 1px solid var(--line); }
.cta-strip__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(34px, 6vw, 96px) var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.cta-strip__title {
  font-size: clamp(30px, 9vw, 92px);
  line-height: .88;
  letter-spacing: -.04em;
  max-width: 16ch;
}
.cta-strip__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(280px, 100%);
  flex: 1 1 280px;
}
.cta-strip__links .btn { justify-content: space-between; min-height: 58px; font-size: 17px; }

.page-footer { border-top: 1px solid var(--line); }
.page-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(22px, 3vw, 48px) var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   Анимации и служебное
   ========================================================================= */
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Появление блоков. Скрываем только при живом JS — иначе контент пропал бы
   насовсем, если скрипт не загрузился или IntersectionObserver промолчал. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Тяжёлые секции не рендерятся, пока не нужны */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Плавный переход между страницами там, где поддержан */
@view-transition { navigation: auto; }

/* ---------- Уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, .js .work { opacity: 1 !important; transform: none !important; }
  .work { --tilt: 0deg; }
  .intro__sticker { transform: none; }
  .card--1, .card--2, .card--3 { transform: none; margin-top: 0; }
  .direct__char { transform: none; }
  @view-transition { navigation: none; }
}