/* Последний экран портфолио — контакт.
   Композиция по референсу: тёмное окно со скруглёнными углами во всю
   ширину, внутри по центру только заголовок и кнопка. Вокруг них
   вразброс висят снимки — без линий и подписей, как просил Руслан.
   Снимки те же, что на главной: своих фотографий для этого блока
   пока нет (TBD — Руслан пришлёт). */

.contact {
  padding: 0 var(--gutter) var(--gutter);
}

/* Окно темнее страницы: фон холста поднят зерном до ~#0d0d0d
   (см. base.css), а сюда зерно не попадает — окно читается как
   вырезанное в бумаге. Тонкая обводка держит край, чтобы разница
   не выглядела случайной.
   overflow: hidden обрезает снимки по скруглению — часть из них
   намеренно вылезает за кромку. */
.contact__window {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--contact-height);
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  overflow: hidden;
  border-radius: var(--contact-radius);
  background-color: var(--color-bg);
  border: 1px solid rgba(244, 244, 244, 0.08);
  text-align: center;
}

/* Снимки лежат отдельным слоем во всю площадь окна: раскладка ручная,
   координаты каждого снимка — ниже в этом файле. */
.contact__photos {
  position: absolute;
  inset: 0;
}

/* Форма та же, что у плиток на главной: вытянутый прямоугольник
   со скруглёнными углами, снимок кадрируется по нему.
   Размер и место приходят переменными из правил ниже, чтобы вся
   раскладка читалась одной таблицей.
   Снимки медленно плывут вверх-вниз — «летают». Анимация в alternate,
   поэтому конечный кадр не совпадает с начальным и рывка нет.
   Отрицательная задержка разводит их по фазе: движение начинается
   не с нуля, а с середины цикла. */
.contact__photo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1 / 1.2;
  overflow: hidden;
  border-radius: var(--contact-photo-radius);
  background-color: var(--color-surface);
  animation: contact-drift var(--dur) ease-in-out var(--delay) infinite alternate;
}

.contact__photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes contact-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx), var(--dy), 0); }
}

/* Раскладка снимков. Координаты и ширина — в процентах ширины окна,
   поэтому картина не разъезжается при смене размера экрана.
   Центр оставлен пустым: там стоят заголовок и кнопка.
   Часть снимков намеренно выходит за кромку окна — их обрезает
   overflow у .contact__window. */
.contact__photo:nth-child(1)  { --x: 4%;   --y: 12%; --w: 7.5%; --dx: 0;     --dy: -14px; --dur: 13s; --delay: -2s; }
.contact__photo:nth-child(2)  { --x: 9%;   --y: 33%; --w: 6%;   --dx: 6px;   --dy: 12px;  --dur: 16s; --delay: -7s; }
.contact__photo:nth-child(3)  { --x: 7%;   --y: 63%; --w: 9%;   --dx: -5px;  --dy: -16px; --dur: 15s; --delay: -4s; }
.contact__photo:nth-child(4)  { --x: 25%;  --y: 78%; --w: 5.5%; --dx: 4px;   --dy: 10px;  --dur: 11s; --delay: -9s; }
.contact__photo:nth-child(5)  { --x: 29%;  --y: 9%;  --w: 6.5%; --dx: -6px;  --dy: 13px;  --dur: 17s; --delay: -5s; }
.contact__photo:nth-child(6)  { --x: 46%;  --y: -4%; --w: 5.5%; --dx: 0;     --dy: 14px;  --dur: 12s; --delay: -1s; }
.contact__photo:nth-child(7)  { --x: 60%;  --y: 6%;  --w: 8%;   --dx: 5px;   --dy: -12px; --dur: 14s; --delay: -8s; }
.contact__photo:nth-child(8)  { --x: 83%;  --y: 26%; --w: 6.5%; --dx: -4px;  --dy: 15px;  --dur: 18s; --delay: -3s; }
.contact__photo:nth-child(9)  { --x: 90%;  --y: 56%; --w: 7%;   --dx: 7px;   --dy: -11px; --dur: 13s; --delay: -6s; }
.contact__photo:nth-child(10) { --x: 70%;  --y: 74%; --w: 8.5%; --dx: -6px;  --dy: -14px; --dur: 16s; --delay: -10s; }
.contact__photo:nth-child(11) { --x: 43%;  --y: 84%; --w: 6%;   --dx: 5px;   --dy: 12px;  --dur: 12s; --delay: -4s; }

/* Заголовок и кнопка поверх снимков: у слоя со снимками
   position: absolute, без z-index он бы лёг на текст. */
.contact__title {
  position: relative;
  z-index: 1;
  max-width: 24ch;
  margin: 0;
  font-size: var(--contact-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--statement-tracking);
  text-wrap: balance;
}

.contact__cta {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

/* На узком экране снимки в центре наезжают на текст — оставляем
   четыре по углам и разводим их шире, остальные прячем.
   Заголовок при этом занимает почти всю ширину окна. */
@media (max-width: 767px) {
  .contact__window {
    min-height: min(80svh, 34rem);
    padding: clamp(2.5rem, 10vw, 4rem) var(--gutter);
  }

  .contact__photo {
    display: none;
  }

  .contact__photo:nth-child(1),
  .contact__photo:nth-child(4),
  .contact__photo:nth-child(7),
  .contact__photo:nth-child(9) {
    display: block;
    --w: 15%;
  }

  .contact__photo:nth-child(1) { --x: 5%;  --y: 8%; }
  .contact__photo:nth-child(4) { --x: 12%; --y: 78%; }
  .contact__photo:nth-child(7) { --x: 74%; --y: 10%; }
  .contact__photo:nth-child(9) { --x: 80%; --y: 74%; }

  .contact__title {
    max-width: 14ch;
  }
}