/* Защита экрана. Слой независим от дизайна:
   он двигает #app и кладёт поверх свои оверлеи, больше ничего не трогает.
   Дизайну достаточно держать корневой элемент с id="app". */

:root {
  --bi-x: 0px;          /* сдвиг пикселей, ставит burnin.js */
  --bi-y: 0px;
  --bi-s: 1;            /* ужатие под запас хода, см. shift.mode = "fit" */
  --bi-bright: 1;       /* «дыхание» яркости */
}

html { background: #000; }   /* края при сдвиге — чёрные, не белые */

#app {
  transform: translate(var(--bi-x), var(--bi-y)) scale(var(--bi-s));
  filter: brightness(var(--bi-bright));
  transition: transform 3s linear, filter 8s linear;
  will-change: transform, filter;
}

/* затемнение по бездействию и ночь.
   Не чистый чёрный поверх всего: сквозь него на несколько процентов
   просвечивает интерфейс, поэтому часы ночью видно. */
#bi-dim {
  position: fixed; inset: 0; z-index: 9000;
  background: #000; opacity: 0;
  pointer-events: none;
  transition: opacity var(--bi-fade, 2.5s) ease;
}
#bi-dim.on { pointer-events: auto; }

/* прогон пикселей: полноэкранная промывка, гоняет ЖК-слой по всем уровням */
#bi-sweep {
  position: fixed; inset: 0; z-index: 9500;
  display: none; opacity: 0;
  transition: opacity 1.2s ease;
  background: #000;
}
#bi-sweep.run { display: block; opacity: 1; }
#bi-sweep .band {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%,
    rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  animation: bi-band 3.2s linear infinite;
  mix-blend-mode: screen;
}
@keyframes bi-band {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}