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

.statement {
  padding: var(--gutter);
}

/* Лист бумаги. Высота — экран за вычетом полей вокруг окна, иначе
   с ними блок перерастал бы экран и полз бы под следующий.
   overflow: hidden обрезает зерно по скруглению. */
.statement__window {
  position: relative; /* отсчёт для украшений по углам и слоя зерна */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--gutter) * 2);
  padding: calc(var(--gutter) * 2) var(--gutter);
  overflow: hidden;
  border-radius: var(--statement-radius);
  background-color: var(--color-paper);
  color: var(--color-bg);
  text-align: center;
}

/* Зерно на бумаге. Та же плитка и тот же масштаб, что у фона страницы
   (base.css), — крупинка на всей странице одна и та же. Разница только
   в filter: invert — плитка светлая, и на тёмном фоне она даёт светлые
   крупинки, а на бумаге нужны тёмные. Средний тон вывернутой плитки
   опускает лист с #efeee8 до видимых ~#e9e8e3.
   Плитка не fixed, в отличие от фона страницы: зерно принадлежит листу
   и должно ехать вместе с ним, иначе на скролле оно по нему «плывёт». */
.statement__window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/img/grain.png");
  background-size: 93.5px;
  background-repeat: repeat;
  opacity: var(--paper-grain-opacity);
  filter: invert(1);
  pointer-events: none;
}

/* Украшения по углам — из того же материала, что волна на первом
   экране: моноширинные нули и единицы, серые со светлыми долями.
   Шрифт только моноширинный: цифры и пробелы обязаны быть одной ширины,
   иначе рисунок разъезжается.
   Углы, кегль и сетку задают модификаторы ниже: у рисунков разное
   число знакомест, а места в углу они должны занимать поровну. */
.statement__chart {
  position: absolute;
  z-index: 1; /* над слоем зерна */
  margin: 0;
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--color-text-muted-inverse);
  white-space: pre;
  /* Блок наследует центрирование от секции, а оно центрует каждую
     строку по отдельности и разваливает рисунок. Строки только слева. */
  text-align: left;
  user-select: none;
}

/* Столбики — в правом нижнем углу, кольца — в левом верхнем.
   Кегль привязан к ширине экрана и подобран так, чтобы оба рисунка
   занимали в углу одинаковое место: у столбиков сетка 40 знакомест
   по 0.6 кегля (24 кегля в ширину), у колец — 52 (31.2 кегля),
   отсюда разные множители. Потолок держит рисунок мелким на широком
   мониторе, где он иначе полез бы к тексту. */
.statement__chart--bars {
  right: var(--gutter);
  bottom: var(--gutter);
  font-size: min(0.8vw, 12px);
}

.statement__chart--circles {
  top: var(--gutter);
  left: var(--gutter);
  font-size: min(0.52vw, 8px);
}

/* Тёмная часть рисунка: верхняя строка столбика и заполненный сектор
   кольца. Остальное серое — от этого рисунок читается объёмным,
   а не плоской заливкой. На бумаге всё вывернуто: там, где на тёмном
   фоне был самый светлый тон, здесь самый тёмный. */
.statement__chart-core {
  color: var(--color-bg);
}

/* Подпись над фразой: тем же мелким кеглем, что подпись имени
   на первом экране, и приглушённым тоном — она подписывает блок,
   а не спорит с ним за внимание. */
.statement__label {
  position: relative; /* над диаграммой в углу */
  z-index: 2;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2.25rem);
  color: var(--color-text-muted-inverse);
  font-size: var(--subtitle-size);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Переносы заданы вручную, поэтому ширину блока не задаём: он равен
   самой длинной строке и центруется целиком. Потолок в 100% — страховка
   на случай, если строка перестанет влезать в экран: тогда она
   перенесётся сама, вместо того чтобы уехать за край. */
.statement__text {
  position: relative; /* над диаграммой в углу */
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: var(--statement-size);
  font-weight: 700;
  line-height: var(--statement-leading);
  letter-spacing: var(--statement-tracking);
}

/* Строка заданного переноса. Блочная — значит следующая строка всегда
   начинается с новой, независимо от ширины экрана. */
.statement__line {
  display: block;
}

/* Слово-акцент. Курсива у Manrope нет — наклон синтезирует браузер,
   ровно как оптический курсив в референсе. Подчёркивание сплошное:
   skip-ink разорвал бы линию под хвостом «р» в «рынок», а в референсе
   линия идёт под словом целиком. */
.statement__accent {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: var(--statement-underline);
  text-underline-offset: var(--statement-underline-offset);
  text-decoration-skip-ink: none;
}

/* Порог шире обычных 767px: на планшете фраза занимает почти всю ширину
   экрана, и диаграмма в углу упирается в неё. Там убираем — как волну
   на первом экране. */
@media (max-width: 1023px) {
  .statement__chart {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Заданные переносы рассчитаны на широкий экран: в ширину телефона
     такие строки не влезают. Возвращаем фразу в общий поток — пусть
     переносится сама по ширине экрана. */
  .statement__text {
    width: auto;
  }

  .statement__line {
    display: inline;
  }
}