/*
 * Сайт brickx — тёмная версия.
 *
 * Стилизация в макете инлайновая: так его отдала среда прототипирования,
 * и переносить сотни значений в классы значило бы переписать вёрстку
 * заново, потеряв сходство с эталоном. Здесь остаётся то, что инлайном
 * не выражается: базовые правила документа, анимации, ховер и фокус.
 *
 * Классы `hov-*` и `foc-*` собраны из атрибутов `style-hover` и
 * `style-focus` макета — атрибутов таких у браузера нет.
 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #07080c;
}

body {
  color: #eef1f8;
  font-family: 'Golos Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* `clip`, а не `hidden`: `hidden` делает body контейнером прокрутки
     и ломает `position: sticky`, на котором держатся обе скролл-сцены. */
  overflow-x: clip;
}

a {
  color: #ccff3d;
  text-decoration: none;
}

a:hover {
  color: #e4ff8c;
}

::selection {
  background: #3d5afe;
  color: #fff;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea {
  font-family: inherit;
}

@keyframes mq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes gridmove {
  from { background-position: 0 0; }
  to { background-position: 0 44px; }
}

@keyframes pulse {
  0%, 100% { opacity: .25; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.5); }
}

@keyframes sweep {
  0% { transform: translateY(-120%); }
  100% { transform: translateY(520%); }
}

@keyframes blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: .15; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ── Ховер и фокус ──────────────────────────────────────────────────── */

.hov-1:hover{color:#EEF1F8;}
.hov-2:hover{border-color:#3D5AFE; background:rgba(61,90,254,.10); color:#EEF1F8;}
.hov-3:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(204,255,61,.30);}
.hov-4:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(204,255,61,.28);}
.hov-5:hover{border-color:#3D5AFE; transform:translateY(-4px);}
.hov-6:hover{box-shadow:0 8px 22px rgba(204,255,61,.25);}
.hov-7:hover{color:#EEF1F8; border-color:#3D5AFE;}
.hov-8:hover{box-shadow:0 10px 26px rgba(204,255,61,.28);}
.hov-9:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(204,255,61,.30);}
.hov-10:hover{color:#EEF1F8; border-color:#CCFF3D;}
.hov-11:hover{background:#2B3FE0;}
.hov-12:hover{border-color:#131A2C;}
.foc-1:focus{border-color:#2B3FE0; background:#FFFFFF;}

/*
 * Ховеры внутри списков, которые рисует site.js: в макете они стояли
 * атрибутом на элементе цикла, а сам цикл сюда не перенесён.
 */
.hov-5b:hover {
  transform: translateX(3px);
}

.hov-5c:hover {
  border-color: #3d5afe;
  transform: translateY(-3px);
}

/* ── Меньше движения ────────────────────────────────────────────────── */

/*
 * Скролл-сцены — украшение, а не содержание: при `prefers-reduced-motion`
 * они гасятся, и страница читается как обычный текст. Сами сцены при этом
 * не ломаются — их конечное состояние выставляет site.js.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}