/* ============================================================
   COMMUTATOR // FX LAYER
   Атмосфера: CRT, глитчи, микро-интеракции.
   Подключать на страницах ПОСЛЕ основного <style>.
   ============================================================ */

:root {
    --fx-red: #8e0e0e;
    --fx-red-hi: #b91c1c;
}

/* --- Выделение текста и каретка --- */
::selection { background: var(--fx-red); color: #000; }
input, textarea { caret-color: var(--fx-red-hi); }

/* --- Скроллбар --- */
html { scrollbar-width: thin; scrollbar-color: #2a2a2a #0d0d0d; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border: 2px solid #0d0d0d; }
::-webkit-scrollbar-thumb:hover { background: var(--fx-red); }

/* --- Оверлеи (вставляются fx.js, pointer-events: none) --- */
.fx-vignette {
    position: fixed; inset: 0; z-index: 9988; pointer-events: none;
    background: radial-gradient(ellipse at 50% 38%, transparent 55%, rgba(0, 0, 0, .42) 100%);
    transition: opacity .25s ease;
}

/* --- Datamosh при скролле ---
   Фильтр #fxMosh (SVG вставляет fx.js) вешается на body только на время
   скролла. Фикс-оверлеи в этот момент прячем: filter на body делает их
   containing block'ом body, и позиционирование поехало бы. */
.fx-moshing .fx-vignette,
.fx-moshing .fx-hud { opacity: 0; }

/* --- HUD: строка системного лога внизу слева --- */
.fx-hud {
    position: fixed; left: 14px; bottom: 10px; z-index: 9991;
    pointer-events: none; user-select: none;
    font-family: 'Handjet', monospace; font-size: 14px;
    letter-spacing: 2px; text-transform: uppercase; color: #3d3d3d;
    transition: opacity .25s ease;
}
.fx-hud .fx-cursor {
    display: inline-block; width: 7px; height: 11px; margin-left: 6px;
    background: #565656; animation: fxBlink 1.1s steps(1) infinite;
}
@keyframes fxBlink { 50% { opacity: 0; } }
@media (max-width: 600px) { .fx-hud { display: none; } }

/* --- Глитч заголовков (вешается fx.js по hover и случайно) --- */
.fx-title { position: relative; }
.fx-glitch { animation: fxGlitch .3s steps(2, end) 1; }
@keyframes fxGlitch {
    0%   { text-shadow: none; transform: none; }
    25%  { text-shadow: -2px 0 var(--fx-red-hi), 2px 0 #4a4a4a; transform: translateX(1px) skewX(-1.5deg); }
    50%  { text-shadow: 2px 0 var(--fx-red-hi), -2px 0 #666;    transform: translateX(-1px); }
    75%  { text-shadow: -1px 0 var(--fx-red-hi); transform: translateX(1px); }
    100% { text-shadow: none; transform: none; }
}

/* --- Появление строк таблиц (fx.js раздаёт задержки) --- */
.fx-reveal { opacity: 0; animation: fxIn .45s ease-out forwards; }
@keyframes fxIn { to { opacity: 1; } }

/* --- Ленивое появление больших блоков при скролле --- */
.fx-lazyfade { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s ease; }
.fx-lazyfade.fx-in { opacity: 1; transform: none; }

/* --- Панель с бегущей линией сканирования по верхней грани --- */
.fx-panel { position: relative; overflow: hidden; }
.fx-panel::before {
    content: ''; position: absolute; top: 0; left: -45%;
    width: 45%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--fx-red-hi), transparent);
    animation: fxPanelScan 4.5s ease-in-out infinite;
}
@keyframes fxPanelScan {
    0%   { left: -45%; }
    60%  { left: 100%; }
    100% { left: 100%; }
}

/* --- Инпуты: свечение при фокусе --- */
input[type=text], input[type=email], input[type=password], .input-field, .filter-input {
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
.input-field:focus, .filter-input:focus {
    box-shadow: 0 0 0 1px rgba(142, 14, 14, .65), 0 0 18px rgba(142, 14, 14, .22);
}

/* --- Кнопки --- */
button, .btn-invite, .back {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                letter-spacing .3s ease, box-shadow .3s ease, transform .08s ease;
}
button:hover, .btn-invite:hover, .back:hover { letter-spacing: 2px; box-shadow: 0 0 18px rgba(142, 14, 14, .35); }
button:active, .btn-invite:active { transform: translateY(1px); }
button:focus-visible { outline: 1px solid var(--fx-red-hi); outline-offset: 2px; }

/* --- Таблицы: подсветка строки --- */
.data-table td { transition: color .2s ease; }
.data-table tbody tr, .data-row { transition: background-color .2s ease, box-shadow .2s ease; }
.data-table tbody tr:hover, .data-row:hover {
    background: rgba(142, 14, 14, .07);
    box-shadow: inset 2px 0 0 var(--fx-red);
}
.data-table tbody tr:hover td { color: #b0b0b0; }

/* --- Статусы: пульс --- */
.status-badge { --fx-pulse: transparent; }
.st-connected { --fx-pulse: rgba(24, 142, 14, .45); }
.st-online    { --fx-pulse: rgba(74, 222, 128, .45); }
.st-queue     { --fx-pulse: rgba(142, 14, 14, .50); }
.st-connected, .st-online, .st-queue { animation: fxPulse 3.2s ease-in-out infinite; }
@keyframes fxPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    50%      { box-shadow: 0 0 12px var(--fx-pulse); }
}

/* --- Сайдбар и logout --- */
.sidebar-item { transition: color .2s ease, letter-spacing .25s ease, text-shadow .25s ease; }
.sidebar-item:hover { color: var(--fx-red-hi); letter-spacing: 2px; text-shadow: 0 0 10px rgba(185, 28, 28, .4); }
.logout-btn { transition: color .2s ease, letter-spacing .25s ease; }
.logout-btn:hover { letter-spacing: 2px; }

/* --- Карточка профиля (дашборд) --- */
.avatar-box, .admin-box { transition: box-shadow .3s ease, border-color .3s ease; animation: fxGhost 9s steps(1) infinite; }
.user-info-block:hover .avatar-box, .admin-profile:hover .admin-box {
    box-shadow: 0 0 25px rgba(142, 14, 14, .45);
    border-color: var(--fx-red-hi);
}
@keyframes fxGhost {
    0%, 100% { opacity: 1; }
    91% { opacity: 1; } 92% { opacity: .3; } 93% { opacity: 1; }
    95% { opacity: .55; } 96% { opacity: 1; }
}

/* --- UUID в профиле --- */
.user-uuid { transition: color .25s ease, text-shadow .25s ease; }
.user-uuid:hover { text-shadow: 0 0 12px rgba(185, 28, 28, .6); }
.user-uuid.fx-copied { color: #188e0e !important; text-shadow: 0 0 12px rgba(24, 142, 14, .6); }

/* --- Ошибка логина: тряска --- */
.error { animation: fxShake .4s ease-in-out 1; }
@keyframes fxShake {
    0%, 100% { transform: none; }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* --- Уважение к prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    .fx-hud .fx-cursor,
    .st-connected, .st-online, .st-queue,
    .avatar-box, .admin-box, .fx-panel::before,
    .fx-glitch, .error { animation: none !important; }
    .fx-reveal { animation: none !important; opacity: 1 !important; }
    .fx-lazyfade { opacity: 1 !important; transform: none !important; transition: none !important; }
}