/* Чёрная пятница на витрине OBSCURE: бегущая полоса под шапкой и строка на первом экране.
   Весь слой — этот файл + bf.js. Показывается, только пока цены на сайте снижены
   (tools/распродажа.mjs on); снять раньше — убрать две строки из <head> app.html. */
:root {
  --bf-bone: #ececea;
  --bf-ink: #0b0b0c;
  --bf-gap: 2.2em;
  --bf-speed: 26s;
}

.bf-band {
  position: relative; overflow: hidden; white-space: nowrap;
  background: var(--bf-bone); color: var(--bf-ink);
  border-bottom: 1px solid var(--line, #222);
  font-family: var(--mono, 'Courier New', monospace); font-weight: 800;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 0; user-select: none;
}
.bf-track { display: inline-flex; gap: var(--bf-gap); padding-left: var(--bf-gap); }
.bf-track span { display: inline-flex; align-items: center; gap: var(--bf-gap); }
.bf-track b { font-weight: 900; }
/* разделитель — маленький чёрный ромб */
.bf-track i { width: 6px; height: 6px; background: var(--bf-ink); transform: rotate(45deg); display: inline-block; }

/* строка на первом экране, над кнопкой — в тон плашкам скидки */
.bf-hero {
  position: relative; display: inline-block; margin: -10px auto 22px;
  background: var(--bf-bone); color: var(--bf-ink); padding: 6px 12px;
  font-family: var(--mono, 'Courier New', monospace); font-weight: 800;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-1.5deg); box-shadow: 4px 4px 0 rgba(236,236,234,.16);
}

@media (min-width: 900px) {
  .bf-band { font-size: 13px; padding: 11px 0; }
  .bf-hero { font-size: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .bf-track { animation: bf-run var(--bf-speed) linear infinite; }
  @keyframes bf-run { to { transform: translateX(-50%); } }
}