/* Фон с "бинарной математикой" по всему сайту */
.binary-bg {
  position: fixed;
  inset: 0;
  z-index: 0;             /* фон */
  pointer-events: none;   /* не блокирует клики */
  overflow: hidden;
  opacity: 0.9;           /* видно, но не слишком ярко */
  transition: opacity 0.8s ease; /* плавное растворение при паузах */
}

/* когда в режиме паузы — всё растворяется и анимация стопится */
.binary-bg.is-paused {
  opacity: 0; /* плавное исчезновение */
}

/* один столбик (внутри много строк через \n) */
.binary-col{
  position:absolute;
  color: rgba(0,255,120,.65);
  font-family: "JetBrains Mono","Fira Code",system-ui,monospace;
  font-weight:500;
  white-space: pre;        /* чтобы \n работали */
  user-select:none;
  filter: blur(0.25px);
  will-change: transform, opacity;
  line-height: 1.35;       /* шаг между строками */
  opacity: var(--bopacity, .45);

  /* “голова ярче, хвост тусклее” без JS по строкам */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.9) 20%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.9) 20%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,0) 100%
  );
}

/* реально останавливаем анимацию у столбиков */
.binary-bg.is-paused .binary-col{
  animation-play-state: paused;
}

/* контент поверх фона */
.header,
.section,
.footer {
  position: relative;
  z-index: 1;
}

/*
 * Ключевая анимация:
 * - 0–5%: появление наверху
 * - 5–55%: падение вниз и постепенное растворение
 * - 55–80%: внизу, невидимо (пауза)
 * - 80–100%: невидимо возвращаемся наверх
 */
@keyframes binary-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }

  5% {
    transform: translate3d(0, 0, 0);
    opacity: var(--bopacity, 0.45);
  }

  55% {
    transform: translate3d(0, 200vh, 0);
    opacity: 0;
  }

  80% {
    transform: translate3d(0, 200vh, 0);
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
}

/* На мобилках — чуть мягче визуал */
@media (max-width: 768px) {
  .binary-bg {
    opacity: 0.75;
  }

  .binary-col {
    filter: blur(0.2px);
  }
}