/* ==========================================================================
   DropHub Crash — фон страницы (только crash.html, body.ht-crash)

   Вверху — фото двора (assets/crash_page_bg.webp) целиком, без камуфляжа
   поверх: слой непрозрачный и лежит над общим узором сайта (body::before в
   home.css), поэтому узор под ним не виден. К нижней трети слой плавно
   растворяется маской — и из-под него проступает наш камуфляж.

   Раньше фото было прибито к экрану (fixed) полупрозрачным поверх узора:
   камуфляж просвечивал сквозь него с самого верха. Теперь слой absolute —
   прокручивается вместе со страницей (и дешевле на телефоне: fixed-фон
   перерисовывается при каждой прокрутке). Высота — не меньше игрового
   поля с шапкой, чтобы растворение начиналось ниже поля.
   ========================================================================== */
:where(.ht-crash) .cr-page::before {
  position: absolute; inset: 0 0 auto 0;
  height: max(900px, 62vw);
  background: url("assets/crash_page_bg.webp") center top / cover no-repeat;
  opacity: 1;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
          mask: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
}

/* телефон: поле ниже и уже — фото короче, растворение раньше */
@media (max-width: 760px) {
  :where(.ht-crash) .cr-page::before {
    height: 620px;
    -webkit-mask: linear-gradient(180deg, #000 0, #000 50%, transparent 100%);
            mask: linear-gradient(180deg, #000 0, #000 50%, transparent 100%);
  }
}