/* Фон: чёрный + наклонные бегущие строки (CSS) + искры (canvas, js/embers.js).
   Яркость строк — цвета в .bg__row--out / --fill. Скорость — --t в index.html (секунд на круг). */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }

/* слева (где текст) фон приглушён, справа — ярче */
.bg__marquee { position: absolute; inset: 0; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3), #000 80%); }

.bg__rows {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190vmax;
  translate: -50% -50%;
  rotate: -9deg;
  display: flex;
  flex-direction: column;
  font: 700 clamp(5rem, 15vw, 13rem)/.98 var(--font-main);
  text-transform: uppercase;
  word-spacing: .3em;
  white-space: nowrap;
}

.bg__row { display: flex; width: max-content; animation: marquee var(--t, 80s) linear infinite; }
.bg__row:nth-child(even) { animation-direction: reverse; }
.bg__row span { padding-right: .3em; }

.bg__row--out  { color: transparent; -webkit-text-stroke: 1.5px rgba(233, 230, 225, .09); }
.bg__row--fill { color: rgba(218, 44, 27, .14); }

@keyframes marquee { to { transform: translateX(-50%); } }

.bg__embers { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) { .bg__row { animation: none; } }