/* Шрифт подключается в index.html через Google Fonts: Instrument Sans 400 */

:root {
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* сетка: 1920 px, 12 колонок, поля 30, промежуток 8 */
  --margin: 30px;
  --gap: 8px;
  --cols: 12;

  --ink: #000;
  --paper: #fff;
  --line: #d4d4d4;
  --placeholder: #cfcfcf;

  /* значения из макета (масштаб 1920) */
  --header-top: 15px;
  --header-h: 51px;
  --header-radius: 10px;
  --header-pad: 16px;
  --list-offset: 114px;      /* от верха страницы до верхней границы первой строки */
  --row-pad: 8px;
  /* переход список ↔ проект */
  --ease-calm: cubic-bezier(0.33, 0, 0.2, 1);
  --open-ms: 420ms;          /* нарастание заливки и размытия */
  --content-in-ms: 380ms;    /* проявление содержимого проекта */
  --content-in-delay: 90ms;
  --content-out-ms: 240ms;   /* исчезновение содержимого при закрытии */
  --veil-out-ms: 340ms;      /* уход заливки и размытия */
  --veil-out-delay: 60ms;
  --close-total: 400ms;      /* = veil-out-delay + veil-out-ms; совпадает с CLOSE_MS в app.js */
  --info-top: 34.7vh;        /* верх названия, тегов и описания (375 px на высоте 1080) */
  /* год — посередине между шапкой и линией названия (~217 px на высоте 1080) */
  --year-top: calc((var(--header-top) + var(--header-h) + var(--info-top)) / 2 - 10px);
  --muted: #8a8a8a;         /* серый текст футера, как в макете */

  /* hover: заливка снизу вверх с небольшой задержкой и мягким торможением.
     Значения подобраны на глаз — на TUX их проверить не удалось. */
  --fill-ms: 480ms;
  --fill-delay: 40ms;
  --fill-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-ms: 240ms;
  --text-delay: 120ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.014em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* общая сетка */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  /* на телефонах с вырезом в альбомной ориентации поля не уходят под вырез */
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}

/* ---------- Шапка ---------- */

.site-header {
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.site-header__bar {
  grid-column: 4 / 10;
  pointer-events: auto;
  height: var(--header-h);
  padding-inline: var(--header-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--header-radius);
  color: #fff;
  /* запасной фон: без backdrop-filter чуть плотнее, чтобы текст оставался читаемым */
  background: rgba(92, 92, 92, 0.82);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header__bar {
    background: rgba(70, 70, 70, 0.58);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    backdrop-filter: blur(20px) saturate(1.1);
  }
}

.site-header__contacts {
  display: flex;
  gap: 16px;
}

.site-header__link {
  color: inherit;
  text-decoration: none;
  cursor: default;
}

/* после клика по EMAIL: адрес скопирован */
#contact-email {
  position: relative;
}

#contact-email::after {
  content: attr(data-copied);
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-calm);
}

#contact-email.is-copied {
  color: transparent;
}

#contact-email.is-copied::after {
  color: #fff;
  opacity: 1;
}

.site-header__link[href] {
  cursor: pointer;
  transition: opacity 240ms var(--ease-calm);
}

@media (hover: hover) and (pointer: fine) {
  .site-header__link[href]:hover {
    opacity: 0.6;
  }
}

.site-header__link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Список ---------- */

.work {
  padding-top: var(--list-offset);
}

.row {
  position: relative;
  display: block;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  isolation: isolate;
  transition: color var(--text-ms) ease var(--text-delay);
}

/* чёрная заливка поднимается снизу вверх, при уходе курсора опускается обратно */
.row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--fill-ms) var(--fill-ease) var(--fill-delay);
  will-change: transform;
}

.row__inner {
  position: relative;
  padding-block: var(--row-pad);
  align-items: start;
}

.row__title {
  grid-column: 1 / 4;
  margin: 0;
  font-size: 24px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.row__tags {
  grid-column: 4 / 7;
}

.row__tags li {
  line-height: 19px;
}

/* превью: шесть колонок справа, группа прижата к правому краю */
.row__previews {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
}

.row__previews > :first-child {
  grid-column-start: calc(7 - var(--n));
}

/* превью списка: скругление 4px, изображение, заглушка и размытый фон обрезаются по нему */
.thumb {
  display: block;
  width: 100%;
  height: auto; /* атрибуты width/height у <img> задают только пропорцию до загрузки */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--placeholder);
  border-radius: 4px;
  overflow: hidden;
}

/* наведение и фокус с клавиатуры */
/* чёрная заливка по наведению — только для мыши; на сенсорных экранах строки остаются белыми */
@media (hover: hover) and (pointer: fine) {
  .row:hover {
    color: #fff;
  }

  .row:hover::before {
    transform: scaleY(1);
  }
}

/* фокус с клавиатуры; после тапа или клика мышью фокус заливку не показывает */
.is-keyboard .row:focus-visible {
  color: #fff;
}

.is-keyboard .row:focus-visible::before {
  transform: scaleY(1);
}

/* карточка со стрелкой скрыта на десктопе */
.thumb--more {
  display: none;
}

/* ---------- Футер ---------- */

.site-footer {
  padding-block: 50px 20px;
  background: var(--paper);
  color: var(--muted);
}

.site-footer__year {
  grid-column: 1 / 4;
}

.site-footer__count {
  grid-column: 4 / 8;
}

.site-footer__brand {
  grid-column: 8 / 13;
  justify-self: end;
}

/* ---------- Планшет и мобильные ---------- */

@media (max-width: 1100px) {
  :root {
    --margin: 20px;
    --list-offset: 96px;
  }

  .site-header__bar {
    grid-column: 1 / -1;
  }

  .row__title {
    grid-column: 1 / 7;
  }

  .row__tags {
    grid-column: 7 / 13;
  }

  /* превью переносятся под текст и листаются внутри строки */
  .row__previews {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--gap);
    margin-top: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .row__previews::-webkit-scrollbar {
    display: none;
  }

  .row__previews > :first-child {
    grid-column-start: auto;
  }

  /* ширина карточки = (ширина ленты − два промежутка) / 3: в начале видны ровно три целиком */
  .thumb {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    width: calc((100% - 2 * var(--gap)) / 3);
    scroll-snap-align: start;
  }

  .row__previews {
    overflow-y: hidden;
    touch-action: pan-x pan-y;
  }

  /* последняя карточка: размытая копия последнего превью и тонкая стрелка */
  .thumb--more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    isolation: isolate;
    /* Safari: обрезать размытый и увеличенный фон по скруглению */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    color: #fff;
    background: var(--placeholder);
  }

  .thumb--more::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
  }

  .thumb__blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(14px);
    transform: scale(1.25); /* чтобы размытые края не светлели */
  }

  .thumb__arrow {
    position: relative;
    z-index: 1;
    width: 28%;
    height: auto;
  }
}

@media (max-width: 640px) {
  :root {
    --margin: 12px;
    --header-top: 10px;
    --header-h: 46px;
    --header-pad: 14px;
    --list-offset: 80px;
  }

  .row__title {
    grid-column: 1 / -1;
  }

  .row__tags {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .site-header__contacts {
    gap: 12px;
  }

  .site-header__bar {
    font-size: 13px;
  }

  .site-footer {
    row-gap: 6px;
  }

  .site-footer__year {
    grid-column: 1 / 5;
  }

  .site-footer__count {
    grid-column: 5 / -1;
    justify-self: end;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ---------- Ссылка в шапке ---------- */

.site-header__home {
  color: inherit;
  text-decoration: none;
}

.site-header__home:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Открытый проект ---------- */

/* пока проект открыт, чёрная заливка строк не показывается */
.is-project-open .row,
.is-project-open .row:hover,
.is-project-open .row:focus-visible {
  color: var(--ink);
  transition: none;
}

.is-project-open .row::before {
  transform: scaleY(0) !important;
  transition: none !important;
}

.is-project-open .site-header {
  touch-action: none;
}

/*
 * Переход список ↔ проект.
 * Открытие: белая заливка и размытие списка нарастают за --open-ms,
 *           содержимое проекта проявляется на их фоне с небольшой задержкой.
 * Закрытие: содержимое гаснет за --content-out-ms, затем заливка и размытие уходят;
 *           весь переход занимает --close-total (совпадает с CLOSE_MS в app.js).
 * Слой не скрывается через display:none — только visibility после окончания закрытия.
 */
.project {
  position: fixed;
  inset: 0;
  z-index: 60; /* выше списка, ниже шапки */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--close-total);
}

.project.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* белый полупрозрачный слой с размытием списка под ним */
.project__veil {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color var(--veil-out-ms) var(--ease-calm) var(--veil-out-delay);
}

.project.is-open .project__veil {
  background-color: rgba(255, 255, 255, 0.92); /* без backdrop-filter — плотнее */
  transition: background-color var(--open-ms) var(--ease-calm);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .project__veil {
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition:
      background-color var(--veil-out-ms) var(--ease-calm) var(--veil-out-delay),
      -webkit-backdrop-filter var(--veil-out-ms) var(--ease-calm) var(--veil-out-delay),
      backdrop-filter var(--veil-out-ms) var(--ease-calm) var(--veil-out-delay);
  }

  .project.is-open .project__veil {
    background-color: rgba(255, 255, 255, 0.77); /* прозрачность только у фона подложки */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition:
      background-color var(--open-ms) var(--ease-calm),
      -webkit-backdrop-filter var(--open-ms) var(--ease-calm),
      backdrop-filter var(--open-ms) var(--ease-calm);
  }
}

/*
 * Содержимое проекта: центральный слой (год, теги) + прокручиваемый слой (название, лента, описание).
 * Проявляется и гаснет целиком; свой контекст наложения (z-index 1) — лента не перекроет Close и навигацию.
 */
.project__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--content-out-ms) var(--ease-calm);
}

.project.is-open .project__content {
  opacity: 1;
  transition: opacity var(--content-in-ms) var(--ease-calm) var(--content-in-delay);
}

/* переход к соседнему проекту: подложка остаётся, содержимое гаснет и проявляется заново */
.project.is-open.is-switching .project__content {
  opacity: 0;
  transition: opacity var(--content-out-ms) var(--ease-calm);
}

/* центральный информационный слой стоит на месте; галерея (слой выше) проходит поверх него */
.project__center {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  align-content: start;
}

.project__year {
  grid-column: 4 / 10;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  margin: var(--year-top) 0 0;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: -0.04em;
}

/* теги проекта — одной строкой по центру, на уровне названия */
.project__tags {
  grid-column: 4 / 10;
  grid-row: 1;
  margin-top: calc(var(--info-top) + 3.5px);
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 18px;
  row-gap: 2px;
  font-size: 14px;
  line-height: 19px;
}

/* прокручивается весь экран, поэтому колесо работает над любой областью */
.project__scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
}

.project__scroll::-webkit-scrollbar {
  display: none;
}

/* боковая область с переходом к соседнему проекту */
.project__scroll.is-nav-zone {
  cursor: pointer;
}

.project__grid {
  align-items: start;
  padding-top: var(--info-top);
  padding-bottom: 80px;
  min-height: 100%;
}

/* название, счётчик и описание остаются на месте, пока лента едет вверх */
.project__side {
  position: sticky;
  top: var(--info-top);
  align-self: start;
}

.project__side--left {
  grid-column: 1 / 4;
  grid-row: 1;
}

.project__side--right {
  grid-column: 10 / 13;
  grid-row: 1;
  padding-left: 5.15vw; /* 99 px на 1920 */
}

/* лента: первая картинка начинается на 70 px ниже линии названия и тегов */
.project__ribbon {
  grid-column: 4 / 10;
  grid-row: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-top: 70px;
  pointer-events: none; /* пустая область над первой картинкой прозрачна для мыши */
}

.project__gallery {
  pointer-events: auto;
}

.project__title,
.project__desc {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.project__title {
  line-height: 26px;
}

.project__title,
.project__counter,
.project__desc {
  width: fit-content;
  max-width: 100%;
}

.project__desc {
  line-height: 32px;
  max-width: 16vw; /* ~307 px на 1920: перенос строк как в макете */
}

.project__counter {
  margin: 8px 0 0;
  min-width: 5ch; /* смена цифр не сдвигает соседний текст */
  font-size: 14px;
  line-height: 19px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.project__gallery {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* галерея проекта: скругление 10px у контейнера, изображения и видео */
.project__item {
  border-radius: 10px;
  overflow: hidden;
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--placeholder);
}

.shot--video {
  object-fit: cover;
  background: #000;
}

/* десктоп: перетаскивание галереи мышью */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .project__gallery {
    cursor: grab;
  }

  .project__gallery img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .project.is-dragging,
  .project.is-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
  }
}

/* подпись у курсора в боковых областях: Previous / Next Project */
.project__hint {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 19px;
  color: #fff;
  background: rgba(92, 92, 92, 0.82);
  opacity: 0;
  transition: opacity 260ms var(--ease-calm);
  will-change: transform, opacity;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .project__hint {
    background: rgba(70, 70, 70, 0.58);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

.project__hint.is-visible {
  opacity: 1;
}

/* только для мобильной раскладки */
.project__close,
.project__nav,
.project__year-small,
.project__tags-m {
  display: none;
}

/* ---------- Стартовая анимация (только первая загрузка) ----------
 * Последовательность и тайминги взяты из кода tux.co/en/work (GSAP):
 *   хедер:  y −200% → 0, opacity 0 → 1, 0.5 s, power2.out, сразу при загрузке;
 *   текст хедера: по очереди — название в 0.5 s (0.3 s), пункты в 0.65 s и 0.8 s (0.15 s);
 *   список: снизу (100vh) на место, 2 s, power4.out, старт в 0.5 s —
 *           основное движение укладывается примерно в первую секунду, дальше долгое торможение;
 *   теги:   проявляются в 2.5 s за 0.5 s, когда список уже почти остановился.
 */

@keyframes intro-bar {
  from { opacity: 0; transform: translateY(-200%); }
  to   { opacity: 1; transform: none; }
}

@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes intro-list {
  from { transform: translateY(100vh); }
  to   { transform: none; }
}

.intro .site-header__bar {
  animation: intro-bar 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; /* power2.out */
}

.intro .site-header__home {
  animation: intro-fade 300ms ease 500ms both;
}

.intro .site-header__contacts > :nth-child(1) {
  animation: intro-fade 150ms ease 650ms both;
}

.intro .site-header__contacts > :nth-child(2) {
  animation: intro-fade 150ms ease 800ms both;
}

/* список и футер едут единым блоком; названия и превью въезжают из-за нижнего края */
.intro .work,
.intro .site-footer {
  animation: intro-list 2000ms cubic-bezier(0.23, 1, 0.32, 1) 500ms both; /* power4.out */
}

.intro .row__tags {
  animation: intro-fade 500ms ease 2500ms both;
}

/* ---------- Планшет и мобильные: проект ---------- */

@media (max-width: 1100px) {
  /* центральный слой десктопа не нужен: год и теги идут в общем блоке */
  .project__center {
    display: none;
  }

  .project__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding-top: calc(var(--header-top) + var(--header-h) + 28px);
    /* место под Back/Next и Close в конце ленты */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .project__side {
    position: static;
  }

  .project__side--left,
  .project__side--right,
  .project__ribbon {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* порядок: название и год → теги → описание → галерея */
  .project__side--left { order: 1; }
  .project__side--right { order: 2; padding-left: 0; }
  .project__ribbon { order: 3; padding-top: 0; pointer-events: auto; }

  .project__counter {
    display: none;
  }

  .project__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
  }

  .project__year-small {
    display: inline;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: -0.04em;
  }

  .project__tags-m {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 19px;
  }

  .project__tags-m:empty {
    display: none;
  }

  .project__desc {
    max-width: 36em;
  }

  .project__gallery {
    gap: 16px;
  }

  /*
   * Нижние кнопки закреплены у края экрана поверх ленты: родитель .project — fixed без transform,
   * лента живёт в своём контексте наложения (.project__content, z-index 1), кнопки — z-index 2.
   * Back/Next — слева, на половину ширины; Close — справа: друг друга не перекрывают.
   */
  .project__close,
  .project__nav {
    position: fixed;
    z-index: 2;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 40px;
    border-radius: var(--header-radius);
    color: #fff;
    background: rgba(92, 92, 92, 0.82);
    opacity: 0;
    transition: opacity var(--content-out-ms) var(--ease-calm);
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .project__close,
    .project__nav {
      background: rgba(70, 70, 70, 0.58);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
  }

  .project.is-open .project__close,
  .project.is-open .project__nav {
    opacity: 1;
    transition: opacity var(--content-in-ms) var(--ease-calm) var(--content-in-delay);
  }

  .project__close {
    display: block;
    right: max(var(--margin), env(safe-area-inset-right, 0px));
    padding: 0 16px;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
  }

  .project__nav {
    display: flex;
    left: max(var(--margin), env(safe-area-inset-left, 0px));
    width: calc(50% - var(--margin));
    overflow: hidden;
  }

  .project__nav[hidden] {
    display: none;
  }

  .project__nav-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
  }

  .project__nav-btn--next {
    text-align: right;
  }

  .project__nav.is-single {
    width: auto;
  }

  .project__nav.is-single .project__nav-btn {
    flex: none;
  }

  .project__close:focus-visible {
    outline: 1px solid #000;
    outline-offset: 3px;
  }

  /* внутри скруглённой плашки рамка фокуса рисуется внутрь, чтобы не обрезалась */
  .project__nav-btn:focus-visible {
    outline: 1px solid #fff;
    outline-offset: -5px;
    border-radius: 8px;
  }

  .project__hint {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* короткое проявление без анимации размытия */
  :root {
    --open-ms: 160ms;
    --content-in-ms: 160ms;
    --content-in-delay: 0ms;
    --content-out-ms: 140ms;
    --veil-out-ms: 160ms;
    --veil-out-delay: 0ms;
    --close-total: 160ms;
  }

  .project__veil,
  .project.is-open .project__veil {
    transition: background-color var(--open-ms) linear !important;
  }

  .row,
  .row::before {
    transition: none;
  }

  .intro .site-header__bar,
  .intro .work,
  .intro .site-footer {
    animation: intro-fade 200ms ease both;
  }

  .intro .site-header__home,
  .intro .site-header__contacts > *,
  .intro .row__tags {
    animation: none;
  }
}