/* ============================================================
TERMINAL EFFECT
Универсальный CRT/«аварийный терминал» оверлей.
Подключается на любую страницу сайта, работает без JS.
ПОДКЛЮЧЕНИЕ
-----------
1) В страницы, ПОСЛЕ основного CSS:
2) Сразу после :
ЦВЕТ ПОЛЗУЩЕЙ ПОЛОСЫ
--------------------
Определяется в таком порядке приоритета:
1. --scan-color (если задан на странице)
2. --section-color (уже есть на каждой странице сайта)
3. #c8991a (золотой фолбэк)
Чтобы задать вручную — добавьте на странице (или в её :root):
--scan-color: #5a5f66;
РЕГУЛЯТОРЫ
----------
--scan-intensity 0..1 общая яркость оверлея (по умолчанию 1)
--scan-sweep-duration время период ползущей полосы (по умолчанию 11s)
--scan-burst-period время период редкого сбоя (по умолчанию 30s)
ВЫКЛЮЧАТЕЛИ
-----------
• — ручное отключение оверлея.
• prefers-reduced-motion — авто-отключение для доступности.
• @media print — эффекты не печатаются.
============================================================ */
/* ------------------------------------------------------------
КОНТЕЙНЕР ОВЕРЛЕЯ
------------------------------------------------------------ */
.horror-overlay {
/* Наследуем акцентный цвет страницы.
var(--a, var(--b, fallback)) — цепочка фолбэков. */
--scan-accent: var(--scan-color, var(--section-color, #c8991a));
position: fixed;
inset: 0;
pointer-events: none; /* клики проходят насквозь */
z-index: 900;
opacity: var(--scan-intensity, 1);
/* Виньетка: мягкое затемнение по краям + лёгкий красный подтон */
box-shadow:
inset 0 0 180px rgba(0, 0, 0, 0.45),
inset 0 0 70px rgba(120, 0, 0, 0.18);
}
/* ------------------------------------------------------------
SCANLINES — горизонтальные полосы, как на ЭЛТ
------------------------------------------------------------ */
.horror-overlay::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.08) 0px,
rgba(0, 0, 0, 0.08) 1px,
transparent 1px,
transparent 3px
);
opacity: 0.55;
}
/* ------------------------------------------------------------
ПОЛЗУЩАЯ ПОЛОСА СКАНИРОВАНИЯ
Цвет берётся из --scan-accent через color-mix().
Для старых браузеров — фолбэк на золотой rgba.
------------------------------------------------------------ */
.horror-overlay::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 140px;
/* Фолбэк (браузеры без color-mix) */
background: linear-gradient(
to bottom,
transparent,
rgba(200, 153, 26, 0.05) 45%,
rgba(200, 153, 26, 0.09) 50%,
rgba(200, 153, 26, 0.05) 55%,
transparent
);
/* Основной вариант: цвет = --scan-accent */
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--scan-accent) 5%, transparent) 45%,
color-mix(in srgb, var(--scan-accent) 9%, transparent) 50%,
color-mix(in srgb, var(--scan-accent) 5%, transparent) 55%,
transparent
);
animation: scanSweep var(--scan-sweep-duration, 11s) linear infinite;
}
/* ------------------------------------------------------------
РЕДКИЙ СБОЙ НА ВЕСЬ ЭКРАН
Белый прямоугольник + mix-blend-mode: difference → инверсия.
steps(1, end) даёт резкие «прыжки» вместо плавной интерполяции.
------------------------------------------------------------ */
.horror-burst {
position: absolute;
inset: 0;
background: #ffffff;
mix-blend-mode: difference;
opacity: 0;
animation: horrorBurst var(--scan-burst-period, 30s) steps(1, end) infinite;
}
/* ------------------------------------------------------------
KEYFRAMES
------------------------------------------------------------ */
@keyframes scanSweep {
0% { top: -140px; } /* старт за верхней границей */
100% { top: 100%; } /* уезжает за нижнюю */
}
@keyframes horrorBurst {
0%, 96.9% { opacity: 0; transform: translate(0, 0); }
97% { opacity: 0.12; transform: translate(-3px, 1px); }
97.2% { opacity: 0; transform: translate(0, 0); }
97.6% { opacity: 0.08; transform: translate(2px, -1px); }
97.8% { opacity: 0; transform: translate(0, 0); }
100% { opacity: 0; }
}
/* ------------------------------------------------------------
ВЫКЛЮЧАТЕЛЬ:
------------------------------------------------------------ */
body.no-horror .horror-overlay,
body.no-horror .horror-overlay::before,
body.no-horror .horror-overlay::after,
body.no-horror .horror-burst {
display: none !important;
animation: none !important;
}
/* ------------------------------------------------------------
ДОСТУПНОСТЬ: уважение к prefers-reduced-motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.horror-overlay,
.horror-overlay::before,
.horror-overlay::after,
.horror-burst {
display: none !important;
animation: none !important;
}
}
/* ------------------------------------------------------------
ПЕЧАТЬ: никаких scanlines на бумаге
------------------------------------------------------------ */
@media print {
.horror-overlay { display: none !important; }
}