/* ГЕРО · белый корпус под полем керамики.

   Приём: поле плитки лежит ПОВЕРХ кадра и стирается по диагонали — материал
   фасада становится самим фасадом. Стирание задаёт одна переменная
   --sd-a0-wipe: 0 % — плитка закрывает кадр целиком, 100 % — плитки нет.

   ЗНАЧЕНИЕ ПО УМОЛЧАНИЮ 100 %, И ЭТО НЕ КОСМЕТИКА. Без JS (или при заглохшей
   библиотеке) посетитель обязан увидеть дом, а не глухую стену из плиток.
   Стартовое положение ставит только сам скрипт. */

.sd-a0 {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #2A2521;
  --sd-a0-wipe: 100%;
}

.sd-a0__shot, .sd-a0__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.sd-a0__shot img { object-fit: cover; object-position: 50% 62%; }

/* Поле плитки — отдельным файлом с ЗАПЕЧЁННЫМИ цветами: в background-image
   стили страницы не проникают, и классы t-flat/t-lit там просто не работают
   (scripts/tile-field.py --baked). */
.sd-a0__tiles {
  position: absolute; inset: -2px;
  background-image: url("../img/a0-tiles.svg");
  background-size: cover; background-position: 50% 50%;
  -webkit-mask-image: linear-gradient(118deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) var(--sd-a0-wipe),
      #000 calc(var(--sd-a0-wipe) + 15%), #000 100%);
  mask-image: linear-gradient(118deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) var(--sd-a0-wipe),
      #000 calc(var(--sd-a0-wipe) + 15%), #000 100%);
}

/* Вуаль СНЯТА почти полностью: она глушила ровно то, ради чего кадр здесь
   стоит — светлую керамику. Осталась мягкая тень по нижнему краю, чтобы
   карточка не висела в пустоте. Контраст копии обеспечивает сама карточка:
   она непрозрачная бумага, и считается по токенам, а не по удаче фона. */
.sd-a0__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(30,24,19,.26) 0, rgba(30,24,19,0) 34%);
}

/* Копия — на бумаге, как и во всех остальных актах. Текста поверх фотографии
   на этом сайте нет нигде: он уже один раз оказался нечитаемым. */
.sd-a0__card {
  position: absolute; z-index: 3;
  left: var(--sd-gutter); bottom: clamp(46px, 10vh, 112px);
  width: min(520px, 42vw);
  padding: clamp(22px, 1.9vw, 32px) clamp(24px, 2.1vw, 36px) clamp(24px, 2.1vw, 34px);
  color: var(--sd-ink);
}
.sd-a0__k {
  margin: 0 0 14px; font-family: var(--sd-draft); font-weight: 600;
  font-size: clamp(11px, .78vw, 13px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sd-brick);   /* 10.75 на бумаге */
}
.sd-a0__h {
  margin: 0; font-family: var(--sd-display); font-weight: 400;
  font-size: clamp(29px, 3.1vw, 48px); line-height: 1.1;
  letter-spacing: .012em; color: var(--sd-ink);        /* 14.90 на бумаге */
}
.sd-a0__h span { display: block; }
.sd-a0__t {
  margin: 18px 0 0; max-width: 30em;
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55;
  color: #3A342E;                              /* 10.70 на бумаге */
}
.sd-a0__cta { margin: 26px 0 0; }
.sd-a0__cta .sd-btn:hover { background: transparent; color: var(--sd-brick); }

/* Подпись у поля плитки — она объясняет, ЧТО стирается, и уходит вместе с ним */
.sd-a0__note {
  position: absolute; z-index: 3; right: var(--sd-gutter); top: clamp(26px, 5vh, 54px);
  margin: 0; font-family: var(--sd-draft); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(42, 33, 27, .78);
}

@media (max-width: 860px) {
  .sd-a0 { height: 100svh; }
  .sd-a0__card { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .sd-a0__note { display: none; }
  .sd-a0__veil { background: linear-gradient(to top, rgba(30,24,19,.3) 0, rgba(30,24,19,0) 40%); }
}