/* ═══════════════════════════════════════════════════════════════════════════
   MONSTERBOX — брендова система
   Побудована за брендбуком: кольори, шрифт, скотч, тікер, персонаж, текстури.
   Підключається перед app.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Шрифт ──────────────────────────────────────────────────────────────────
   Брендбук вказує BEBAS NEUE PRO. Він комерційний, тому тут — Oswald:
   той самий вузький гротеск, є кирилиця, ліцензія OFL. Файли самохостяться
   (жодних запитів до Google з браузера клієнта).

   Якщо у вас є ліцензія на Bebas Neue Pro — покладіть .woff2 у src/public/fonts
   і замініть src нижче; решта системи працюватиме без змін. Bebas — заголовний
   шрифт без нижнього регістру, тож усі display-класи вже стоять в uppercase. */
@font-face {
  font-family: 'MB Display';
  src: url('/static/fonts/oswald-cyrillic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'MB Display';
  src: url('/static/fonts/oswald-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Брендові кольори. Пропорція за брендбуком: червоний домінує. */
  --mb-orange: #FF4A11;   /* cmyk 0 85 100 0 */
  --mb-lime:   #E7F521;   /* cmyk 15 0 96 0 */
  --mb-black:  #000000;
  --mb-white:  #FFFFFF;

  --mb-orange-dark: #E5410F;
  --mb-ink: #141414;
  --mb-paper: #F5F5F3;

  --mb-display: 'MB Display', 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --mb-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Дисплейна типографіка ─────────────────────────────────────────────────
   Брендбук: заголовки — BOLD, основний текст — REGULAR, ієрархія будується
   накресленням і масштабом. Усе великими літерами. */
.mb-display {
  font-family: var(--mb-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
}
.mb-display-md { font-family: var(--mb-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }

/* Логотип-напис */
.mb-logo {
  font-family: var(--mb-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Персонаж ──────────────────────────────────────────────────────────────
   Плоска іконка з брендбуку (с.13), відтрасована з оригіналу у вектор
   (src/public/monster.svg). Малюється маскою, тому забарвлюється будь-яким
   кольором через currentColor і лишається одним файлом на весь проєкт. */
.mb-monster {
  display: inline-block;
  vertical-align: middle;
  aspect-ratio: 77.65 / 100;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url('/static/monster.svg') center / contain no-repeat;
  mask: url('/static/monster.svg') center / contain no-repeat;
}

/* ── Скотч ─────────────────────────────────────────────────────────────────
   Головний графічний елемент (с.29, 49-50). Два типи: лаймовий зі слоганом
   і червоний з логотипом. Накладається поверх решти, під невеликим кутом. */
.mb-tape {
  --tape-bg: var(--mb-lime);
  --tape-fg: var(--mb-black);
  --tape-angle: -2deg;
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--tape-bg);
  color: var(--tape-fg);
  transform: rotate(var(--tape-angle));
  padding: 7px 0;
  font-family: var(--mb-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.mb-tape--orange { --tape-bg: var(--mb-orange); }   /* для темних і фотофонів */
.mb-tape--black  { --tape-bg: var(--mb-black); --tape-fg: var(--mb-white); }
.mb-tape--flat { transform: none; }

.mb-tape__run {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  animation: mb-run 26s linear infinite;
}
.mb-tape__run > * { flex: none; }
.mb-tape .mb-monster { height: 1.15em; }

/* Тікер: чорна смуга з повторюваним логотипом уздовж низу помаранчевих
   полотен (с.4, 9, 33). */
.mb-ticker {
  background: var(--mb-black);
  color: var(--mb-white);
  overflow: hidden;
  padding: 9px 0;
  font-family: var(--mb-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
.mb-ticker__run {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: mb-run 34s linear infinite;
}

@keyframes mb-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-tape__run, .mb-ticker__run { animation: none; }
}

/* ── Текстури ──────────────────────────────────────────────────────────────
   Брендові фони (с.31) походять від текстур персонажа: шинно-гумова
   («перфорація») і асфальтова («зерно»). Тут відтворені як CSS-патерни,
   щоб не тягнути растр. */
.mb-tex-rubber {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.6px);
  background-size: 7px 7px;
}
.mb-tex-asphalt {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.05) .8px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(0,0,0,.22) .8px, transparent 1px);
  background-size: 5px 5px, 8px 8px;
}
/* Сліди протектора — діагональні смуги з насічками (с.29-30). */
.mb-tex-tread {
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(115deg, rgba(0,0,0,.30) 0 14px, transparent 14px 30px);
}

/* ── Кнопки в дусі вивіски-лайтбоксу (с.34-35) ─────────────────────────────── */
.mb-btn {
  font-family: var(--mb-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  border: 0;
  cursor: pointer;
  background: var(--mb-black);
  color: var(--mb-white);
  padding: 11px 20px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  transition: transform .12s ease, background .12s ease;
}
.mb-btn:hover { transform: translateY(-1px); }
.mb-btn--orange { background: var(--mb-orange); color: var(--mb-white); }
.mb-btn--orange:hover { background: var(--mb-orange-dark); }
.mb-btn--lime { background: var(--mb-lime); color: var(--mb-black); }
.mb-btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ── Бирка з ціною (с.51) ─────────────────────────────────────────────────── */
.mb-tag {
  display: inline-block;
  background: var(--mb-orange);
  color: var(--mb-white);
  font-family: var(--mb-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.25;
}
.mb-tag--lime { background: var(--mb-lime); color: var(--mb-black); }
.mb-tag--black { background: var(--mb-black); color: var(--mb-white); }