/* Первый экран главной: затемнение, подсказка про работы внизу, наведение на «Get in touch».
   Выгрузка Тильды не меняется — всё накладывается поверх. Разметку подсказки вставляет сборка
   (scripts/build.mjs, HERO), на место её ставит overrides/js/daruma-hero.js. */

/* ——— затемнение видео: вместо ровного 70 % — слева плотнее (под текстом), справа светлее,
   и тёмный переход к низу экрана, на котором держится подсказка */
#rec1951304071 .t396__artboard .zb-bgvid .dim {
  background:
    linear-gradient(to top, rgba(16, 16, 16, 0.85) 0, rgba(16, 16, 16, 0) 34%),
    linear-gradient(90deg, rgba(16, 16, 16, 0.78) 0%, rgba(16, 16, 16, 0.58) 50%, rgba(16, 16, 16, 0.44) 100%) !important;
}

/* на средних и узких экранах заголовок занимает почти всю ширину — затемняем ровно */
@media (max-width: 960px) {
  #rec1951304071 .t396__artboard .zb-bgvid .dim {
    background:
      linear-gradient(to top, rgba(16, 16, 16, 0.85) 0, rgba(16, 16, 16, 0) 34%),
      rgba(16, 16, 16, 0.64) !important;
  }
}

/* полоса прокрутки (Windows) появляется, когда страница догрузилась, и сдвигала шапку влево
   прямо во время появления — место под неё держим сразу */
html { scrollbar-gutter: stable; }

/* ——— порядок появления первого экрана (класс daruma-hero-seq ставит daruma-hero.js,
   daruma-hero-go — когда Тильда запускает свою анимацию). Сверху вниз и слева направо:
   логотип → переключатель языка и кнопка в шапке → три строки заголовка → шоурил → подсказка внизу.
   Элементы Тильды остаются на её анимации, меняем только длительность и задержку;
   переключатель, шоурил и подсказку Тильда не анимирует — они ждут сигнала go. */
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1772886582269"] { transition-duration: 0.8s !important; transition-delay: 0s !important; }
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771679353557"] { transition-duration: 0.8s !important; transition-delay: 0.15s !important; }
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771684920976"] { transition-duration: 0.9s !important; transition-delay: 0.45s !important; }
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771700750380000002"] { transition-duration: 0.9s !important; transition-delay: 0.65s !important; }
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771700730033000001"] { transition-duration: 0.9s !important; transition-delay: 0.85s !important; }
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771699314273000001"] { transition-duration: 0.8s !important; transition-delay: 1.25s !important; }

/* шапка (логотип, ссылки, переключатель языка, «Get in touch») появляется одним движением:
   всё проявляется и поднимается на 8 px. Тильда вела логотип слева, а кнопку справа на 100 px —
   кнопка наезжала на переключатель, а ссылки и переключатель потом перескакивали на место. */
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1772886582269"],
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771679353557"] {
  transition-property: opacity, transform !important;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important;
}
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1772886582269"]:not(.t-animate_started),
html.daruma-hero-seq #rec1951304071 .tn-elem[data-elem-id="1771679353557"]:not(.t-animate_started) {
  transform: translateY(8px) !important;
}
/* кнопка лежит в группе, которую Тильда тоже вела справа на 100 px, — группу не двигаем, анимирует сама кнопка */
html.daruma-hero-seq #rec1951304071 .tn-group[data-group-id="1771683047928000004"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.daruma-hero-seq .lang-switch--float.is-placed,
html.daruma-hero-seq .daruma-burger.is-placed,
html.daruma-hero-seq .daruma-topnav.is-placed,
html.daruma-hero-seq .daruma-reel-btn.is-placed,
html.daruma-hero-seq .daruma-hero-foot.is-placed {
  opacity: 0;
  transform: translateY(8px);
}

html.daruma-hero-seq.daruma-hero-go .lang-switch--float.is-placed,
html.daruma-hero-seq.daruma-hero-go .daruma-burger.is-placed,
html.daruma-hero-seq.daruma-hero-go .daruma-topnav.is-placed,
html.daruma-hero-seq.daruma-hero-go .daruma-reel-btn.is-placed,
html.daruma-hero-seq.daruma-hero-go .daruma-hero-foot.is-placed {
  opacity: 1;
  transform: none;
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

html.daruma-hero-seq.daruma-hero-go .lang-switch--float.is-placed,
html.daruma-hero-seq.daruma-hero-go .daruma-burger.is-placed,
html.daruma-hero-seq.daruma-hero-go .daruma-topnav.is-placed { transition-delay: 0.15s; }
html.daruma-hero-seq.daruma-hero-go .daruma-reel-btn.is-placed { transition-delay: 1.5s; }
html.daruma-hero-seq.daruma-hero-go .daruma-hero-foot.is-placed { transition-delay: 1.9s; }

/* ——— кнопки: одна система на всём первом экране
   Главная («Обсудить проект»): оранжевая заливка. Белый текст на ней даёт 4,7 : 1 (на чистом #ff3300 было бы 3,7 : 1,
   ниже нормы для мелкого текста), поэтому заливка чуть темнее логотипа.
   Второстепенная (шоурил): тонкая рамка. При наведении обе заливаются светлым с тёмным текстом.
   Скругление везде 4 px, как у кнопок и полей формы. */
#rec1951304071 .tn-elem[data-elem-id="1771679353557"] .tn-atom,
#rec1951304071 .tn-elem[data-elem-id="1771699314273000001"] .tn-atom {
  background-color: #e02a00 !important;
  border-color: #e02a00 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#rec1951304071 .tn-elem[data-elem-id="1771679353557"] .tn-atom:hover,
#rec1951304071 .tn-elem[data-elem-id="1771699314273000001"] .tn-atom:hover {
  background-color: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
  color: #101010 !important;
}

/* текст кнопки лежит во вложенном span, и Тильда красит его белым отдельно — без этого при наведении
   белый текст оставался на светлой заливке */
#rec1951304071 .tn-elem[data-elem-id="1771679353557"] .tn-atom .tn-atom__button-text,
#rec1951304071 .tn-elem[data-elem-id="1771699314273000001"] .tn-atom .tn-atom__button-text {
  color: inherit !important;
}

/* кнопки «Watch & Listen» в списке работ: то же скругление */
.t694 .t-btnflex {
  border-radius: 4px !important;
}

/* ——— подсказка внизу первого экрана: «Избранные работы ↓» слева, годы справа */
.daruma-hero-foot {
  position: absolute;
  bottom: 8px; /* 9 октября 2026: линия и подпись опущены (было 20 px), между ними и работами — зазор */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(245, 245, 245, 0.22);
  color: rgba(245, 245, 245, 0.72);
  font-family: var(--t-text-font, 'Inter', Arial, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.8s ease 1.2s;
}

.daruma-hero-foot[hidden] {
  display: none;
}

.daruma-hero-foot.is-placed {
  opacity: 1;
}

.daruma-hero-foot__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.daruma-hero-foot__link svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 0.2s ease;
}

.daruma-hero-foot__link:hover,
.daruma-hero-foot__link:focus-visible {
  color: #ffffff !important;
}

.daruma-hero-foot__link:hover svg,
.daruma-hero-foot__link:focus-visible svg {
  transform: translateY(3px);
}

.daruma-hero-foot__link:focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 6px;
}

/* на телефоне следующий кейс виден сразу под первым экраном — подсказка не нужна */
@media (max-width: 640px) {
  .daruma-hero-foot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daruma-hero-foot,
  .daruma-hero-foot__link,
  .daruma-hero-foot__link svg,
  #rec1951304071 .tn-elem[data-elem-id="1771679353557"] .tn-atom {
    transition: none;
  }
}

/* ——— русская версия: «ОБСУДИТЬ ПРОЕКТ» длиннее, чем «GET IN TOUCH», — чуть уменьшаем шрифт,
   чтобы текст не упирался в рамку кнопок, и не даём ему переноситься */
html[lang="ru"] #rec1951304071 .tn-elem[data-elem-id="1771679353557"] .tn-atom,
html[lang="ru"] #rec1951304071 .tn-elem[data-elem-id="1771699314273000001"] .tn-atom {
  font-size: 13px !important;
  white-space: nowrap;
}

@media (max-width: 340px) {
  html[lang="ru"] #rec1951304071 .tn-elem[data-elem-id="1771699314273000001"] .tn-atom {
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
  }
}

/* ——— бургер и меню на главной (только там, где в шапке нет кнопки «Обсудить проект», — на телефоне).
   Вид — как у меню на /about: три полоски, справа выезжает панель. Показ бургера решает daruma-hero.js. */
.daruma-burger {
  position: absolute;
  z-index: 91;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

.daruma-burger[hidden] {
  display: none;
}

.daruma-burger.is-placed {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.daruma-burger i {
  display: block;
  width: 100%;
  height: 3px;
  background: #f5f5f5;
  transition: transform 0.3s ease;
}

.daruma-burger:hover i:nth-of-type(1),
.daruma-burger:focus-visible i:nth-of-type(1) {
  transform: translateY(2px);
}

.daruma-burger:hover i:nth-of-type(3),
.daruma-burger:focus-visible i:nth-of-type(3) {
  transform: translateY(-2px);
}

.daruma-burger:focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 6px;
}

.daruma-menu {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.daruma-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.daruma-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(330px, 86vw);
  padding: 56px 28px 28px;
  background: #101010;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.daruma-menu.is-open .daruma-menu__panel {
  transform: none;
}

.daruma-menu__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.daruma-menu__close svg {
  width: 23px;
  height: 23px;
  fill: #f5f5f5;
  transition: opacity 0.2s ease;
}

.daruma-menu__close:hover svg {
  opacity: 0.6;
}

.daruma-menu__close:focus-visible,
.daruma-menu__nav a:focus-visible,
.daruma-menu__social a:focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 4px;
}

.daruma-menu__nav {
  display: flex;
  flex-direction: column;
}

.daruma-menu__nav a {
  padding: 10px 0;
  color: #f5f5f5 !important;
  font-family: var(--t-text-font, 'Inter', Arial, sans-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.daruma-menu__nav a:hover {
  color: #ff3300 !important;
}

.daruma-menu__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: auto;
}

.daruma-menu__social a {
  color: rgba(245, 245, 245, 0.72) !important;
  font-family: var(--t-text-font, 'Inter', Arial, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.daruma-menu__social a:hover {
  color: #ffffff !important;
}

html.daruma-menu-lock,
html.daruma-menu-lock body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .daruma-burger.is-placed,
  .daruma-burger i,
  .daruma-menu,
  .daruma-menu__panel {
    transition: none;
  }
}

/* ——— ссылки сверху: «Работы» и «Что мы делаем». Стоят в шапке левее переключателя языка на уровне логотипа,
   место задаёт daruma-hero.js. На телефоне остаётся одна ссылка — «Что мы делаем» (работы там и так сразу под экраном);
   если и она не помещается между логотипом и переключателем, скрипт её прячет. */
.daruma-topnav {
  position: absolute;
  z-index: 91;
  display: flex;
  gap: 28px;
  font-family: var(--t-text-font, 'Inter', Arial, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.daruma-topnav[hidden] { display: none; }
.daruma-topnav.is-placed { opacity: 1; }
.daruma-topnav a {
  color: rgba(245, 245, 245, 0.88) !important;
  text-decoration: none !important;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.daruma-topnav a:hover,
.daruma-topnav a:focus-visible { color: #ffffff !important; border-bottom-color: #ff3300; }
@media (max-width: 480px) {
  .daruma-topnav a:first-child { display: none; }
}
@media (max-width: 380px) {
  .daruma-topnav { font-size: 11px; letter-spacing: 0.04em; }
}

/* единственный заголовок страницы (h1) — для поисковиков и экранных дикторов; на экране — строки Тильды
   (scripts/build.mjs, HEADLINE) */
.daruma-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* мягкий переход к работам (9 октября 2026): низ первого экрана растворяется в фоне страницы.
   Слой лежит над видео и затемнением Тильды (z-index 0–1), но под текстом и кнопками (3 и выше). */
#rec1951304071 .t396__artboard::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0), #101010);
}
@media (max-width: 640px) {
  #rec1951304071 .t396__artboard::after { height: 120px; }
}