/* ===== CRT MONITOR EFFECTS ===== */
/* Эффекты для имитации старых ЭЛТ-мониторов с усиленным свечением символов */

/* Эффект включения ЭЛТ при загрузке */
@keyframes crt-power-on {
    0% {
        opacity: 0;
        filter: brightness(0) contrast(0);
    }
    10% {
        opacity: 0.1;
        filter: brightness(0.1) contrast(0.5);
    }
    30% {
        opacity: 0.3;
        filter: brightness(0.3) contrast(0.7);
    }
    50% {
        opacity: 0.7;
        filter: brightness(0.7) contrast(0.9);
    }
    70% {
        opacity: 0.9;
        filter: brightness(0.9) contrast(1);
    }
    85% {
        opacity: 0.95;
        filter: brightness(1) contrast(1.1);
    }
    100% {
        opacity: 1;
        filter: brightness(1) contrast(1);
    }
}

/* Применяем эффект включения только один раз при загрузке */
body.crt-on {
    animation: crt-power-on 2s ease-out;
}

/* ===== СЕТКА ПИКСЕЛЕЙ И ФОНОВЫЕ ЭФФЕКТЫ ===== */

/* Глобальная сетка пикселей для всего экрана */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;

    /* Плотная сетка пикселей */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 5px 5px, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 8px 8px, 12px 12px, 16px 16px;

    /* Горизонтальные scanlines */
    background-image:
        linear-gradient(
            to bottom,
            transparent 95%,
            rgba(0, 0, 0, 0.2) 95%
        ),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size:
        100% 3px,
        8px 8px,
        12px 12px;

    /* Виньетка */
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.7),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Вертикальные полосы */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
    pointer-events: none;
    background: linear-gradient(
        to right,
        transparent 98%,
        rgba(255, 255, 255, 0.015) 98%,
        rgba(255, 255, 255, 0.015) 99%,
        transparent 99%
    );
    background-size: 4px 100%;
    opacity: 0.08;
}

/* Эффект мерцания фона */
@keyframes crt-flicker {
    0%, 100% { opacity: 0.98; }
    50% { opacity: 1; }
    75% { opacity: 0.99; }
}

/* Применяем мерцание только к фону */
body::before {
    animation: crt-flicker 5s infinite;
}

/* Исключаем холст студии из CRT эффектов */
.canvas-outer-frame,
.canvas-grid,
.grid-cell {
    /* Отключаем CRT эффекты для холста */
    animation: none !important;
}

/* Предотвращаем наложение CRT сетки на холст */
.canvas-outer-frame::before,
.canvas-grid::before,
.grid-cell::before {
    display: none !important;
}

/* Убираем мерцание для холста */
.canvas-outer-frame {
    opacity: 1 !important;
}