/* шрифты — со своего сервера (assets/fonts): те же файлы Inter и Playfair Display, что Google Fonts отдаёт Safari на Mac.
   Раньше Google отдавал Windows другой вариант файла, и шапка там выглядела иначе; плюс не ждём чужой сервер при загрузке */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }   /* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }   /* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }   /* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }   /* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }   /* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }   /* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }   /* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }   /* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }   /* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }   /* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }   /* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }   /* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }   /* cyrillic-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }   /* cyrillic */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }   /* greek-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }   /* greek */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }   /* vietnamese */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }   /* latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* latin */
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/playfair-display-cyrillic-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }   /* cyrillic */
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/playfair-display-vietnamese-italic.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }   /* vietnamese */
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/playfair-display-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }   /* latin-ext */
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/playfair-display-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* latin */

/* MOROZ — общие стили.
   Layout: контент слева, справа на всех страницах закреплена вертикальная вкладка «Проекты»,
   из-под неё выезжает список проектов с вертикальным превью. */
:root {
  --head-c: calc(30px + env(safe-area-inset-top, 0px));   /* линия, по которой центрированы логотип и кнопки шапки */
  --bg: #f4f4f4;   /* чуть сероватый фон */
  --fg: #0d0d0d;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --tab: #f2f2f2;            /* фон вкладки «Проекты» и кнопок */
  --ph: #d9d9d9;             /* заглушка вместо видео */
  --on-media: #ffffff;       /* текст поверх видео — одинаковый в обеих темах */
  --shade: rgba(0, 0, 0, .55);
  --scrim: rgba(13, 13, 13, .35);
  --ambient-dim: rgba(13, 13, 13, .25);  /* затемнение светящегося фона в рилсах */
  --glass: rgba(255, 255, 255, .14);     /* кнопки поверх тёмного фона */   /* затемнение страницы под открытым списком проектов */
  --font: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --tab-w: 0px;      /* боковой вкладки больше нет — кнопка «Проекты» в шапке */
  --btn-room: 240px; /* место справа в шапках под кнопки «Меню» и «Проекты» */
  --panel-w: 320px;   /* ширина списка проектов (с полем слева под изгиб) */
  --pad: clamp(8px, .875vw, 14px);   /* поля по бокам */
  --gutter: clamp(8px, .875vw, 14px);   /* промежуток между колонками сетки — как поля по бокам */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-gutter: stable; }   /* место под полосу прокрутки всегда занято: когда меню останавливает прокрутку и полоса пропадает, страница не прыгает вбок */
body { overflow-x: clip; }   /* страница не прокручивается вбок, если что-то выступает за край (облачко виджета VEWOO в карточке, наклон ленты); clip, а не hidden, — липкие блоки работают */
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  padding-right: calc(var(--tab-w) + env(safe-area-inset-right, 0px));
  text-transform: lowercase;   /* весь текст строчными; кроме названий проектов (см. конец файла) */
  letter-spacing: -.045em;   /* единый трекинг по всему сайту — как в меню */
}
/* трекинг −.045em у каждого элемента от его собственного кегля: в em он наследуется уже готовыми пикселями от body (−0,675px),
   и крупные заголовки без своего letter-spacing выходили почти без трекинга (название проекта в панели и т. п.) */
body * { letter-spacing: -.045em; }
.studio-tr__m *, .rail-num * { letter-spacing: inherit; }   /* у этих свой трекинг — внутри наследуется как есть */
button, input, select, textarea { text-transform: inherit; }   /* браузер по умолчанию не даёт кнопкам наследовать регистр */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.wrap {
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: var(--pad);
}

/* ссылки: при наведении буквы по очереди уезжают вверх, а снизу выезжает тот же текст */
.roll { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; }   /* маска — в одну строку: перенос только между словами (у каждого слова своя маска, site.js → roll) */
/* наведение — волна вверх: буквы уезжают, снизу приходит копия и остаётся; курсор ушёл — волна обратно вниз.
   Классы ставит site.js; каждая волна доигрывает до конца, даже если курсор ушёл или вернулся раньше */
.roll .ch { display: inline-block; position: relative; }
.roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
.roll.is-up .ch { animation: roll-up .45s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--k) * 20ms); }
.roll.is-down .ch { animation: roll-down .45s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc((var(--n) - 1 - var(--k)) * 20ms); }   /* обратно — от последней буквы к первой */
@keyframes roll-up { to { transform: translateY(-100%); } }
@keyframes roll-down { from { transform: translateY(-100%); } to { transform: none; } }

.label { margin: 0; font-size: 11px; letter-spacing: -.045em; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 20px; }

/* переключатели языка и темы */
.opts { display: flex; gap: 10px; }
.opt { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; transition: color .2s; }
.opt[aria-pressed="true"], .opt:hover { color: var(--fg); }

/* появление при загрузке */
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
.reveal { animation: reveal .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 1s); }

/* ───────── главная ───────── */
.head { display: flex; justify-content: flex-end; align-items: flex-start; gap: 32px; padding-block: 28px; flex-wrap: wrap; }   /* логотип закреплён отдельно, см. ниже */
/* логотип: слева живой знак-капля (как курсор, только медленнее), справа «moroz» шрифтом Inter */
/* знак чуть крупнее заглавных букв надписи: знак .72em, «moroz» .9em от кегля логотипа */
.logo {
  display: inline-flex; align-items: center; gap: .26em; color: var(--fg);
  font: 600 26px/1 "Inter", "Helvetica Neue", Arial, sans-serif;
}
.logo-mark { position: relative; width: .72em; height: .72em; flex: none; }
.logo-mark canvas { position: absolute; }   /* размер и отступ задаёт скрипт: газу нужно место вокруг знака */
/* «moroz» — только строчные без выносных, поэтому центр слова — середина x-высоты Inter, она на .09em ниже середины строки */
.logo-word { display: inline-flex; font-size: .9em; letter-spacing: -.045em; transform: translateY(-.09em); }
/* маленький ® справа сверху от «moroz». Слово — flex, как в прелоадере, чтобы ® стоял там же и не прыгал при перелёте логотипа */
.logo-r { display: inline-block; align-self: flex-start; font-size: .34em; margin-left: .2em; position: relative; top: .4em; }   /* сдвиг через top: transform занят анимацией букв в прелоадере */
/* ® — вектор, а не символ шрифта: мелкий текст браузер ставит по целым пикселям, и после перелёта он вздрагивал */
.logo-r svg { display: block; width: .75em; height: .75em; margin-top: .13em; overflow: visible; }   /* поле вокруг кружка — чтобы обводку не подрезало */

/* первый экран по 12-колоночной сетке: заголовок — колонки 1–6 */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 40px var(--gutter);
  padding-block: clamp(32px, 5vw, 80px) clamp(24px, 2.5vw, 40px);   /* выше к шапке и ближе к шоурилу */
}
.hero-title {
  margin: 0; font-weight: 500; font-size: clamp(32px, 4vw, 70px); line-height: 1; letter-spacing: -.045em;
}
.hero .hero-title { font-size: clamp(28px, 3.4vw, 60px); grid-column: 1 / 7; }   /* заголовок первого экрана — чуть меньше, чем во втором блоке */
/* строки выезжают снизу из-под маски при загрузке */
.hero-title .ln { display: block; overflow: hidden; padding: .04em 0 .1em; margin-bottom: -.1em; }
.hero-title .in { display: inline-block; animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes rise { from { transform: translateY(110%); } }
/* перед «форму» — живой знак, как в логотипе: центр знака на середине строчных */
.hero-title .logo-mark { display: inline-block; width: .62em; height: .62em; vertical-align: -.04em; margin-right: .16em; }
/* курсивное слово с засечками в заголовке — как у студии-референса */
.hero-title .serif { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.02em; letter-spacing: -.045em; line-height: .9; padding-right: .08em; }   /* курсив с засечками; поле справа — чтобы наклон последней буквы не обрезался */
/* второй блок: та же типографика, что у заголовка; строки выезжают при прокрутке, а не при загрузке */


/* шоурил — 8 колонок сетки от левого поля, последние четыре пустые */
.showreel { position: relative; background: var(--ph); overflow: hidden; grid-column: 1 / 9; align-self: stretch; border-radius: 6px; }
/* первый экран ровно по высоте окна: шапка, заголовок и ряд шоурила; ряд забирает всё оставшееся место,
   снизу — ровно такой же отступ, как сверху от края окна до логотипа */
.screen1 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: var(--top-gap, calc(var(--head-c) - 11.7px)); box-sizing: border-box; }   /* --top-gap — сколько от верха окна до логотипа, меряет скрипт */
.screen1 .reel-row { flex: 1; min-height: 320px; }
/* ряд шоурила по 12-колоночной сетке: видео — колонки 1–8, справа карточка «О студии» — 9–12, высотой в половину видео */
.reel-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
  padding: 0 var(--pad) 0 max(var(--pad), env(safe-area-inset-left, 0px));
}
/* колонка справа ровно по высоте шоурила: height 0 + min-height 100% — сама ряд не растягивает, а тянется до видео */
.side-col { grid-column: 9 / 13; align-self: stretch; height: 0; min-height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
/* карточка «о студии» — простой серый блок */
.about-wrap { position: relative; min-height: 0; display: grid; border-radius: 6px; }
.about-card {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; padding: clamp(10px, 1vw, 14px);   /* поля — как у карточек публикаций ниже */
  border-radius: inherit; color: #fff; overflow: hidden; background: #3a3b3f;   /* серый, как был изначально */
}
.about-card { --about-fs: 13px; }   /* весь текст карточек — как «меню» в шапке: 13px, обычное начертание */
.about-text { margin: 0; flex: 1; min-height: 0; overflow: hidden; font-size: 18px; line-height: 1.3; letter-spacing: -.045em; text-transform: none; }   /* крупнее остального текста; как написано, с заглавной */
/* «обсудить проект» — бегущая строка влево, не останавливается и под курсором */
.about-cta { display: block; overflow: hidden; font-size: var(--about-fs); line-height: 1.4; letter-spacing: -.045em; color: #fff; white-space: nowrap; }
.about-track { display: inline-flex; animation: about-run 14s linear infinite; }
.about-run { display: inline-flex; }
.about-run > span { padding-right: 2.5em; }
@keyframes about-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .about-track { animation: none; } }
/* публикации — две карточки под «О студии», как карточка «About» у oimachi: заголовок, серый анонс в две строки,
   кнопка в углу и фото со скруглением на остаток высоты */
.pubs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); min-height: 0; }
.pub-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: clamp(10px, 1vw, 14px); overflow: hidden;
  border-radius: 6px; background: #1a1a1b; color: #fff;
}
/* Safari видео внутри скругления одним overflow не обрезает — ему скругление ещё и обрезкой (clip-path). Остальным браузерам хватает
   скругления: в Chrome обрезка на видео — маска на каждом его кадре, а скругление видеокарта делает почти даром */
@supports (font: -apple-system-body) { .pub-card, .ct-vw-bg { clip-path: inset(0 round 6px); } }
.pub-date { position: absolute; right: clamp(10px, 1vw, 14px); bottom: clamp(10px, 1vw, 14px); font-size: 11px; line-height: 1.2; letter-spacing: -.045em; color: rgba(255, 255, 255, .7); }   /* дата — снизу справа; трекинг как у всего сайта — точки не выглядят пробелами */
.pub-title { text-transform: none; font-size: 13px; letter-spacing: -.045em; line-height: 1.2; padding-right: 26px; }
.pub-text { text-transform: none; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .65);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* фон карточки — картинка или видео на всю карточку */
.pub-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pub-card > :not(.pub-bg) { position: relative; z-index: 1; }
.pub-card > .pub-btn, .pub-card > .pub-date { position: absolute; }
.pub-card .pub-title, .pub-card .pub-date { color: #fff; }   /* заголовок и дата на фоне — белые; анонс — приглушённый, см. .pub-text */
.pub-card:has(> img.pub-bg)::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* затемнение сверху (заголовок) и снизу (дата) */
  background:
    linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .55) 25%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 30%); }
.pub-card:has(> img.pub-bg) .pub-btn { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pub-btn { position: absolute; top: clamp(10px, 1vw, 14px); right: clamp(10px, 1vw, 14px); width: 18px; height: 18px; border-radius: 3px; background: #2c2c2e;   /* маленькая, по полям карточки */
  display: grid; place-items: center; transition: background-color .3s, color .3s; }
.pub-btn svg { width: 13px; height: 13px; }   /* прежняя стрелка, тоньше */
.pub-card .pub-btn { color: #fff; }
.pubs .pub-card:hover .pub-btn, .pubs .pub-card:focus-visible .pub-btn { background: #fff; color: #0d0d0d; }   /* при наведении кнопка становится белой, стрелка — тёмной; без сдвига */
/* карточка VEWOO — видео на фоне; фиолетовый градиент виден, пока видео грузится */
.vw-card {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(140, 120, 255, .16) 46%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 90% at 20% 100%, #3a2d8f 0%, rgba(58, 45, 143, 0) 60%),
    #120e2c;   /* виден, пока видео на фоне не загрузилось */
}
.vw-card .pub-btn { background: rgba(255, 255, 255, .1); }
.vw-title { text-transform: none; }   /* как написано: «AI-ассистент VEWOO» */
.vw-card .pub-text { display: block; overflow: visible; font-size: clamp(11px, .9vw, 13px); }   /* описание VEWOO — целиком, без обрезки в две строки; в узкой карточке шрифт чуть меньше, чтобы осталось место виджету */
/* виджет в карточке VEWOO — как в шапке, но в фирменных цветах VEWOO: тёмная фиолетовая сфера со светящимся краем и белым логотипом,
   рядом живое фиолетовое облачко со статичным «Hi, i'm VEWOO!». По центру оставшегося места карточки; круг чуть «живёт» */
.vw-widget { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding-bottom: 6px; }   /* по центру: облачко сверху (хвостиком вниз), круг под ним */
.vw-widget__circle {
  --u: .72px;   /* 1/100 диаметра */
  position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #fff;
  animation: vewoo-alive 3.4s ease-in-out infinite;
}
/* стеклянная сфера VEWOO — как в приложении VEWOO (цвета сняты с его скриншота): тёмная сине-фиолетовая середина,
   сверху на кромке — фиолетовый блик, справа снизу — светлый розово-лавандовый серп, слева снизу — фиолетовый край.
   Свет — два слоя поверх основы: цвет по углу (conic) × сила по радиусу (маска), слои складываются (plus-lighter);
   ::before — широкое свечение снизу справа, ::after — свет у самой кромки. У кромки основа прозрачнеет, и виден только
   цвет кромки по углу (нижний слой фона) — так нет тёмной каймы от сглаживания края. Всё в долях круга — одинаково
   для карточки (72px) и большого VEWOO (150px); при «дыхании» за круг выходит цвет кромки.
*/
/* стекло — на своём слое .orb-glass внутри .orb-shape (их вставляет site.js): оно рисуется один раз, а контур «плывёт» обрезкой
   у .orb-shape — раньше скругление менялось у самой сферы, и браузер каждый кадр заново рисовал все градиенты */
.orb-shape { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.orb-glass {
  position: absolute; inset: 0; will-change: transform;
  display: grid; place-items: center;   /* логотип VEWOO — внутри стекла, по центру */
  isolation: isolate;
  background:
    radial-gradient(closest-side, #06052c 0%, #06042c 41%, #07052f 77%, #07062e 88%, #07062e 95%, transparent 97.5%),
    conic-gradient(#8c71e0 0deg, #886fd8 5deg, #5c4890 22.5deg, #352b5c 42.5deg, #29214c 52.5deg, #1e1841 70deg, #272248 80deg, #3a3558 90deg, #4b456a 95deg, #6e648c 102.5deg, #b2a0c8 120deg, #c3b0da 130deg, #c8b9e0 137.5deg, #d5c7e8 145deg, #d6cce6 150deg, #cec4df 155deg, #a79abe 162.5deg, #887aab 170deg, #71649d 177.5deg, #5c5098 190deg, #58499f 197.5deg, #5c4dac 202.5deg, #6553b9 207.5deg, #826bdf 217.5deg, #8870e5 222.5deg, #846ce1 227.5deg, #6e58cb 235deg, #392c82 247.5deg, #181152 257.5deg, #0d0a41 262.5deg, #070632 272.5deg, #04032a 292.5deg, #080534 302.5deg, #100c48 312.5deg, #5545a9 342.5deg, #7c62d2 352.5deg, #8c71e0 360deg);
}
.orb-glass::before, .orb-glass::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: plus-lighter; pointer-events: none;   /* форму даёт обрезка .orb-shape */
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
}
.orb-glass::before { --mask: radial-gradient(closest-side, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / .51) 64%, rgb(0 0 0 / .67) 73%, rgb(0 0 0 / .8) 79%, rgb(0 0 0 / .98) 85%, rgb(0 0 0 / 1) 87%, rgb(0 0 0 / .98) 89%, rgb(0 0 0 / .9) 91%, rgb(0 0 0 / .59) 95%, rgb(0 0 0 / 0) 97.5%); }
.orb-glass::after { --mask: radial-gradient(closest-side, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 58%, rgb(0 0 0 / .06) 73%, rgb(0 0 0 / .19) 81%, rgb(0 0 0 / .42) 88%, rgb(0 0 0 / .6) 91%, rgb(0 0 0 / .91) 95%, rgb(0 0 0 / 0) 97.5%); }
.orb-glass::before { background: conic-gradient(#0c041a 0deg, #0f061d 5deg, #0a020e 22.5deg, #040202 52.5deg, #0c0806 72.5deg, #2e2827 100deg, #605358 125deg, #6e6167 140deg, #685b65 147.5deg, #4f434f 162.5deg, #261c31 192.5deg, #0b0423 220deg, #000011 237.5deg, #000000 272.5deg, #000000 305deg, #01000c 347.5deg, #0c041a 360deg); }
.orb-glass::after { background: conic-gradient(#8971b8 0deg, #866faf 5deg, #79639e 10deg, #3f324e 27.5deg, #1f1826 40deg, #120d14 47.5deg, #050103 60deg, #010203 80deg, #08080a 87.5deg, #181519 95deg, #272329 100deg, #3e373e 105deg, #97838a 120deg, #aa979b 125deg, #b29ea1 130deg, #aa9c99 140deg, #afaa98 150deg, #aca995 155deg, #9d988b 160deg, #696068 170deg, #554c5b 175deg, #433d52 182.5deg, #3a3455 190deg, #3d3462 200deg, #6e5b9e 217.5deg, #735fa2 225deg, #685495 230deg, #32264e 245deg, #120c20 257.5deg, #04040b 267.5deg, #000000 280deg, #000001 305deg, #0f0a1c 320deg, #18112a 325deg, #322555 335deg, #6a52a0 350deg, #7f66b1 355deg, #8971b8 360deg); }
/* логотип — поверх света; размер и чуть левее центра — как на сфере в приложении */
.vw-widget__circle svg { position: relative; z-index: 1; display: block; width: calc(24.8 * var(--u)); height: calc(22.82 * var(--u)); translate: calc(-.8 * var(--u)) calc(-.2 * var(--u)); }
.vw-widget__bubble {
  order: -1;   /* облачко над кругом */
  position: relative; padding: 7px 11px; color: #fff;   /* фон — живая капля на холсте (site.js → liveBubble) */
  font-size: 12px; line-height: 16px; letter-spacing: -.045em; white-space: nowrap; text-transform: none;   /* как написано */
}
.vw-widget__text { position: relative; display: block; transition: opacity .16s, translate .25s var(--ease); }   /* текст над холстом */
.vw-widget__text.is-out { opacity: 0; translate: 0 3px; }   /* смена текста при наведении на карточку («Go!») */
.vw-widget__sizer { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; pointer-events: none; }
.vw-widget__bubble { transition: width .45s var(--ease); }   /* ширину под новый текст ставит site.js */
@media (prefers-reduced-motion: reduce) { .vw-widget__circle, .vw-widget__circle .orb-shape { animation: none; } }

.showreel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showreel .ph-title { font-size: clamp(18px, 1.8vw, 26px); color: var(--fg); }
.showreel { cursor: pointer; }

/* полноэкранный плеер шоурила */
.player {
  position: fixed; inset: 0; z-index: 950; background: #000;
  display: flex; flex-direction: column; opacity: 0; transform: scale(1.02);
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.player.show { opacity: 1; transform: none; }
.player[hidden] { display: none; }
.player video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.pl-bar {
  display: flex; align-items: center; gap: 20px; color: var(--on-media);
  padding: 16px max(var(--pad), env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(var(--pad), env(safe-area-inset-left, 0px));
}
.pl-btn { border: 0; background: none; padding: 6px 0; color: inherit; font-size: 13px; letter-spacing: -.045em; cursor: pointer; white-space: nowrap; }
.pl-progress {
  flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer;
  background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)) center / 100% 2px no-repeat;
}
.pl-progress i { display: block; width: 100%; height: 2px; background: var(--on-media); transform-origin: left; transform: scaleX(0); }
.pl-progress { position: relative; }
html:has(.player.show) .head .logo { z-index: 960; }   /* логотип — поверх раскрытого шоурила */
.player .flash { top: calc(50% - 25px); }   /* по центру видео — над полоской снизу */
/* предпросмотр над полоской — как в проектах (.bar-tip), но окошко горизонтальное, по кадру шоурила */
.player .bar-tip { bottom: 22px; width: clamp(160px, 13vw, 240px); aspect-ratio: 16 / 9; }
.pl-progress.is-scrub .bar-tip { opacity: 1; visibility: visible; transition: opacity .2s; }

/* футер: слева ©, по центру соцсети, справа телефон и почта (три колонки — соцсети ровно по центру) */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px; padding-block: 24px 32px; font-size: 12px; color: var(--muted); letter-spacing: -.045em; }
.foot a { color: var(--fg); }
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; } }
.foot .mail { user-select: all; }

/* заглушка: название по центру, когда видео ещё нет */
.ph-title {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 16px;
  text-transform: uppercase; letter-spacing: -.045em;
}
.missing .ph-title { display: grid; }
.missing video { visibility: hidden; }

/* ───────── логотип закреплён в левом верхнем углу и остаётся при прокрутке ─────────
   в «негативе»: на светлом — тёмный, над тёмным видео — светлый */
.head .logo, .pd-top .logo {   /* одна шапка на всех страницах: логотип закреплён слева, «запустить vewoo» по центру, «меню» и «проекты» справа */
  position: fixed; z-index: 890;
  top: calc(var(--head-c) - 11.7px); left: max(var(--pad), env(safe-area-inset-left, 0px));   /* 11.7 — половина высоты логотипа (.9 × 26px)/2 */
  color: #fff; mix-blend-mode: difference;
}
@media (max-width: 720px) { .head { padding-top: 76px; } }   /* на телефоне навигация — под логотипом */

/* ───────── кнопка «Проекты» в шапке и выезжающий список ───────── */
/* закреплена в правом верхнем углу на всех страницах; две линии превращаются в крестик, когда список открыт */
.ptab {
  position: fixed; z-index: 900;
  top: calc(var(--head-c) - 17px); right: max(var(--pad), env(safe-area-inset-right, 0px));   /* середина строчных — на линии шапки */
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 0;
  border: 0; background: none; cursor: pointer;
  font-size: 13px; letter-spacing: -.045em; transition: opacity .3s;   /* трекинг как у заголовка */
  color: #fff; mix-blend-mode: difference;   /* в «негативе», как логотип: на светлом — тёмная, на тёмном — светлая */
}
.ptab::before { content: ""; position: absolute; inset: -10px -12px; }   /* область клика шире самой подписи */
/* иконки высотой со строчные (x-высота Inter ≈ 7px при 13px) и по их центру — он на .09em ниже середины строки */
/* толщина полосок и просвет — по пикселям экрана (site.js, snapIcons): на Retina ровно 1.5 и 2px, как задумано; на обычном экране и при
   масштабе Windows 125/150 % — ближайшие целые пиксели экрана, иначе полоски попадают между пикселями и размываются в серое «=».
   --ic-dx/--ic-dy — сдвиг иконки до целого пикселя экрана (на Retina не нужен) */
.ptab-ic { position: relative; top: calc(.09em + var(--ic-dy, 0px)); left: var(--ic-dx, 0px); width: 7px; height: calc(2 * var(--ic-line, 1.5px) + var(--ic-gap, 2px)); }
.ptab-ic i { position: absolute; left: 0; right: 0; height: var(--ic-line, 1.5px); background: currentColor; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.ptab-ic i:first-child { top: 0; }
.ptab-ic i:last-child { bottom: 0; }
.ptab[aria-expanded="true"] .ptab-ic i:first-child { transform: translateY(calc((var(--ic-line, 1.5px) + var(--ic-gap, 2px)) / 2)) rotate(45deg); }
.ptab[aria-expanded="true"] .ptab-ic i:last-child { transform: translateY(calc((var(--ic-line, 1.5px) + var(--ic-gap, 2px)) / -2)) rotate(-45deg); }
/* в шапках оставляем справа место под кнопку и ставим всё на одну линию с ней */
.pd-top.wrap { padding-right: calc(var(--pad) + var(--btn-room)); }
.rtop > * { min-height: 28px; }   /* высота кнопки «Проекты» — центры совпадают */

/* переключатель вида в рилсах: плитка / рилсы, только иконки */
.views {
  position: absolute; left: 50%; top: calc(var(--head-c) + 26px); transform: translateX(-50%);   /* под «Меню», которое стоит по центру шапки */
  display: flex; gap: 2px; padding: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.view-btn {
  width: 34px; height: 24px; border: 0; border-radius: 999px; background: none; padding: 0;
  display: grid; place-items: center; color: rgba(255, 255, 255, .6); cursor: pointer;
  transition: background-color .4s cubic-bezier(.65, 0, .35, 1), color .4s cubic-bezier(.65, 0, .35, 1);
}
.view-btn svg { width: 14px; height: 14px; }
.view-btn:hover { color: var(--on-media); }
.view-btn[aria-pressed="true"] { background: var(--on-media); color: #0d0d0d; }

/* плитка: бесконечное полотно карточек — тянется мышью, с глубиной к краям; в карточках только обложки, без видео */
.tiles {
  position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; user-select: none;
  perspective: 1100px; perspective-origin: 50% 50%;
  opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.45, 0, .2, 1), visibility 0s .5s;
}
.reels { transition: opacity .5s cubic-bezier(.45, 0, .2, 1), visibility 0s; }
.view-grid .tiles { opacity: 1; visibility: visible; transition: opacity .5s cubic-bezier(.45, 0, .2, 1); }
.view-grid .reels { opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.45, 0, .2, 1), visibility 0s .5s; }
.tile {
  position: absolute; left: 0; top: 0; width: var(--tile-w, 230px); display: grid; gap: 10px;
  color: var(--on-media); will-change: transform; transform-style: preserve-3d; -webkit-user-drag: none;
}
.tile-media { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s cubic-bezier(.22, .61, .36, 1), opacity .4s; }
.tile:hover .tile-media img { transform: scale(1.04); }
.tile-title { font-size: 13px; letter-spacing: -.045em; text-transform: uppercase; }
.tile-meta { font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: -6px; }
.tile-meta:empty { display: none; }
@media (min-width: 721px) { .head { padding-right: calc(var(--pad) + var(--btn-room)); } }
.ppanel.open ~ .ptab { opacity: 0; }   /* в открытом списке и само слово «Проекты» прячется; кнопка остаётся под курсором, чтобы список не закрывался */

.ppanel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 899;
  width: calc(var(--panel-w) + var(--tab-w) + env(safe-area-inset-right, 0px)); max-width: 100vw;
  padding: 0 calc(var(--tab-w) + env(safe-area-inset-right, 0px)) 0 112px;   /* список — на всю высоту панели */
  background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 24px;
  transform: translateX(100%); visibility: hidden;
  transition: transform .6s cubic-bezier(.45, 0, .25, 1), visibility 0s .6s;   /* уезжает плавно, без рывка */
}
.ppanel.open { transform: none; visibility: visible; transition: transform .9s cubic-bezier(.45, 0, .15, 1); }   /* выезжает с мягким разгоном и долгой плавной остановкой; страница сдвигается в такт */
/* в открытом списке — только сами проекты: «Обсудить проект» и «Меню» прячутся и не нажимаются */
/* в открытом списке «Меню» не прячется, а уезжает влево вместе со страницей и уходит под затемнение (правило — ниже, у .mtab) */

/* список «продавливается» под курсором: пункты рядом с ним уезжают влево (как на bear.plus) */
/* окно бегущей строки: тянется на всю высоту панели и захватывает поле слева, чтобы изгиб не обрезался */
.pview {
  flex: 1; min-height: 0; overflow: hidden; margin-left: -112px; padding-left: 112px;
  -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
}
.plist { list-style: none; margin: 0; padding: 0; will-change: transform; }
.plist li { opacity: 0; transform: translateX(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ppanel.open .plist li { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .035s); }
.plist a {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; line-height: 1.2; letter-spacing: -.045em; text-transform: uppercase;
  transition: opacity .3s;
}
/* при изгибе пункт уезжает влево, и справа остаётся «дыра» — невидимый хвост сохраняет область наведения до края */
.plist a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100px; }
@media (hover: hover) { .plist:hover a:not(:hover) { opacity: .35; } }
.pname { display: flex; align-items: center; gap: 8px; }
.pmeta { color: var(--muted); }
/* при наведении рядом с названием появляется живая капля — рисуется тем же кодом, что курсор над видео */
.pdot { width: 12px; height: 12px; flex: none; margin: 0 -3px; color: currentColor;
  transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.plist a:hover .pdot, .plist a:focus-visible .pdot { transform: scale(1); }

/* фон под открытым списком: затемнение и размытие */
/* подложка под списком «проекты»: затемнение и размытие (отдельным слоем) появляются одновременно */
.pscrim {
  position: fixed; inset: 0; z-index: 897; background: rgba(13, 13, 13, 0);
  visibility: hidden; transition: background-color .5s var(--ease), visibility 0s .5s;
}
.pscrim.show { background: var(--scrim); visibility: visible; transition: background-color .5s var(--ease); }
.pscrim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.pscrim.show::before { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }   /* вместе с затемнением */

/* вертикальное превью слева от списка */
.ppreview {
  position: fixed; z-index: 898; margin: 0; pointer-events: none;
  top: 50%; right: calc(var(--panel-w) + var(--tab-w) + env(safe-area-inset-right, 0px) + 28px);
  width: clamp(240px, 20.5vw, 340px);
  /* как виджет VEWOO: появляется, вырастая из центра с половины размера, и сжимается к центру при уходе курсора */
  opacity: 0; transform: translateY(-50%) scale(.5); transform-origin: 50% 50%;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1), opacity .5s cubic-bezier(.65, 0, .35, 1);   /* как уход панели проектов */
}
.ppreview.show { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s cubic-bezier(.22, 1, .36, 1); }   /* как выезд панели проектов */
.ppreview-media { transition: transform .5s var(--ease); }
.ppreview:hover .ppreview-media { transform: scale(1.03); }
.ppreview-media { position: relative; aspect-ratio: 9 / 16; background: var(--ph); overflow: hidden; border-radius: 14px; clip-path: inset(0 round 14px); }
.ppreview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* смена проекта — шторка сверху вниз: новый ролик открывается поверх прежнего */
.ppreview video { clip-path: inset(0 0 100% 0); transition: clip-path .75s cubic-bezier(.65, 0, .35, 1); }
.ppreview video.on { clip-path: inset(0 0 0 0); }
.ppreview .ph-title { font-size: 12px; color: var(--fg); }
.caption-row {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden;
  padding: 64px 16px 16px; background: linear-gradient(transparent, var(--shade));
  color: var(--on-media);
}
.caption-row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.caption-row .tt { font-size: 17px; font-weight: 600; letter-spacing: -.045em; text-transform: uppercase; line-height: 1.15; }
.caption-row .yr { font-size: 11px; letter-spacing: -.045em; opacity: .75; font-variant-numeric: tabular-nums; }
@keyframes cap-in { from { transform: translateY(110%); opacity: 0; } }
.caption-row > div.in { animation: cap-in .3s var(--ease) both; }

/* ───────── рилсы ───────── */
.reels-page { overflow: hidden; background: #0d0d0d; }
/* фон: тёмный, по нему плавает свечение основного цвета проекта; при смене проекта слои перетекают */
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: #0b0b0c; }
.ambient canvas { display: block; width: 100%; height: 100%; }   /* без filter: blur — холст рисуется в маленьком разрешении и растягивается, это и есть мягкость (фильтр на весь экран каждый кадр тормозил) */   /* размытие; увеличение прячет тёмные края от блюра */
.ambient::after { content: ""; position: absolute; inset: 0; background: var(--ambient-dim); }
.reels-page .rtop, .reels-page .rtop .count { color: var(--on-media); }
.reels-page .rtop .count { opacity: .7; }
.reels-page .act { color: var(--on-media); opacity: .85; }
.reels-page .act .ic { background: var(--glass); color: var(--on-media); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reels {
  position: fixed; top: 0; bottom: 0; left: 0; right: calc(var(--tab-w) + env(safe-area-inset-right, 0px));
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reel {
  position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  /* экран поделён пополам: слева коротко о проекте, справа ролик */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  padding-block: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: var(--pad);
}
/* кривые смены проекта в рилсах (ролик, полоска, шторка) */
.reel { --in: cubic-bezier(.22, .61, .36, 1); --out: cubic-bezier(.4, 0, .6, 1); }
.media { height: 100%; min-width: 0; display: flex; justify-content: center; gap: 20px; }
.reel .cap { display: none; }   /* на компьютере подпись слева, в ролике она не нужна */
.frame {
  position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100% - 100px);
  background: var(--ph); border-radius: 14px; overflow: hidden;
}
.frame video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }   /* на пиксель больше рамки со всех сторон (рамка обрезает): при дробной ширине видео ложится по целым пикселям, и у края просвечивала серая заглушка */
.frame .ph-title { font-size: 15px; color: var(--fg); }
.tap { position: absolute; inset: 0; border: 0; background: none; padding: 0; cursor: pointer; }
.flash {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--shade); color: var(--on-media);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
}
.flash svg { width: 28px; height: 28px; }
/* значок «плей / пауза» по клику: мягко проявляется, задерживается и спокойно гаснет (было .6 с — слишком быстро) */
@keyframes flash {
  0% { opacity: 0; transform: scale(.88); }
  18% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
.flash.go { animation: flash 1.4s cubic-bezier(.33, 1, .68, 1) both; }
.heart-pop { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; color: var(--on-media); pointer-events: none; }
@keyframes pop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1) translateY(-30px); } }
.heart-pop { animation: pop .8s var(--ease) forwards; }

.cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 18px 22px;
  background: linear-gradient(transparent, var(--shade)); color: var(--on-media); pointer-events: none;
}
.cap > * { pointer-events: auto; }
.cap-meta { margin: 0 0 4px; font-size: 11px; letter-spacing: -.045em; opacity: .85; }
.cap h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.045em; }
.cap-text { margin: 0 0 14px; font-size: 13px; line-height: 1.4; max-width: 36ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: none; }   /* описание — как написано, как в панели проекта */
.c-open { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; color: var(--on-media); }   /* «смотреть проект» — как ссылки сайта на компьютере («все проекты»): подпись с перекатом букв и стрелка, без капсулы */
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.bar i { display: block; height: 100%; background: var(--on-media); transform-origin: left; transform: scaleX(0); }

/* справа от ролика: сверху номер проекта, снизу кнопки */
.acts { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0 24px; }
.act-list { display: flex; flex-direction: column; gap: 16px; }
.act-top { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.arrows { display: flex; flex-direction: column; gap: 8px; }
.arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: none; padding: 0;
  display: grid; place-items: center; color: var(--on-media); cursor: pointer;
  transition: background-color .4s cubic-bezier(.65, 0, .35, 1), color .4s cubic-bezier(.65, 0, .35, 1), border-color .4s;
}
.arrow svg { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.arrow:hover { background: var(--on-media); border-color: var(--on-media); color: #0d0d0d; }
.arrow.prev:hover svg { transform: translateY(-2px); }
.arrow.next:hover svg { transform: translateY(2px); }
.act-count { font-size: 12px; letter-spacing: -.045em; color: var(--on-media); opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0;
  font-size: 10px; letter-spacing: -.045em; color: var(--muted); cursor: pointer;
}
.act .ic {
  width: 46px; height: 46px; border-radius: 50%; background: var(--tab); color: var(--fg);
  display: grid; place-items: center; transition: transform .3s var(--ease);
}
.act:hover .ic { transform: scale(1.08); }
.act svg { width: 20px; height: 20px; }
.like[aria-pressed="true"] .ic svg { fill: currentColor; }
.sound .on-ic, .unmuted .sound .off-ic { display: none; }
.unmuted .sound .on-ic { display: block; }

.rtop {
  position: fixed; top: 0; left: 0; right: calc(var(--tab-w) + env(safe-area-inset-right, 0px)); z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; pointer-events: none;
  padding: calc(var(--head-c) - 14px) calc(var(--pad) + var(--btn-room)) 0 max(var(--pad), env(safe-area-inset-left, 0px));   /* ряд 28px — центр на линии шапки */
  font-size: 12px; letter-spacing: -.045em;
}
.rtop > * { pointer-events: auto; }
.rtop .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.rtop .right { display: flex; gap: 24px; align-items: center; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 950;
  transform: translate(-50%, 20px); opacity: 0; transition: all .4s var(--ease);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-size: 13px; overflow-wrap: anywhere; user-select: all;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ───────── страница проекта ───────── */
.pd-top { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-block: 28px; font-size: 13px; }
/* кейс, как на dprofile: одна полоса — название (кегль H1 главной, колонки 1–4) и подписи: клиент, год, услуги,
   регалии (колонки 5–12); ниже описание (1–7) и напротив, справа, ссылки; дальше на всю ширину — фото и видео кейса (project.js) */
.pd {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: start;
  padding-block: clamp(32px, 5vw, 80px) clamp(72px, 9vw, 160px);   /* сверху — как у первого экрана главной */
}
.pd-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gutter); align-items: start; margin-bottom: clamp(40px, 5vw, 80px); }
.pd-title { grid-column: 1 / 5; margin: 0; font-weight: 500; font-size: clamp(28px, 3.4vw, 60px); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; }   /* кегль — как у H1 главной (.hero .hero-title); названия проектов — заглавными */
.pd-title .ln { display: block; overflow: hidden; padding: .04em 0 .1em; margin: -.04em 0 -.1em; }   /* выезжает снизу из-под маски, как заголовки страниц */
.pd-title .in { display: inline-block; animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * 1s); }
.pd-meta { grid-column: 5 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px var(--gutter); margin: 0; }
.pd-meta dt { font-size: 13px; color: var(--muted); }
.pd-meta dd { margin: 6px 0 0; font-size: 15px; line-height: 1.35; text-transform: none; }   /* имена и названия — как написаны */
.pd-links { grid-column: 9 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; font-size: 15px; padding-top: .2em; }   /* ссылки — напротив описания, у правого края */
.pd-text { grid-column: 1 / 8; max-width: 36em; font-size: 18px; line-height: 1.3; text-transform: none; }   /* как текст в карточке «о студии» */
.pd-text p { margin: 0; }
.pd-text p + p { margin-top: .75em; }
.pd-link { display: inline-flex; align-items: center; gap: 3px; }   /* стрелка — как у «все проекты» */
/* кейс — карточка цвета кейса со скруглением, блоки — подряд с промежутком кейса (--cgap) */
.pd-case { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 112px); display: grid; gap: var(--cgap, 0px); background: var(--cbg, var(--ph)); border-radius: 6px; }
/* скругление — фоном и у крайних блоков, без обрезки всего кейса: обрезка (overflow / clip-path) у блока в десятки тысяч пикселей
   с видео внутри заставляла браузер каждый кадр прокрутки пересобирать огромную маску — страница подвисала */
.pd-case:not(.pd-case--frames) > :first-child { border-radius: 6px 6px 0 0; overflow: hidden; }
.pd-case:not(.pd-case--frames) > :last-child { border-radius: 0 0 6px 6px; overflow: hidden; }
@supports (font: -apple-system-body) {   /* Safari обрезает видео по скруглению только обрезкой — и только у крайних блоков */
  .pd-case:not(.pd-case--frames) > .cm--video:first-child { clip-path: inset(0 round 6px 6px 0 0); }
  .pd-case:not(.pd-case--frames) > .cm--video:last-child { clip-path: inset(0 round 0 0 6px 6px); }
}
.cm { position: relative; min-width: 0; margin: 0; }
.cm[style*="aspect-ratio"] { content-visibility: auto; }   /* блоки вне экрана браузер не рисует; высота известна по пропорции — прокрутка не прыгает */
.cm > img { display: block; width: 100%; height: auto; }
.cm--video > img, .cm--video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.cm--video > iframe { opacity: 0; transition: opacity .8s var(--ease); }   /* видео проявляется поверх постера, когда пошло (project.js) */
.cm--video > iframe[aria-hidden="true"] { pointer-events: none; }   /* видео фоном: прокрутка и курсор идут сквозь плеер */
.cm--video.is-on > iframe { opacity: 1; }
.cm--text { padding: clamp(40px, 7vw, 120px) clamp(20px, 8.4vw, 160px); font-size: clamp(18px, 1.6vw, 26px); line-height: 1.3; text-transform: none; }
.cm--text p { margin: 0; max-width: 34em; }
.cm--text p + p { margin-top: .75em; }
/* проект без кейса — три кадра из ролика в ряд */
.pd-case--frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); background: none; border-radius: 0; overflow: visible; clip-path: none; }
.pd-case--frames .cm { border-radius: 6px; overflow: hidden; background: var(--ph); }
@media (max-width: 1100px) {   /* планшет и узкий ноутбук: название — над подписями, подписи — в ряд на всю ширину */
  .pd-title, .pd-meta { grid-column: 1 / -1; }
}


/* ───────── плавная прокрутка (Lenis) — служебные стили библиотеки ───────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ───────── переходы между страницами: страница плавно гаснет и проявляется (прелоадер — только при входе и перезагрузке) ───────── */
body { transition: opacity .45s cubic-bezier(.45, 0, .2, 1); }
/* список «проекты» не перекрывает страницу, а сдвигает её влево в такт своему выезду. Двигаем трансформацией (без пересчёта
   раскладки — не подвисает) только содержательные блоки; шапка и закреплённые кнопки — на месте. Сдвиг — ровно ширина списка:
   список, как и страница, стоит до полосы прокрутки, поэтому край страницы встречается с ним вплотную */
/* сдвигаем только внешние блоки: вложенный (студия внутри main на странице студии и т. п.) едет вместе с ним, а не вдвое */
:is(.hero, .reel-row, .works, .studio-tr, .talk, section.next, main:not(.reels):not(.tiles), .pd-back, body > .foot):not(:is(.hero, .reel-row, .works, .studio-tr, .talk, section.next, main:not(.reels):not(.tiles), .pd-back, body > .foot, .pinfo) *) {
  transition: translate .6s cubic-bezier(.45, 0, .25, 1);
}
html.ppanel-open :is(.hero, .reel-row, .works, .studio-tr, .talk, section.next, main:not(.reels):not(.tiles), .pd-back, body > .foot):not(:is(.hero, .reel-row, .works, .studio-tr, .talk, section.next, main:not(.reels):not(.tiles), .pd-back, body > .foot, .pinfo) *) {
  translate: calc(-1 * (var(--panel-w) + var(--tab-w))) 0; transition: translate .9s cubic-bezier(.45, 0, .15, 1);
}
/* страница проектов: сам прокручиваемый контейнер роликов не двигаем (иначе ломаются закреплённые кнопки и привязка к роликам) —
   двигаем по отдельности ролик, колонку кнопок, ленту, переключатель вида и плитку (не их общую полосу .rtop — внутри неё переключатель закреплён у низа экрана). Сдвиг = под список «проекты» (--sx-p)
   + описание (--sx-i: вся история уезжает на 3 колонки влево, в левые 6 колонок; справа на 6 колонок — панель проекта .pinfo) */
.reels-page :is(.frame, .acts, .rail, .views, .tiles) {
  --sx-p: 0px; --sx-i: 0px;
  transform: translateX(calc(var(--sx-p) + var(--sx-i)));
  transition: transform .8s cubic-bezier(.45, 0, .15, 1), opacity .3s, visibility 0s;
}
html.ppanel-open .reels-page :is(.frame, .acts, .rail, .views, .tiles) { --sx-p: calc(-1 * (var(--panel-w) + var(--tab-w))); }
body.is-info :is(.frame, .acts, .rail, .views) { --sx-i: calc(-3 * (var(--colw, 105px) + var(--gutter))); }
/* описание: открываем — сначала ролик уезжает влево (.8 с), потом раскрывается шторка; закрываем — сначала шторка, потом ролик на место */
body.info-out .reels-page :is(.frame, .acts, .rail, .views), body.info-out:is(.reels-page) :is(.frame, .acts, .rail, .views) { transition-delay: .45s, 0s, 0s; }
html.is-leaving body, html.is-entering body { opacity: 0; }

/* ───────── прелоадер: знак собирается из газа в лёд ───────── */
.pre {
  display: none; position: fixed; inset: 0; z-index: 990; place-items: center;
  background: var(--bg); color: var(--fg); transition: background-color 1.1s cubic-bezier(.45, 0, .2, 1) .35s;
}
html.is-loading .pre { display: grid; }
html.is-loading body { overflow: hidden; }
/* пока прелоадер на экране, анимации появления ждут */
html.is-loading .reveal, html.is-loading .hero-title .in { animation-play-state: paused; }
.pre-logo {
  display: inline-flex; align-items: center; transform-origin: 0 0;
  font: 600 clamp(40px, 4.6vw, 64px)/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.045em;
  /* надпись вынесена из раскладки, поэтому с первого кадра по центру стоит один знак;
     раскрытие и перелёт — только transform, без перерасчёта раскладки, поэтому текст не дрожит */
  position: relative; will-change: transform; backface-visibility: hidden;
  transition: transform 1.3s cubic-bezier(.45, 0, .15, 1);
}
/* те же пропорции, что у логотипа в шапке, — чтобы при перелёте всё совпало */
.pre-mark { position: relative; width: .72em; height: .72em; flex: none; }
.pre-mark canvas { position: absolute; }
/* слово выезжает из-за знака: раскрывается по ширине, буквы поднимаются снизу по очереди */
/* слово стоит справа от знака, как в шапке: отступ = gap .26em логотипа, по высоте — центр строчных на центре знака */
.pre-word { position: absolute; left: 100%; top: 50%; font-size: .9em; letter-spacing: -.045em; white-space: nowrap;
  transform: translateY(calc(-50% - .09em)); display: inline-flex; overflow: hidden;
  margin-left: calc(.26em / .9); line-height: 1; }   /* без внутренних отступов: иначе -50% считается от более высокой коробки и слово встаёт выше, чем в шапке */
.pre-word span { display: inline-block; opacity: 0; transform: translateY(70%); will-change: transform, opacity;
  transition: transform 1.1s cubic-bezier(.3, 0, .15, 1), opacity .9s cubic-bezier(.3, 0, .15, 1); }
.pre.word .pre-logo { transform: translateX(calc(var(--shift, 0px) * -1)); }   /* логотип съезжает, чтобы по центру стоял весь «знак + moroz» */
.pre.word .pre-word span { transform: none; opacity: 1; }
.pre.word .pre-word span:nth-child(1) { transition-delay: .15s; }
.pre.word .pre-word span:nth-child(2) { transition-delay: .23s; }
.pre.word .pre-word span:nth-child(3) { transition-delay: .31s; }
.pre.word .pre-word span:nth-child(4) { transition-delay: .39s; }
.pre.word .pre-word span:nth-child(5) { transition-delay: .47s; }
.pre.word .pre-word span:nth-child(6) { transition-delay: .55s; }
.pre.word .pre-info { opacity: 0; }
.pre-info {
  position: absolute; left: 0; right: 0; bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 18px; transition: opacity .8s ease;
  font-size: 11px; letter-spacing: -.045em; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pre-num { color: var(--fg); }
.pre.leaving { background-color: transparent; }
.pre.leaving .pre-info { opacity: 0; }
.reels-page .pre { background: #0b0b0c; color: var(--on-media); }
.reels-page .pre-num { color: var(--on-media); }
.reels-page .pre.leaving { background-color: transparent; }

/* ───────── индикатор загрузки: облачко газа по центру медиа ───────── */
.gas-loader {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 4;
  pointer-events: none; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .4s ease;
}
.gas-loader canvas { position: absolute; }
.is-loading-media > .gas-loader { opacity: 1; }

/* ───────── курсор ───────── */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}
#fx {
  position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 1000;
  mix-blend-mode: difference; opacity: 0; transition: opacity .2s;
}
#fx canvas { position: absolute; }
#fx #cursor { left: -220px; top: -220px; width: 440px; height: 440px; will-change: transform; }

/* ───────── адаптив ───────── */
/* планшет вертикально: колонка справа от шоурила (4 колонки) слишком узкая — шоурил во всю ширину, под ним в ряд
   карточка «о студии» и две карточки публикаций */
@media (min-width: 721px) and (max-width: 960px) {
  .screen1 { min-height: 0; display: block; padding-bottom: 0; }
  .screen1 .reel-row { min-height: 0; }
  .reel-row { row-gap: var(--gutter); }
  .showreel { grid-column: 1 / -1; aspect-ratio: 16 / 9; align-self: start; }
  .side-col { grid-column: 1 / -1; height: auto; min-height: 0; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-card { aspect-ratio: 3 / 4; }
  .about-text { flex: none; overflow: visible; }   /* текст целиком, бегущая строка — внизу карточки (высота — по ряду с карточками) */
  .about-card { justify-content: space-between; gap: 24px; }
}
@media (max-width: 720px) {
  body { padding-right: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .hero-title { grid-column: 1 / -1; }
  .reel-row { row-gap: var(--gutter); }
  .screen1 { min-height: 0; display: block; padding-bottom: 0; }
  .screen1 .reel-row { min-height: 0; }
  .showreel { aspect-ratio: 16 / 11.7; align-self: start; }   /* в 1,3 раза выше 16:9; высота — от пропорции (растягивание по ряду давало высоту 0: видео внутри — абсолютом) */
  .showreel, .side-col { grid-column: 1 / -1; }
  .side-col { grid-template-rows: auto auto; height: auto; min-height: 0; }
  .pub-card { aspect-ratio: 3 / 4; }   /* фон карточек — на всю карточку, высоту задаёт пропорция */
  /* карточка «о студии» — как на компьютере: текст сверху целиком (не обрезается), бегущая строка — внизу, между ними воздух */
  .about-card { min-height: 220px; justify-content: space-between; gap: 32px; }
  .about-text { flex: none; overflow: visible; }
  .wrap { padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
  .ppanel { width: 100vw; padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-bottom: 80px; padding-top: calc(var(--head-c) + 26px); }   /* сверху — место под кнопку «закрыть» */
  .ppanel.open ~ .ptab { opacity: 1; }   /* список на весь экран: кнопка остаётся видна — по ней список закрывается (подпись «закрыть», site.js) */
  .pview { margin-left: 0; padding-left: 0; }
  .ppreview { display: none; }

  .reels { right: 0; }
  .reel { padding: 0; display: block; }
  .reel .cap { display: block; }
  .desc { display: none; }   /* на телефоне «поделиться» открывает системное меню, шторки нет */
  .bar-tip { display: none; }
  .rail { display: none; }   /* на телефоне ленты нет — листают свайпом */
  .media { position: relative; width: 100%; }
  .acts { justify-content: flex-end; padding: 0; }
  .act-count { order: 0; margin-bottom: 4px; }
  .arrows { display: none; }   /* на телефоне листают свайпом */
  .frame { height: 100%; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
  .acts { position: absolute; right: 18px; bottom: 76px; margin: 0; }   /* низ кнопок — по низу «смотреть проект» (у подписи снизу те же 76px), справа — как поле подписи слева */
  .act { color: var(--on-media); }
  .act .ic { background: var(--shade); color: var(--on-media); }
  .rtop { right: 0; color: var(--on-media); }
  .rtop .count { color: var(--on-media); }
  .cap { padding-right: 84px; padding-bottom: 76px; }   /* справа — место под колонку кнопок 52px */

  .pd-text, .pd-links { grid-column: 1 / -1; }
  /* заголовок первого экрана — всегда в две строки: кегль от ширины экрана (первая строка ≈ 13,1 em) */
  .hero .hero-title { font-size: min(calc((100vw - 18px) / 13.2), 60px); }
  .hero .hero-title .in { white-space: nowrap; }
  /* кнопки ролика на телефоне — поверх видео, как на компьютере, но крупнее (52px) и на тёмном стекле — видны на любом видео; подписи скрыты */
  .reels-page .act { gap: 5px; color: #fff; opacity: 1; }
  .reels-page .act .ic, .reels-page .act:hover .ic { width: 52px; height: 52px; border-radius: 10px; background: rgba(13, 13, 13, .5); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: none; transition: background-color .3s, color .3s; position: relative; }
  .reels-page .act svg { width: 24px; height: 24px; }
  .reels-page .act > span:not(.ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .reels-page .act-list { gap: 10px; }
  .reels-page .act-snd { margin-bottom: 10px; }
  .reels-page .about[aria-expanded="true"] .ic, .reels:not(.unmuted) .sound .ic, .reels-page .share[aria-expanded="true"] .ic { background: #fff; color: var(--fg); }
  .reels-page .act-count { color: #fff; opacity: 1; width: 52px; font-size: 12px; text-align: center; }
  .reels-page .act-num { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: #0d0d0d; font-size: 11px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
  .reels-page .act-num[hidden] { display: none; }
  /* шапка на телефоне: без «Проектов» (они есть в меню) — «Меню» встаёт к правому краю */
  .ptab:not(.mtab) { display: none; }
  .ptab.mtab { right: max(var(--pad), env(safe-area-inset-right, 0px)); }
  /* переключатель плитка / рилсы — ровно по центру экрана (общий сдвиг страницы проектов занимает transform, центровка — через translate) */
  .reels-page .views { translate: -50% 0; }
  .pd-links { justify-content: flex-start; padding-top: 24px; }   /* телефон: ссылки под описанием */
  .pd-meta { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* телефон: подписи — по две в ряд */
  .pd-case--frames { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .in { animation: none !important; }
  .roll .ch { animation: none !important; }
  .reveal, .plist li, .ppanel, .caption-row > div.in { animation: none !important; transition: none !important; }
}

/* названия проектов не переводятся в строчные: где были заглавные — остаются, остальные — как в данных */
.c-title { text-transform: uppercase; }   /* название проекта в подписи на телефоне — заглавными, как везде */
.showreel .ph-title { text-transform: lowercase; }   /* «Showreel» — не проект */

/* ───────── меню на весь экран (как на redcollar.ru) ─────────
   кнопка «Меню» стоит слева от «Проектов» и сама становится «Закрыть» поверх меню;
   слева — знак льда с «m®», справа — крупные пункты, внизу — почта, соцсети и язык */
.mtab { right: var(--mtab-r, 140px); z-index: 960; transition: color .5s var(--ease), opacity .3s, translate .6s cubic-bezier(.45, 0, .25, 1); }   /* «Меню» — слева от «Проектов» */
/* открыт список «проекты»: «Меню» уезжает влево вместе со страницей; «Меню» и «Запустить VEWOO» — под затемнением и размытием, как вся страница
   (обычно они выше затемнения — чтобы были видны при открытом меню) */
html.ppanel-open .mtab { translate: calc(-1 * (var(--panel-w) + var(--tab-w))) 0; z-index: 890; transition: color .5s var(--ease), opacity .3s, translate .9s cubic-bezier(.45, 0, .15, 1); }
html.ppanel-open .vewoo-label { z-index: 890; }
/* вся шапка — логотип, «Запустить VEWOO» с виджетом и «Меню» — уезжает влево вместе со страницей, тем же движением */
.head .logo, .pd-top .logo { transition: translate .6s cubic-bezier(.45, 0, .25, 1); }
.vewoo-label { transition: opacity .3s, translate .6s cubic-bezier(.45, 0, .25, 1); }
html.ppanel-open .head .logo, html.ppanel-open .pd-top .logo {
  translate: calc(-1 * (var(--panel-w) + var(--tab-w))) 0; transition: translate .9s cubic-bezier(.45, 0, .15, 1);
}
html.ppanel-open .vewoo-label { translate: calc(-50% - var(--panel-w) - var(--tab-w)) 0; transition: opacity .3s, translate .9s cubic-bezier(.45, 0, .15, 1); }   /* -50% — его центровка */
.ppanel.open ~ .ptab.mtab { opacity: 1; }   /* общее правило прячет кнопки шапки при открытом списке — «Меню» оставляем видимым */
.menu-open .mtab { color: #fff; }

.menu {
  /* панель справа на всю высоту: колонки 9–12 сетки, белая, со скруглением как у карточек; кнопки шапки — поверх неё */
  position: fixed; z-index: 950; top: var(--pad); bottom: var(--top-gap, var(--pad)); right: var(--pad);   /* низ — на одной линии с низом шоурила */
  width: calc((100% - 2 * var(--pad) - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter));   /* колонки 9–12; 100% — ширина окна без полосы прокрутки, как у сетки (100vw её включает) */
  border-radius: 6px; background: #fff; color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 20px;   /* знак сверху, контакты прижаты к низу; пункты — отдельно, по центру */
  --menu-px: clamp(16px, 1.8vw, 26px);
  padding: 64px var(--menu-px) var(--menu-px);   /* снизу — такой же отступ, как слева */
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .25);
  clip-path: inset(0 0 100% 0 round 6px); visibility: hidden;
  transition: clip-path .8s cubic-bezier(.76, 0, .24, 1), visibility 0s .8s;
}
.menu.open { clip-path: inset(0 round 6px); visibility: visible; transition: clip-path .8s cubic-bezier(.76, 0, .24, 1); }
/* затемнение под открытым меню: перекрывает страницу (и кнопку «Проекты») — ничего под ним не наводится; кнопка «Закрыть» и меню — выше */
.mscrim {
  position: fixed; inset: 0; z-index: 940; background: rgba(13, 13, 13, .2);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s;
}
.menu-open .mscrim { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }

/* знак: шестигранник moroz-mark.svg, «m» по центру, ® справа сверху от неё.
   Объём: за лицевой гранью стопка тёмных слоёв — при наклоне видна толщина, как у монеты;
   на грани — холодный градиент, блик, который ходит за наклоном, и пробегающий отблеск; вокруг мерцают искры */
.menu-mark { display: grid; place-items: center; }
.mm {
  --s: clamp(90px, min(13vw, 24vh), 220px);   /* знак ужимается и по высоте окна, чтобы пункты поместились */
  position: relative; width: var(--s); height: var(--s); perspective: 1100px;
  transform: scale(.86); opacity: 0;
  transition: transform 1.1s var(--ease), opacity .7s var(--ease);
}
.menu.open .mm { transform: none; opacity: 1; transition-delay: .25s; }
.mm::before {   /* холодное свечение за знаком */
  content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(170, 200, 255, .22), rgba(170, 200, 255, 0));
  filter: blur(10px);
}
/* 3D-версия (assets/mark3d.js) рисуется на холсте с полями, чтобы повёрнутый знак не обрезался, и сменяет плоскую */
.mm-gl { position: absolute; inset: -35%; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.mm-gl canvas { display: block; width: 100%; height: 100%; }
.mm.is-3d .mm-gl { opacity: 1; }
.mm-tilt { opacity: 0; }   /* плоский запасной знак — только если 3D не загрузилось */
.mm.no-3d .mm-tilt { opacity: 1; }
.mm-tilt, .mm-float { position: absolute; inset: 0; transform-style: preserve-3d; }
.mm-tilt { will-change: transform; }   /* наклон задаёт скрипт, плавно и без переходов CSS */
.mm-float { animation: mm-float 8s ease-in-out infinite; }
@keyframes mm-float { 50% { transform: translateY(-8px); } }
.mm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-edge { transform: translateZ(calc(var(--k) * var(--s) * -.0045)); fill: var(--c); stroke: var(--c); }   /* чем глубже слой, тем темнее */
.mm-face { transform: translateZ(0); }
.mm-glint { animation: mm-glint 6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes mm-glint { 0%, 55% { transform: translateX(-130px); } 85%, 100% { transform: translateX(130px); } }
.mm-m {
  position: absolute; inset: 0; display: grid; place-items: center; transform: translateZ(1px);
  color: #0d0d0d; font: 600 calc(var(--s) * .4)/1 "Inter", "Helvetica Neue", Arial, sans-serif;
}
.mm-m span { position: relative; transform: translateY(-.09em); }
.mm-m .r { position: absolute; left: 100%; top: .45em; font-size: .29em; margin-left: -.025em; transform: none; }
.mm-m .r svg { display: block; width: .75em; height: .75em; margin-top: .13em; overflow: visible; }
.mm-spark { position: absolute; width: calc(var(--s) * .07); height: calc(var(--s) * .07); left: var(--x); top: var(--y); margin: calc(var(--s) * -.035); transform: translateZ(30px); pointer-events: none; }
.mm-spark svg { fill: #fff; filter: drop-shadow(0 0 6px rgba(200, 220, 255, .9)); animation: mm-twinkle 4.2s ease-in-out var(--d) infinite; transform: scale(0); }
@keyframes mm-twinkle { 0%, 70%, 100% { transform: scale(0) rotate(0); } 82% { transform: scale(1) rotate(45deg); } 92% { transform: scale(.4) rotate(80deg); } }

/* пункты — чуть ниже середины панели (центр блока на 62% высоты), независимо от знака сверху и контактов снизу */
.menu-list { position: absolute; top: 62%; left: var(--menu-px); right: var(--menu-px); transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: .1em; font: 600 clamp(22px, min(2.6vw, 5.2vh), 44px)/1.02 var(--font); letter-spacing: -.045em; text-transform: lowercase; }
.menu-list li { overflow: hidden; padding: .1em 0 .24em; margin: -.1em 0 -.24em; }   /* запас сверху и снизу: маска выезда не срезает ни верх букв, ни хвосты у «у», «р», «д» */
.menu-list a { display: inline-block; transform: translateY(140%); transition: transform .9s var(--ease), opacity .3s; }
.menu.open .menu-list a { transform: none; transition-delay: calc(.3s + var(--i) * .06s), 0s; }
@media (hover: hover) { .menu-list:has(a:hover) a:not(:hover) { opacity: .35; } }   /* гаснут соседи, только когда курсор на самом пункте, а не на пустом месте справа */
.menu-list { justify-items: start; }   /* строки по ширине слова — пустое место справа не считается пунктом */

.menu-foot {
  grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 24px;   /* блок только по высоте контактов — не перекрывает пункты */
  font-size: 13px; letter-spacing: -.045em; color: var(--muted);
}
.menu-foot a { color: var(--fg); }
/* ссылки внизу меню выезжают снизу из-под маски по очереди — когда фон меню уже раскрылся (.8 с); --i ставит site.js */
.menu-foot li { overflow: hidden; padding-bottom: .15em; margin-bottom: -.15em; }
.menu-foot li > a { display: inline-block; transform: translateY(115%); transition: transform .3s var(--ease); }
.menu.open .menu-foot li > a { transform: none; transition: transform .9s var(--ease) calc(.8s + var(--i, 0) * .04s); }
.menu-col { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; align-content: end; }   /* три колонки: соцсети, мессенджеры, контакты */
.menu-foot .opt { color: var(--muted); font: inherit; }
.menu-foot .opt[aria-pressed="true"], .menu-foot .opt:hover { color: var(--fg); }

@media (min-width: 721px) and (max-width: 1100px) {   /* планшет: в 4 колонках меню тесно — панель на 6 колонок (7–12) */
  .menu { width: calc((100% - 2 * var(--pad) - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter)); }
}
@media (max-width: 720px) {
  /* меню на телефоне — во весь экран, без полей и скругления; раскрывается той же шторкой сверху вниз */
  .menu { inset: 0; width: auto; border-radius: 0; padding: calc(var(--head-c) + 46px) var(--menu-px) max(var(--menu-px), env(safe-area-inset-bottom, 0px)); box-shadow: none; clip-path: inset(0 0 100% 0); }
  .menu.open { clip-path: inset(0); }
  html.menu-open .head .logo { z-index: 960; }   /* логотип — поверх открытого меню (на белом — тёмный, он в «негативе») */
  .mm { --s: 180px; }   /* знак в меню на телефоне — крупнее */
  .menu-list { font-size: clamp(34px, 10vw, 44px); }   /* на телефоне меню на весь экран — пункты крупнее, под палец */
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-list a, .mm, .menu-foot, .menu-foot li > a { transition: none !important; }
  .mm-float, .mm-glint, .mm-spark svg { animation: none; }
}

/* 12-колоночная сетка для ориентира (клавиша G): поля — как у .wrap, промежутки между колонками — --gutter */
.grid12 {
  position: fixed; inset: 0; z-index: 990; pointer-events: none; display: none;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding: 0 var(--pad) 0 max(var(--pad), env(safe-area-inset-left, 0px));
}
.grid12.show { display: grid; }
.grid12-probe { display: grid; visibility: hidden; }   /* невидимая копия сетки — по ней reels.js меряет ширину колонки */
.grid12 i { background: rgba(255, 40, 90, .06); border-inline: 1px solid rgba(255, 40, 90, .14); }

/* VEWOO — подпись по центру шапки: тот же шрифт, «негатив» и перекат букв, что у «Меню» и «Проектов» */
.vewoo-label {
  position: fixed; z-index: 960; top: calc(var(--head-c) - 17px); left: 50%; translate: -50% 0;   /* по линии шапки, как кнопки справа; выше затемнения меню — видна и при открытом меню */
  padding: 6px 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-size: 13px; letter-spacing: -.045em; color: #fff; mix-blend-mode: difference;
  transition: opacity .3s, translate .6s cubic-bezier(.45, 0, .25, 1);   /* список «проекты» закрылся — плавно обратно (без translate тут перекрывало правило выше, и подпись прыгала) */
}
.vewoo-label::before { content: ""; position: absolute; inset: -10px -12px; }   /* область клика шире самой подписи */
/* «дыхание» стеклянных сфер VEWOO (карточка на главной, экран VEWOO): поворот и сжатие — у сферы, контур — обрезкой у .orb-shape */
@keyframes vewoo-alive {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(4deg) scale(1.015, .985); }
  50% { transform: rotate(-2deg) scale(.99, 1.012); }
  75% { transform: rotate(2deg) scale(1.01, .992); }
}
@keyframes vewoo-blob {   /* контур — обрезкой у .orb-shape, в такт vewoo-alive */
  0%, 100% { border-radius: 50%; }
  25% { border-radius: 53% 47% 51% 49% / 48% 53% 47% 52%; }
  50% { border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%; }
  75% { border-radius: 51% 49% 53% 47% / 47% 51% 49% 53%; }
}
.vw-widget__circle .orb-shape { animation: vewoo-blob 3.4s ease-in-out infinite; }
/* облачко карточки VEWOO: фон — живая капля на холсте (site.js, liveBubble), холст с запасом под волны и тень */
.vewoo-pop__bg { position: absolute; left: -24px; top: -24px; pointer-events: none; }

/* ───────── переход в тёмный блок «студия» (assets/studio.js) ─────────
   секция выше экрана, внутри «залипает» экран со знаком; пока её проматывают, знак растёт и заливает экран тёмным */
.studio-tr { position: relative; height: 750vh; height: 750svh; }   /* рост знака — первые 35 % прокрутки, дальше чёрный экран: волна → Земля → страны → Казахстан; на последний экран заходит белая шторка — блок VEWOO (.talk) */
/* блок VEWOO — он же белая шторка: заходит на последний экран студии (история студии считается без него — studio.js, wave.js)
   и наезжает снизу на застывший чёрный экран; в центре — VEWOO (прилетает сверху, site.js) */
.talk { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.talk .foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; align-items: baseline; padding-inline: calc(2 * var(--pad)); color: rgba(255, 255, 255, .5); }   /* поверх тёмной панели */
/* соцсети по центру, телефон и почта справа; ссылки ярче подписи и с перекатом букв */
.foot-soc, .foot-contacts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-contacts { justify-self: end; }
@media (max-width: 720px) { .foot-contacts { justify-self: start; } }
/* футер «Контактов» — как бургер-меню: слева живой знак «m®», справа четыре колонки ссылок (пункты меню, две колонки соцсетей,
   мессенджеры — 13px, как внизу меню), под ними строка «©2026 moroz» и «by moroz». По 12-колоночной сетке: знак — под первой
   карточкой, колонки — с 5-й, 7-й, 9-й и 11-й колонок; низ знака и колонок — на одной линии, как колонки в меню */
.foot--map { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: clamp(32px, 3.4vw, 56px) var(--gutter); padding-bottom: clamp(12px, 1.2vw, 20px); }   /* снизу — лента проектов почти у края окна */
.page-sec--foot { padding-top: clamp(40px, 4.5vw, 80px); }   /* перед футером «Контактов» — вдвое меньше обычного */
/* знак — тот же живой, что в шапке (холст рисует initLogos, состояние меняется вместе с шапкой), только 72px; поверх — «m®»,
   как в знаке-монограмме (MOROZ/mark-m.html, .studio-tr__m). Буква — .483 размера знака: здесь радиус льда — половина размера */
.foot-logo { --s: 72px; grid-column: 1 / 5; position: relative; width: var(--s); height: var(--s); color: var(--fg); isolation: isolate; background: var(--bg); }   /* своя группа наложения: «m®» смешивается только со знаком и фоном под ним */
.foot-logo .logo-mark { position: absolute; inset: 0; width: auto; height: auto; }
.foot-logo__m {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  font: 600 calc(var(--s) * .483)/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: normal; text-transform: none;
  mix-blend-mode: difference;   /* на знаке — светлая, на фоне — тёмная: когда знак рассыпается в газ, буква не пропадает и не сливается с каплями */
}
.foot-logo__m > span { position: relative; transform: translateY(-.09em); }   /* центр по x-высоте Inter */
.foot-logo__m .r { position: absolute; left: 100%; top: .48em; font-size: .3em; font-weight: 500; margin-left: -.12em; line-height: 1; }   /* ® вне потока — центр по «m» */
.foot-col { display: grid; list-style: none; margin: 0; padding: 0; font: 600 clamp(22px, 2.6vw, 44px)/1.3 var(--font); letter-spacing: -.045em; color: var(--fg); white-space: nowrap; }   /* крупно, как пункты бургер-меню (.menu-list). Строка 1.3 — перекат букв (.roll) обрезает по строке, при 1.02 срезались хвосты «у», «р» */
.foot-nav { grid-column: 5 / -1; display: flex; justify-content: flex-end; gap: clamp(24px, 3vw, 56px); }   /* пункты подряд, по правому краю */
.foot-base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid rgba(13, 13, 13, .14); }   /* под тонкой линией, как у цифр на «Студии» */
/* лента проектов в самом низу — та же, что на главной (works.js): до краёв окна, края наклонённой ленты не выходят за окно */
.foot-works { grid-column: 1 / -1; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); overflow-x: clip; }
@media (max-width: 720px) {
  .foot--map { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px var(--gutter); }   /* знак, под ним колонки по две, внизу — строка © */
  .foot-logo { grid-column: 1 / -1; }
  .foot-nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 4px 24px; }
}
.talk .foot a { color: rgba(255, 255, 255, .8); transition: color .3s; }
.talk .foot a:hover, .talk .foot a:focus-visible { color: #fff; }
/* панель — как карточка VEWOO: то же фиолетовое видео, пока оно грузится — тот же фиолетовый градиент.
   Пока шторка поднимается, панель меньше экрана (вокруг белое, углы скруглены) и по прокрутке расширяется — к моменту,
   когда шторка закрыла экран, она во весь экран. Сужение — масштабом рамки (со скруглением), а содержимое .talk-bg__in обратным
   масштабом остаётся на месте: та же картинка, что обрезка видео, но её ведёт видеокарта — видео не перерисовывается каждый кадр
   прокрутки (site.js, growBg) */
.talk-bg { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.talk-bg__in {
  position: absolute; inset: 0; will-change: transform;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(140, 120, 255, .16) 46%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 90% at 20% 100%, #3a2d8f 0%, rgba(58, 45, 143, 0) 60%),
    #120e2c;
}
.talk-bg video { display: block; width: 100%; height: 100%; object-fit: cover; }   /* футер внутри последнего экрана: страница кончается ровно этим экраном, VEWOO — точно в центре окна */
/* заголовок по центру сверху, как заголовки студии — 36px */
.talk-title { position: relative; z-index: 1; color: #fff; margin: 0; padding: clamp(80px, 8vw, 140px) var(--pad) 0; text-align: center; font-weight: 400; font-size: clamp(28px, 3.4vw, 60px); line-height: 1.1; letter-spacing: -.045em; }   /* кегль — как у h1 первого экрана */
/* появляется как заголовки студии: строки выезжают снизу из-под маски — вместе с прилётом VEWOO (.is-on на .talk — site.js);
   при прокрутке вверх так же уезжает вниз под маску — вместе с улётом VEWOO */
.talk-title .ln { display: block; overflow: hidden; padding: .04em 0 .12em; margin-bottom: -.12em; }
.talk-title .in { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }   /* уезжает так же, как выезжает */
.talk:is(.is-on, .is-titled) .talk-title .in { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }   /* две строки — по очереди */
/* «Запустить VEWOO» — на прежнем месте подписи под сферой, без анимаций. Запускает подключённого ассистента
   (widget.js — по атрибуту data-va-open); своей сферы VEWOO здесь больше нет */
.talk-run {
  position: absolute; z-index: 1; left: 50%; top: calc(50% + 101px); translate: -50% 0; white-space: nowrap;   /* там же, где была подпись под сферой: 101px ниже центра экрана */
  padding: 0; border: 0; background: none; font: inherit; font-size: 20px; letter-spacing: -.045em; color: #fff; cursor: pointer;   /* на тёмной панели */
}
@media (max-width: 720px) { .talk-run { top: calc(50% + 45px); font-size: 14px; } }   /* на телефоне сфера была уменьшена до .45 */
.studio-anchor { position: absolute; left: 0; top: 200vh; top: 200svh; }
/* страница студии: сразу чёрный экран с заголовком — знака и его роста нет, история короче на эти 35 % (studio.js, wave.js) */
.studio-tr--open { height: 560vh; height: 560svh; }
body:has(.studio-tr--open) > .head { position: absolute; left: 0; right: 0; top: 0; }   /* шапка не занимает места — чёрный экран от самого верха (логотип и кнопки закреплены сами) */
.studio-tr--open .studio-tr__stick { background: #0d0d0d; }
.studio-tr--open .studio-tr__mark { display: none; }
/* «since 2020 in kazakhstan» — небольшая подпись по центру внизу, под картой Казахстана; появляется в конце истории (класс ставит wave.js) */
.studio-tr__base { position: absolute; left: 0; right: 0; bottom: 12vw; z-index: 1; margin: 0; color: #fff; pointer-events: none; text-transform: none; text-align: center; mix-blend-mode: difference; }   /* инверсия: белые буквы на точках становятся чёрными (на самом блоке — у него свой z-index, внутри смешивать не с чем) */
.studio-tr__small {
  display: block; font-size: max(13px, 1vw); line-height: 1; white-space: nowrap;
  opacity: 0; translate: 0 .4em; transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.studio-tr__base.is-small .studio-tr__small { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease), translate .9s var(--ease); }
.studio-tr__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.studio-tr__mark { --s: clamp(120px, 13vw, 210px); position: relative; width: var(--s); height: var(--s); will-change: transform; }
.studio-tr__mark > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.studio-tr__mark polygon { fill: #0d0d0d; stroke: #0d0d0d; stroke-width: 14; stroke-linejoin: round; }   /* как moroz-mark.svg */
/* в покое знак живой, как в шапке (холст рисует studio.js); когда начинает расти — сам перетекает в лёд (сплошной
   шестигранник), и его незаметно подменяет векторный такой же формы — он и заливает экран */
.studio-tr__live { position: absolute; inset: 0; }
.studio-tr__live canvas { position: absolute; }   /* размер и поля задаёт скрипт */
.studio-tr__solid { visibility: hidden; }
.studio-tr__m {   /* «m®» — один в один как в файле логотипа (MOROZ/mark-m.html), белые; тают в начале роста */
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  font: 600 calc(var(--s) * .4)/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: normal; text-transform: none;
}
.studio-tr__m > span { position: relative; transform: translateY(-.09em); }   /* центр по x-высоте Inter */
/* ® вынесен из потока, чтобы центр считался только по «m» */
.studio-tr__m .r { position: absolute; left: 100%; top: .48em; font-size: .3em; font-weight: 500; margin-left: -.12em; line-height: 1; }
/* текст студии — поверх залитого экрана; проявляется и выплывает снизу, когда экран стал чёрным (.is-dark — studio.js) */
.studio-tr__text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 10vh; color: #fff; pointer-events: none; }   /* поле снизу — текст чуть выше середины */
/* поле светлых точек-волн справа, потом Земля в центре (wave.js); проявляется вместе с текстом */
.studio-tr__wave {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;   /* на весь экран: Земля собирается в центре; у текста поле гаснет само (wave.js) */
  opacity: 0; transition: opacity .4s var(--ease);
}
.studio-tr.is-dark .studio-tr__wave { opacity: 1; transition: opacity 1.4s var(--ease) .2s; }
/* заголовок — как h1 первого экрана: строки (их собирает studio.js по переносам) выезжают снизу из-под маски по очереди */
.studio-title .ln { display: block; overflow: hidden; padding: .04em 0 .12em; margin-bottom: -.12em; }
.studio-title .in { display: inline-block; transform: translateY(110%); transition: transform .5s var(--ease); }
.studio-tr.is-dark .studio-title .in { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }
/* «наши клиенты по всему миру» — тот же заголовок, но выезжает, пока горят страны (.is-on — wave.js); внизу слева, в две строки */
.studio-tr.is-dark .studio-tr__clients .studio-title .in { transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }   /* уезжает так же, как выезжает */
.studio-tr.is-dark .studio-tr__clients.is-on .studio-title .in { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }
.studio-tr__clients { justify-content: flex-end; padding-bottom: var(--top-gap, calc(var(--head-c) - 11.7px)); }   /* внизу экрана; от низа — как логотип от верха (как у первого экрана) */
.studio-tr__clients .studio-title { max-width: none; }   /* две строки — перенос задан в тексте */
/* заголовок слева, «подробнее о студии» справа — по нижней строке, как «все проекты» над каруселью */
.studio-tr__row { display: flex; justify-content: space-between; align-items: last baseline; gap: 24px; }
.studio-more { font-size: 13px; pointer-events: auto; }
.studio-more .ln { display: block; overflow: hidden; padding: .04em 0 .12em; margin-bottom: -.12em; }
.studio-more .in { display: inline-flex; align-items: center; gap: 3px; transform: translateY(110%); transition: transform 1.1s var(--ease) .1s; }   /* уезжает вместе с нижней строкой заголовка (у неё задержка .1s) */
.studio-tr__clients.is-on .studio-more .in { transform: none; transition: transform 1.1s var(--ease) .3s; }
.studio-tr__clients:not(.is-on) .studio-more { pointer-events: none; }   /* спрятанная ссылка не ловит клики */
.studio-title { margin: 0; max-width: 18em; font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -.045em; }

/* ───────── второй блок: проекты горизонтальной каруселью (assets/works.js) ───────── */
.works { padding-block: clamp(96px, 12vw, 200px) clamp(48px, 6vw, 100px); overflow-x: clip; }   /* сверху — больше воздуха после первого экрана; края наклонённой ленты не выходят за окно */
.works-head { display: flex; justify-content: space-between; align-items: last baseline; margin-bottom: clamp(24px, 3vw, 48px); font-size: 13px; }
/* заголовок над сеткой — в две строки, 36px, строчными, как весь сайт; «все проекты» — по нижней строке */
.works-label { font-size: 36px; line-height: 1.1; letter-spacing: -.045em; }
/* «все проекты» — 13px, как кнопки в шапке. Стрелка — та же, что в кнопках карточек
   публикаций (13px), только без плашки; стоит рядом с подписью, как значок у «Меню» */
.works-all { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.works-ic { width: 13px; height: 13px; flex: none; }
/* лента: карточки 9:16 одного размера в ряд, выходит за поля до краёв окна; едет сама (works.js).
   Поля сверху и снизу — запас под увеличение карточки при наведении, иначе лента его обрежет */
.works-grid {
  display: flex; gap: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain;
  margin: -34px calc(-1 * var(--pad)); padding: 34px var(--pad);
  scrollbar-width: none; -webkit-user-select: none; user-select: none;
}
.works-grid::-webkit-scrollbar { display: none; }
.work { flex: none; width: clamp(200px, 17vw, 300px); }
.work-link { display: grid; gap: 10px; -webkit-user-drag: none; }
.work-img { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--ph);
  transition: scale .4s cubic-bezier(.45, 0, .55, 1); -webkit-mask-image: -webkit-radial-gradient(white, black); }   /* маска — Safari ровно обрезает углы при масштабе */
.work-link:hover .work-img { scale: 1.055; transition-duration: .45s; transition-timing-function: cubic-bezier(.33, 1, .68, 1); }   /* увеличение: мягкий старт без рывка, долгое плавное торможение; уменьшение — плавное в обе стороны */   /* при наведении карточка чуть увеличивается */
.work-img img, .work-vid { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; pointer-events: none; }   /* на пиксель за рамку: при увеличении по краю не проступает подложка-цвет */
/* наведение — как превью в списке проектов: шот открывается шторкой сверху вниз; уход — шторка уходит обратно вверх */
.work-vid { clip-path: inset(0 0 100% 0); transition: clip-path .75s cubic-bezier(.65, 0, .35, 1); }
.work-link.is-playing .work-vid { clip-path: inset(0 0 0 0); }
.work-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.work-name { text-transform: uppercase; }   /* названия проектов — капсом */
@media (max-width: 720px) {
  .work { width: 44vw; }   /* лента ниже: карточки меньше */
  .works-head { flex-direction: column; align-items: flex-start; gap: 14px; }   /* «все проекты» — под заголовком: заголовок не жмётся, ссылка не уходит за край */
}
@media (max-width: 380px) {   /* узкий телефон: карточки публикаций по одной в ряд — виджету VEWOO хватает места под текстом */
  .pubs { grid-template-columns: minmax(0, 1fr); }
  .pub-card { aspect-ratio: 4 / 5; }
}


/* ───────── появление при прокрутке (site.js → initScrollReveal) ───────── */
.sr { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }
.sr.is-in { opacity: 1; transform: none; }
.sr-lines .ln { display: block; overflow: hidden; padding: .04em 0 .1em; margin-bottom: -.1em; }
.sr-lines .in { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1s); }
.sr-lines.is-in .in { transform: none; }
@media (prefers-reduced-motion: reduce) { .sr, .sr-lines .in { transition: none !important; } }

/* кнопки-капсулы: чёрная, контурная и белая (на тёмном); текст с перекатом букв, стрелка — как у «все проекты» */
.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 12px 20px; border-radius: 999px;
  background: var(--fg); color: #fff; font-size: 14px; white-space: nowrap; transition: background-color .35s, color .35s, box-shadow .35s;
}
.btn:hover, .btn:focus-visible { background: #2c2c2e; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .2); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0); }
.btn--light { background: #fff; color: var(--fg); }
.btn--light:hover, .btn--light:focus-visible { background: rgba(255, 255, 255, .85); }

/* ───────── страницы «студия» и «контакты» — та же сетка, типографика и карточки, что на главной ───────── */
.page-hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 24px var(--gutter);
  padding-block: clamp(32px, 5vw, 80px) clamp(24px, 2.5vw, 40px);   /* как у .hero на главной */
}
.page-hero .hero-title { grid-column: 1 / 7; font-size: clamp(28px, 3.4vw, 60px); }   /* как H1 на главной (.hero .hero-title) */
.page-lead { grid-column: 9 / 13; margin: 0; font-size: 18px; line-height: 1.3; text-transform: none; }   /* как текст в карточке «о студии» */
.page-video { position: relative; aspect-ratio: 16 / 7; border-radius: 6px; overflow: hidden; background: var(--ph); }
.page-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-sec { padding-top: clamp(72px, 9vw, 160px); }
/* политика конфиденциальности: слева — стеклянная плашка с содержанием (липкая), справа — разделы; разделы отделены только отступами */
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 40px var(--gutter); }   /* сразу под заголовком — как шоурил на главной: отступ только у .page-hero */
.legal-toc {
  grid-column: 1 / 5; position: sticky; top: calc(var(--head-c) + 40px);
  max-height: calc(100vh - var(--head-c) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;   /* 16 пунктов: на невысоком экране плашка не уходит за низ окна — прокручивается внутри */
  display: grid; gap: 18px; padding: 22px 24px; border-radius: 6px;
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);   /* стекло — как у плашек сайта (blur 10px, saturate 1.4), только светлое: под ним светлый фон */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 12px 40px rgba(13, 13, 13, .06);
}
.legal-toc small { font-size: 13px; color: var(--muted); }
.legal-toc ol { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.3; }
.legal-toc li { display: flex; gap: 12px; align-items: baseline; color: var(--muted); transition: color .6s var(--ease); }
.legal-toc li > span { flex: none; width: 1.6em; font-size: 13px; }   /* только номер: внутри ссылки — буквы переката (.roll), их не трогать */
.legal-toc a { color: var(--muted); transition: color .6s var(--ease); }   /* подсветка переходит плавно, без мигания */
.legal-toc li.is-on, .legal-toc li.is-on a, .legal-toc a:hover { color: var(--fg); }   /* раздел, который сейчас читают (site.js → initLegalToc) */
.legal-text { grid-column: 6 / 12; }
.legal-sec { scroll-margin-top: calc(var(--head-c) + 40px); }
.legal-sec + .legal-sec { margin-top: clamp(48px, 5vw, 88px); }
.legal-sec h2 { margin: 0 0 18px; font-weight: 500; font-size: 22px; line-height: 1.15; }
.legal-sec h2 span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.legal-body { font-size: 16px; line-height: 1.5; text-transform: none; }
.legal-body p, .legal-body ul { margin: 0 0 .9em; }
.legal-body > :last-child { margin-bottom: 0; }
.legal-body ul { padding-left: 1.1em; }
.legal-body li + li { margin-top: .45em; }
.legal-body b { font-weight: 500; }
.legal-body a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(13, 13, 13, .3); text-underline-offset: .18em; }
@media (max-width: 720px) {
  .legal-toc, .legal-text { grid-column: 1 / -1; }
  .legal-toc { position: static; }
  .legal-sec h2 { font-size: 20px; }
  .legal-body { font-size: 15px; }
}
/* заголовок раздела — как «превращаем идеи в незабываемую форму»: 36px; справа — подпись 13px */
.sec-head { display: flex; justify-content: space-between; align-items: last baseline; gap: 24px; margin-bottom: clamp(24px, 3vw, 48px); font-size: 13px; color: var(--muted); }
.sec-title { margin: 0; font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--fg); }
.hairline { border-top: 1px solid rgba(13, 13, 13, .14); }

/* цифры о студии: три колонки с линией сверху */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.fact { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(13, 13, 13, .14); }
.fact b { font-weight: 500; font-size: clamp(44px, 5.4vw, 96px); line-height: .95; }
.fact span { font-size: 13px; color: var(--muted); }

/* услуги: строки по 12-колоночной сетке — номер, название, описание; линии между строками */
.svc-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(13, 13, 13, .14); }
.svc-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px var(--gutter); align-items: baseline;
  padding-block: clamp(18px, 2vw, 30px); border-top: 1px solid rgba(13, 13, 13, .14);
}
.svc-num { grid-column: 1 / 2; font-size: 13px; color: var(--muted); }
.svc-name { grid-column: 2 / 7; font-size: clamp(26px, 2.8vw, 48px); font-weight: 500; line-height: 1.02; }
.svc-text { grid-column: 8 / 13; margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.45; color: var(--muted); text-transform: none; }

/* процесс: три белые карточки, номер сверху, этап снизу */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.step {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: clamp(240px, 24vw, 360px);
  padding: clamp(14px, 1.4vw, 22px); border-radius: 6px; background: #fff;
}
.step-num { font-size: 13px; color: var(--muted); }
.step h3 { margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 44px); font-weight: 500; line-height: 1; }
.step p { margin: 0; max-width: 36ch; font-size: 15px; line-height: 1.45; color: var(--muted); text-transform: none; }

/* манифест — чёрный блок, как экран студии на главной */
.statement {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: clamp(320px, 36vw, 580px);
  padding: clamp(18px, 3vw, 48px); border-radius: 6px; background: #0d0d0d; color: #fff;
}
.statement-text { margin: 0; max-width: 17em; font-weight: 400; font-size: clamp(28px, 3.4vw, 60px); line-height: 1.04; }
.statement-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* призыв в конце страницы: крупный заголовок слева, кнопки справа по нижней строке */
.cta {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 24px var(--gutter);
  padding-block: clamp(72px, 9vw, 160px) clamp(48px, 6vw, 100px);
}
.cta .hero-title { grid-column: 1 / 9; }
.cta-btns { grid-column: 9 / 13; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* контакты: сразу под заголовком — карточки (почта и телефон, мессенджеры, соцсети), ниже VEWOO */
.ct-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.ct-card {
  grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: clamp(220px, 20vw, 300px);
  padding: clamp(14px, 1.4vw, 22px); border-radius: 6px; background: #fff;
}
.ct-card h2 { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.ct-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: clamp(18px, 1.7vw, 28px); line-height: 1.2; }
.ct-links li { color: var(--fg); }
/* карточка VEWOO — как экран VEWOO на главной: фиолетовое видео на фоне, слева текст. Вся карточка запускает подключённого
   ассистента (widget.js, data-va-open); скругление и обрезка — у обёртки видео */
.ct-vw {
  grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  min-height: clamp(300px, 30vw, 460px); padding: clamp(14px, 1.4vw, 22px); border-radius: 6px; color: #fff;   /* поля — как у белых карточек выше */
  cursor: pointer;   /* наведение — как у карточки VEWOO на главной: курсор растёт (data-cursor) */
}
.ct-vw-bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }   /* в Safari — ещё и обрезка (см. .pub-card) */
.ct-vw > :not(.ct-vw-bg) { position: relative; z-index: 1; }
.ct-vw-copy { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; }
.ct-vw-copy small { font-size: 13px; color: rgba(255, 255, 255, .7); text-transform: none; }
.ct-vw-copy h2 { margin: 0; font-weight: 400; font-size: clamp(28px, 3.2vw, 56px); line-height: 1.04; }
.ct-vw-run { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: #fff; cursor: pointer; }   /* стрелка — как у «все проекты» */

@media (max-width: 720px) {
  .page-hero .hero-title, .page-lead, .cta .hero-title, .cta-btns { grid-column: 1 / -1; }
  .cta-btns { justify-content: flex-start; }
  .page-video { aspect-ratio: 4 / 3; }
  .facts, .steps { grid-template-columns: minmax(0, 1fr); }
  .svc-num { grid-column: 1 / -1; }
  .svc-name, .svc-text { grid-column: 1 / -1; }
  .ct-card { grid-column: 1 / -1; min-height: 0; gap: 20px; }   /* на телефоне карточки по содержимому, без пустоты внутри */
  .ct-vw { grid-template-columns: minmax(0, 1fr); min-height: 440px; overflow-x: clip; }   /* по бокам не выпускаем облачко виджета (его холст до отрисовки — 300px): страница не уезжает вбок; сверху сфера влетает как раньше */
  .ct-vw-copy { justify-content: flex-start; gap: 18px; }   /* текст — сверху, внизу карточки место под прилетающую сферу VEWOO (widget.js ставит её у низа) */
}

/* ───────── страница проектов в стиле сайта: светлый фон, тёмный текст, карточки со скруглением 6px.
   Устройство то же (рилсы и плитка); на телефоне ролик на весь экран — там всё как было ───────── */
.reels-page .pre { background: #0b0b0c; color: var(--on-media); }
.reels-page .pre-num { color: var(--on-media); }
@media (min-width: 721px) {
  .reels-page { background: #0d0d0d; }   /* фон страницы проектов — чёрный, по нему дымка цвета проекта */
  .ambient { background: #0b0b0c; }
  .ambient::after { display: none; }
  .reels-page .rtop { color: var(--fg); }
  .reels-page .rtop .count { color: var(--muted); opacity: 1; }
  .frame { border-radius: 6px; }
  /* кнопки — как кнопка в углу карточек на главной: тёмный квадрат со скруглением карточек (6px), белая иконка;
     при наведении — белый квадрат, иконка тёмная, без увеличения */
  .arrows { gap: 6px; }
  /* стекло — как кнопка на карточке Aurora на главной: полупрозрачный белый, размытие фона, белая иконка; наведение — белая */
  .arrow { width: 32px; height: 32px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; transition: background-color .3s, color .3s; }
  .arrow svg { width: 15px; height: 15px; }
  .arrow:hover { background: #fff; color: var(--fg); }
  .arrow svg, .arrow:hover svg, .arrow.prev:hover svg, .arrow.next:hover svg { transform: none; transition: none; }   /* при наведении иконка стоит на месте — меняется только цвет */
  .act-count { color: #fff; opacity: 1; width: 32px; font-size: 10px; text-align: center; }   /* «01 / 14» ровно по ширине кнопки: при моноширинных цифрах 10px — это 32px */
  /* ролик — ровно по центру экрана, ниже шапки: три колонки — описание, ролик, пусто; кнопки висят справа от ролика и в ширину не считаются */
  /* всё по 12-колоночной сетке (как наложение по клавише G): ширину колонки --colw ставит reels.js.
     Ролик — колонки 5–8, кнопки — с 9-й, лента миниатюр — 4-я. Высота ролика — 9:16 от ширины (в низком окне — по высоте экрана) */
  .reels-page {
    --fw: calc(4 * var(--colw, 105px) + 3 * var(--gutter));
    --fh: min(calc(var(--fw) * 16 / 9), calc(100vh - 2 * (var(--head-c) + 30px)));   /* 9:16 от ширины 4 колонок, но с местом сверху под шапку и снизу под переключатель вида */
  }
  .reel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 32px; padding-block: calc(var(--head-c) + 30px); }   /* ролик по центру экрана по высоте, между шапкой и переключателем */
  .media { grid-column: 2; height: auto; }
  /* размер ролика — явно: высота = экран минус поля сверху и снизу, ширина = 9/16 высоты (иначе колонка «по содержимому» в Chrome схлопывается в ноль) */
  .frame { height: var(--fh); width: var(--fw); aspect-ratio: auto; max-width: none; }
  @supports (font: -apple-system-body) { .frame { clip-path: inset(0 round 6px); } }   /* скругление видео в Safari (см. .pub-card) */
  /* кнопки — сразу за роликом, на расстоянии промежутка сетки (--gutter, как между колонками и карточками); по высоте ролика.
     Колонка закреплена: при листании стоит на месте, видна колонка текущего проекта (у каждого свой лайк) */
  .acts {
    position: fixed; top: calc(50vh - var(--fh) / 2); bottom: calc(50vh - var(--fh) / 2); padding: 0; align-items: flex-start; z-index: 6;
    transition: opacity .3s, visibility 0s;
    left: calc(50% + var(--fw) / 2 + var(--gutter));   /* = начало 9-й колонки */
  }
  /* стрелки «вверх / вниз» — в колонке кнопок справа, по центру высоты ролика; едут вместе с роликом, как остальные кнопки */
  .act-top { position: absolute; left: 0; top: 50%; translate: 0 -50%; align-items: flex-start; gap: 10px; }
  .act-snd { display: flex; }   /* звук — наверху колонки кнопок */
  .reel:not(.is-active) .acts { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  /* лента проектов слева — впритык к ролику, по его высоте; к краям растворяется. Текущий — по центру, ярче и крупнее */
  .rail {
    position: fixed; z-index: 6; top: calc(50vh - var(--fh) / 2); height: var(--fh); width: var(--colw, 105px);
    right: calc(50% + var(--fw) / 2 + var(--gutter)); overflow: hidden;   /* = ровно 4-я колонка */
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);   /* растворение — только у самых краёв */
    transition: opacity .4s;
  }
  .view-grid .rail { opacity: 0; pointer-events: none; }
  .rail { touch-action: none; -webkit-user-select: none; user-select: none; }
  html.is-grabbing, html.is-grabbing * { -webkit-user-select: none !important; user-select: none !important; }
  .rail.is-grab .rail-item { pointer-events: none; }   /* пока тянут — миниатюры не реагируют на наведение */
  .rail-list.is-ease { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }   /* отпустили — лента мягко доезжает до миниатюры */
  /* лента едет вместе с прокруткой роликов (положение ставит reels.js на каждом кадре) — без своей анимации и без отставания */
  .rail-list { display: flex; flex-direction: column; gap: 10px; padding: 0; will-change: transform; }   /* без полей: текущая миниатюра — ровно по краям колонки */
  .rail-item {
    display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
    background: rgba(255, 255, 255, .06); opacity: .65; scale: .9;
    transition: opacity .6s cubic-bezier(.65, 0, .35, 1), scale .8s cubic-bezier(.65, 0, .35, 1);   /* соседи чуть мельче и тусклее; смена — плавно, вместе с движением ленты */   /* соседи чуть мельче и тусклее; смена — плавно, вместе с движением ленты */
  }
  .rail-item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .rail-item:hover { opacity: .9; transition-duration: .3s; }
  .rail-item.is-on { opacity: 1; scale: 1; }   /* текущая — ярче и крупнее соседей, без рамки */
  /* номер у текущей миниатюры — внизу по центру, на тёмном стекле: полупрозрачный чёрный и сильное размытие */
  .rail-item { position: relative; }
  .rail-num {
    position: absolute; left: 50%; bottom: 6px; translate: -50% 0; padding: 2px 6px; border-radius: 4px;
    background: rgba(13, 13, 13, .32); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    color: #fff;
    font-size: 10px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
    opacity: 0; transition: opacity .6s cubic-bezier(.65, 0, .35, 1);
  }
  .rail-item.is-on .rail-num { opacity: 1; }
  .act-top .act-count { display: none; }   /* номер проекта у стрелок убран */
  .reels-page .act { align-items: flex-start; gap: 5px; }
  .reels-page .act { color: var(--muted); opacity: 1; }
  .reels-page .act .ic { width: 32px; height: 32px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s, color .3s; }
  .reels-page .act .ic, .reels-page .act:hover .ic { transform: none; }
  .reels-page .act:hover .ic { background: #fff; color: var(--fg); }
  .reels-page .about[aria-expanded="true"] .ic { background: #fff; color: var(--fg); }   /* описание открыто — кнопка белая, как нажатая */
  .reels:not(.unmuted) .sound .ic { background: #fff; color: var(--fg); }   /* звук выключен — кнопка горит белой */
  /* шторка «поделиться» поверх ролика, у его нижнего края (по умолчанию скрыта). Отступ от краёв ролика — 12px, высота — по содержимому */
  .desc {
    position: absolute; z-index: 3; bottom: 12px; left: 12px; right: 12px; max-height: calc(100% - 24px);   /* внутри ролика (.frame обрезает по своим краям) */
    display: flex; flex-direction: column; gap: 18px; --sheet-p: clamp(14px, 1.4vw, 22px); padding: var(--sheet-p); overflow-y: auto;   /* поля — как у белых карточек (.ct-card) */ overscroll-behavior: contain;
    border-radius: 6px; background: #fff; color: var(--fg);
    /* шторка: спрятана за нижним краем ролика, выезжает снизу и уезжает обратно вниз (без проявления), кривая — как у шторок в телефоне */
    visibility: hidden; transform: translateY(calc(100% + 14px));
    transition: transform .45s cubic-bezier(.4, 0, 1, 1), visibility 0s .45s;
  }
  .reel.is-desc .desc { visibility: visible; transform: none; transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
  .desc { cursor: grab; }
  .desc.is-drag { cursor: grabbing; user-select: none; transition: none !important; }   /* пока тянут — едет за курсором без задержки */
  .desc-grip { position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 36px; height: 4px; border-radius: 2px; background: rgba(13, 13, 13, .16); }
  /* пока описание открыто, ролик под ним затемняется — карточка не сливается со светлым видео */
  .frame::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
  .reel.is-desc .frame::after { opacity: 1; }
  /* значок «плей / пауза» по клику — квадрат, как кнопки справа, но тёмное стекло: виден и на светлом, и на тёмном видео */
  .flash { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 6px; background: rgba(13, 13, 13, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; z-index: 3; }
  .flash svg { width: 24px; height: 24px; }
  /* полоска прогресса: при наведении толще, над курсором — окошко с кадром из этого места и временем (site: reels.js) */
  .bar { z-index: 4; cursor: pointer; transition: height .25s var(--ease); mix-blend-mode: difference; background: rgba(255, 255, 255, .3); }   /* в инверсии: видна и на светлом, и на тёмном видео */
  .bar i { background: #fff; }
  .bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; }   /* зона наведения выше самой полоски */
  .bar.is-scrub { height: 6px; }
  .bar-tip {
    position: absolute; z-index: 5; left: 0; bottom: 16px; width: clamp(80px, 7vw, 110px); aspect-ratio: 9 / 16; translate: -50% 0;
    border-radius: 6px; overflow: hidden; background: #0d0d0d; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
  }
  .bar.is-scrub + .bar-tip { opacity: 1; visibility: visible; transition: opacity .2s; }
  .bar-tip video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .bar-tip b { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .desc-close { position: absolute; top: var(--sheet-p); right: var(--sheet-p); width: 28px; height: 28px; border: 0; border-radius: 6px; padding: 0; display: grid; place-items: center; background: #f2f2f2; color: var(--fg); cursor: pointer; transition: background-color .3s, color .3s; }
  .desc-close:hover { background: #1a1a1b; color: #fff; }
  .desc-close svg { width: 14px; height: 14px; }
  /* шторка «поделиться»: всё 13px, как в шапке; заголовок — на одной линии с крестиком; пункты — серая иконка, как крестик, и подпись */
  .sheet-title { margin: 0; padding-right: 36px; font-size: 13px; line-height: 28px; letter-spacing: -.045em; color: var(--muted); }
  .sheet-list { display: grid; gap: 8px; }
  .sheet-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0;
    background: none; color: var(--fg); font: inherit; font-size: 13px; letter-spacing: -.045em; text-align: left; cursor: pointer;
  }
  .sheet-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #f2f2f2; color: var(--fg); transition: background-color .3s, color .3s; }
  .sheet-item:hover .sheet-ic, .sheet-item:focus-visible .sheet-ic { background: #1a1a1b; color: #fff; }   /* наведение — как у крестика */
  .sheet-ic svg { width: 14px; height: 14px; }
  .reels-page .share[aria-expanded="true"] .ic { background: #fff; color: var(--fg); }   /* шторка открыта — кнопка белая */
  /* счётчик лайков — белый кружок в углу кнопки */
  .reels-page .act .ic { position: relative; }
  .act-num {
    position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #fff; color: #0d0d0d; font-size: 10px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .act-num[hidden] { display: none; }
  .reels-page .act { font-size: 11px; }
  .reels-page .act svg { width: 15px; height: 15px; }
  /* подписи под кнопками убраны с экрана — остаются только для экранного диктора */
  .reels-page .act > span:not(.ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .act-list { gap: 6px; }
  /* переключатель вида — внизу по центру, под роликом (у ролика снизу поле, они не пересекаются) */
  .views { position: fixed; top: auto; left: 50%; translate: -50% 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px));   /* центровка — через translate: transform занят общим сдвигом */ z-index: 11; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }   /* светлое стекло, как кнопки справа: стоит под роликом на тёмном фоне */
  .view-btn { color: rgba(255, 255, 255, .6); }
  .view-btn:hover { color: #fff; }
  .view-btn[aria-pressed="true"] { background: #fff; color: #0d0d0d; }
  .tile { color: #fff; }
  .tile-media { border-radius: 6px; background: rgba(255, 255, 255, .06); }
  .tile-meta { color: rgba(255, 255, 255, .55); }
}

@media (min-width: 721px) and (max-width: 960px) and (orientation: portrait) {
  .reels-page { --fw: calc(6 * var(--colw, 105px) + 5 * var(--gutter)); }   /* планшет вертикально: экран высокий — ролик шире, 6 колонок (с описанием уезжает в колонки 1–6) */
}

/* ───────── панель проекта на странице проектов (описание): колонки 7–12, по высоте ролика, своя прокрутка ───────── */
.pinfo {
  position: fixed; z-index: 7; top: calc(50vh - var(--fh) / 2); height: var(--fh);
  left: calc(50% + var(--gutter) / 2); width: calc(6 * var(--colw, 105px) + 5 * var(--gutter));   /* = начало 7-й колонки, ширина 6 колонок */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: clamp(16px, 1.6vw, 24px); border-radius: 6px; color: var(--fg);   /* фон — отдельной шторкой .pinfo-bg под панелью */
  visibility: hidden; opacity: 0;
  transition: opacity .25s, visibility 0s .6s;
}
/* шторка — белая подложка панели (reels.js кладёт её прямо под .pinfo): растягивается слева направо, закрывается обратно влево.
   Только transform — его ведёт видеокарта, без перерисовки каждый кадр (обрезка clip-path считалась на основном потоке и дёргалась) */
.pinfo-bg {
  position: fixed; z-index: 7; top: calc(50vh - var(--fh) / 2); height: var(--fh);
  left: calc(50% + var(--gutter) / 2); width: calc(6 * var(--colw, 105px) + 5 * var(--gutter));
  border-radius: 6px; background: #fff; pointer-events: none;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
  transition: transform .6s cubic-bezier(.76, 0, .24, 1), translate .6s cubic-bezier(.45, 0, .25, 1);
}
body.is-info .pinfo-bg { transform: scaleX(1); transition: transform .9s cubic-bezier(.76, 0, .24, 1) .35s, translate .6s cubic-bezier(.45, 0, .25, 1); }   /* когда ролик почти уехал */
html.ppanel-open .pinfo-bg { translate: calc(-1 * (var(--panel-w) + var(--tab-w))) 0; }
html.ppanel-open body.is-info .pinfo-bg { transition: transform .9s cubic-bezier(.76, 0, .24, 1) .35s, translate .9s cubic-bezier(.45, 0, .15, 1); }
.pinfo::-webkit-scrollbar { display: none; }
body.is-info .pinfo { visibility: visible; opacity: 1; }   /* сама панель видна сразу — её содержимое проявляется своими анимациями после шторки */
/* список «проекты» открыт — панель проекта едет вместе с историей, как всё на странице */
.pinfo { transition: opacity .25s, visibility 0s .6s, translate .6s cubic-bezier(.45, 0, .25, 1); }   /* закрываем — содержимое быстро гаснет, шторка уходит влево */
body.is-info .pinfo { transition: translate .6s cubic-bezier(.45, 0, .25, 1); }
html.ppanel-open .pinfo { translate: calc(-1 * (var(--panel-w) + var(--tab-w))) 0; }
html.ppanel-open body.is-info .pinfo { transition: translate .9s cubic-bezier(.45, 0, .15, 1); }
/* содержимое — как на главной, когда шторка раскрылась: название выезжает из-под маски (как заголовки), остальное проявляется
   снизу по очереди (как .reveal). Анимации, а не переходы — при смене проекта в открытой панели новое содержимое проигрывает их заново */
.pinfo-title .ln { display: block; overflow: hidden; padding: .04em 0 .1em; margin-bottom: -.1em; }
.pinfo-title .in { display: inline-block; }
body.is-info .pinfo-title .in { animation: rise 1.2s var(--ease) .95s both; }   /* содержимое — на торможении шторки (.35 + .9 с): ease-out, быстро трогается и долго доплывает */
body.is-info :is(.pinfo-bar, .pinfo-up) { animation: pinfo-up 1.1s var(--ease) both; animation-delay: calc(1s + var(--d, 0) * 1s); }
@keyframes pinfo-up { from { opacity: 0; transform: translateY(28px); } }   /* как .reveal, но заметнее — с большего хода */
.pinfo-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }
.pinfo-tools { display: flex; gap: 6px; pointer-events: auto; }
/* полоса с кнопками цепляется к верху панели; номер проекта слева при прокрутке гаснет, чтобы не висеть поверх содержимого (is-scrolled — reels.js) */
.pinfo-bar { position: sticky; top: 0; z-index: 2; pointer-events: none; }
.pinfo-meta { transition: opacity .3s; }
.pinfo.is-scrolled .pinfo-meta { opacity: 0; }
.pinfo-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: #f2f2f2; color: var(--fg); cursor: pointer; transition: background-color .3s, color .3s; }
.pinfo-btn:hover, .pinfo-btn:focus-visible { background: #1a1a1b; color: #fff; }
.pinfo-btn svg { width: 15px; height: 15px; }
.pinfo-title { margin: clamp(28px, 3vw, 48px) 0 14px; font-size: clamp(28px, 2.8vw, 50px); font-weight: 400; line-height: 1; text-transform: uppercase; }   /* названия проектов — заглавными */
.pinfo-text { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.45; text-transform: none; }
.pinfo-text.is-ph { color: var(--muted); font-style: normal; }
.pinfo-text p { margin: 0; }
.pinfo-text p + p { margin-top: .7em; }
.pinfo-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; }   /* сайт проекта и Behance — в строку */
.pinfo-link { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
.pinfo-link .works-ic { width: 14px; height: 14px; }
.pinfo-sec { margin-top: clamp(32px, 3vw, 48px); }
.pinfo-label { display: block; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.pinfo-grid { display: grid; gap: var(--gutter); }
.pinfo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pinfo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pinfo-tile { position: relative; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: #ececec; }
.pinfo-case { display: grid; gap: var(--gutter); }   /* материалы сайта — во всю ширину панели, в своих пропорциях */
.pinfo-case img { display: block; width: 100%; height: auto; border-radius: 6px; background: #ececec; }
.pinfo-tile video, .pinfo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* в самом низу — следующий проект: подпись и крупное название; клик — переход, панель остаётся открытой */
.pinfo-next {
  display: block; width: 100%; margin-top: clamp(40px, 4vw, 64px); padding: 18px 0 2px; border: 0; border-top: 1px solid rgba(13, 13, 13, .12);
  background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.pinfo-next-title { display: block; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.05; text-transform: uppercase; transition: opacity .3s; }
.pinfo-next:hover .pinfo-next-title { opacity: .55; }
@media (max-width: 720px) { .pinfo, .pinfo-bg { display: none; } }

/* ───────── переход между страницами «карусель» (site.js → vtCarousel): браузерные View Transitions ─────────
   Экран отдаляется — он в ряду экранов на одной строке — ряд прокручивается и встаёт на нужной странице — приближение.
   Движение считает site.js одной плавной кривой; здесь — фон, маршрут и вид экранов */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition {   /* фон за рядом — тёмная дымка, как на странице проектов */
  background:
    radial-gradient(60% 50% at 30% 35%, rgba(90, 80, 160, .22), transparent 70%),
    radial-gradient(55% 45% at 75% 70%, rgba(40, 110, 120, .18), transparent 70%),
    #0b0b0c;
}
@keyframes vt-route { 0%, 12% { opacity: 0; transform: translateY(8px); } 24%, 64% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; transform: translateY(-6px); } }   /* гаснет к паузе перед приближением */
html.vt-run::view-transition-group(*) { animation: none; }
html.vt-run::view-transition-old(*), html.vt-run::view-transition-new(*) {
  animation: none; mix-blend-mode: normal; opacity: 1; transform-origin: 50% 50%;   /* движение — site.js (vtCarousel) */
}
html.vt-run::view-transition-new(vt-route) { animation: vt-route 2.11s both; }
html.vt-run::view-transition-new(*) { border-radius: 8px; }   /* экраны рядов (сняты в треть) — скругление постоянное, ≈ 26px в полном размере; у двух главных его ведёт site.js */
html.vt-run::view-transition-new(vt-route) { border-radius: 0; }
/* элементы перехода: на время — во весь экран, под всем; видны только как снимки перехода */
.vt-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.vt-tile { position: absolute; inset: 0; overflow: hidden; }
/* экраны рядов сняты в треть окна (лёгкие для видеокарты): блок 30 % × 30 % по центру, содержимое — уменьшенный «экран» */
.vt-tile--mini { inset: auto; left: 25%; top: 25%; width: 50%; height: 50%; }
.vt-mini { position: absolute; left: 0; top: 0; width: calc(100% / .5); height: calc(100% / .5); transform: scale(.5); transform-origin: 0 0; }
.vt-route {
  position: absolute; left: 50%; top: calc(var(--head-c) + 30px); translate: -50% 0; width: max-content;
  font: 400 15px/1 var(--font); letter-spacing: -.045em; color: rgba(255, 255, 255, .85); text-transform: lowercase;
}
.vt-t { position: absolute; inset: 0; padding: 7vw 3vw 3vw; font-family: var(--font); letter-spacing: -.045em; text-transform: lowercase; }
.vt-t--light { background: #f4f4f4; color: #0d0d0d; }
.vt-t--dark { background: #0d0d0d; color: #fff; }
.vt-h { display: block; font-weight: 500; font-size: 4.6vw; line-height: 1; }
.vt-h i { font-family: "Playfair Display", Georgia, serif; font-weight: 400; }
.vt-h--proj { text-transform: uppercase; }   /* названия проектов — заглавными */
.vt-hero { position: absolute; left: 3vw; right: 36vw; bottom: 3vw; height: 52vh; width: auto; object-fit: cover; border-radius: 1vw; }
.vt-hero--wide { right: 3vw; height: 46vh; }
.vt-reel { position: absolute; left: 50%; top: 8vh; height: 84vh; aspect-ratio: 9 / 16; translate: -50% 0; object-fit: cover; border-radius: 1vw; }
.vt-mail { position: absolute; left: 3vw; bottom: 8vh; font-weight: 500; font-size: 8vw; line-height: 1; }

/* конец главной — одна сцена (.end-stage): экран VEWOO (190 = 140 + 50) и под ним «следующая страница».
   Экран VEWOO стоит на месте ещё 40 % высоты окна (задержка), потом уезжает вверх, и снизу выходит «следующая страница»;
   когда она раскрылась целиком, вся сцена стоит на месте ещё 60 % высоты окна — за это время знак заливается (site.js, initNext).
   Шторкой на студию заходит обёртка .end (у неё отступ −100vh вместо .talk) */
.end { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; height: 250vh; height: 250svh; }   /* сцена 190 + заливка 60 */
.end-stage { position: sticky; top: -90vh; top: -90svh; }   /* встаёт, когда низ сцены дошёл до низа окна: 100 − 190 */
.talk-hold { height: 140vh; height: 140svh; }
/* страница проекта: сцена — только «следующая страница» (50) + заливка 60; встаёт, когда блок раскрылся целиком у низа окна */
.end--solo { z-index: auto; margin-top: 0; }   /* высоту сцены и место, где она встаёт, задаёт site.js (nextBlock): проект целиком + запас на заливку */
/* панель проекта в рилсах: сцена прокручивается внутри панели — блок в половину панели, заливка — ещё 60 % её высоты */
.pinfo { padding-bottom: 0; }   /* внизу — блок «следующий проект», он сам с полями; встаёт ровно по низу панели */
.end--panel { z-index: auto; margin-top: 0; }   /* высоту и место сцены задаёт site.js (nextBlock) */
.pinfo section.next { height: calc(var(--fh) / 2); background: #fff; }   /* фон — как у панели */   /* экран VEWOO 100 + задержка 40 */
.talk-hold > .talk { position: sticky; top: 0; margin-top: 0; }
/* «следующая страница»: по краям подпись и процент, по центру — название в знаке moroz. Знак рисует site.js: рамка как у .btn--ghost,
   заливка снизу вверх по проценту. Название — в инверсии: на светлом тёмное, на залитом светлое */
section.next { height: 50vh; height: 50svh; display: grid; align-items: center; background: var(--bg); }   /* фон — чтобы инверсии было с чем смешиваться внутри сцены */
.next-link { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: var(--fg); }
.next-side { font-size: 13px; color: var(--muted); }
.next-num { justify-self: end; font-variant-numeric: tabular-nums; }
.next-mark { position: relative; display: grid; place-items: center; width: clamp(110px, 9vw, 150px); aspect-ratio: 1; }
.next-mark canvas { position: absolute; }
.next-name.next-name--proj { max-width: 86%; white-space: normal; text-align: center; line-height: 1.05; text-transform: uppercase; translate: none; }   /* название проекта — заглавными, как везде; длинное — в две строки внутри знака */   /* размер и поля задаёт скрипт: газу нужно место вокруг знака */
.next-name { position: relative; font-weight: 400; font-size: 13px; line-height: 1; white-space: nowrap; color: #fff; mix-blend-mode: difference; translate: 0 -.09em; }   /* кегль и начертание — как у подписей в шапке («меню», «проекты») и у текста по краям блока */   /* строчные стоят в строке низко — чуть выше, по центру знака на глаз */