/**
 * node-content-frame.css — фон и рамка контента узла (иллюстрация + текст).
 * Один общий фон (матрица + сканлайн) под картинкой и текстом, уголки TL/BR, линии только верх/низ.
 */

/* --- Цвета и прозрачность элементов фона и рамки (→ variables.css) --- */
:root {
    --frame-sq-color: var(--frame-color);
    --frame-line-color: var(--frame-rgb);
    --frame-line-alpha: 0.5;
    --matrix-primary-color: var(--frame-rgb);
    --matrix-primary-alpha: 0.03;
    --matrix-secondary-color: 0, 0, 0;
    --matrix-secondary-alpha: 0.02;
    --scanline-color: var(--frame-rgb);
    --scanline-alpha: 0.05;
}

/* --- Рамка контента узла (иллюстрация + текст), без вертикальных линий --- */
.scene-content-frame {
    position: relative;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    margin: 0 0 46px 0;
}

/* Появление фона и рамки: @keyframes frameFlickerIn в css/buttons.css */

.scene-content-frame .matrix-bg-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--matrix-primary-color), var(--matrix-primary-alpha)),
        rgba(var(--matrix-primary-color), var(--matrix-primary-alpha)) 50px,
        rgba(var(--matrix-secondary-color), var(--matrix-secondary-alpha)) 50px,
        rgba(var(--matrix-secondary-color), var(--matrix-secondary-alpha)) 70px
    );
    animation: matrixFlow 0s linear infinite, frameFlickerIn 2s ease-out forwards;
    opacity: 0;
    z-index: -2;
}

.scene-content-frame .scanline-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 50%,
        rgba(var(--scanline-color), var(--scanline-alpha)) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    animation: frameFlickerIn 2s ease-out forwards;
    opacity: 0;
    z-index: -1;
}

.scene-content-frame .sq {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--frame-sq-color);
}

.scene-content-frame .corner-group {
    position: absolute;
    z-index: 1;
    animation: frameFlickerIn 2s ease-out forwards;
    opacity: 0;
}

.scene-content-frame .tl {
    top: 0;
    left: 0;
}
.scene-content-frame .tl .sq:nth-child(1) { top: 0; left: 0; }
.scene-content-frame .tl .sq:nth-child(2) { top: 0; left: 2px; }
.scene-content-frame .tl .sq:nth-child(3) { top: 0; left: 4px; }
.scene-content-frame .tl .sq:nth-child(4) { top: 0; left: 6px; }
.scene-content-frame .tl .sq:nth-child(5) { top: 2px; left: 0; }
.scene-content-frame .tl .sq:nth-child(6) { top: 4px; left: 0; }
.scene-content-frame .tl .sq:nth-child(7) { top: 6px; left: 0; }

.scene-content-frame .br {
    bottom: 0;
    right: 0;
}
.scene-content-frame .br .sq:nth-child(1) { bottom: 0; right: 0; }
.scene-content-frame .br .sq:nth-child(2) { bottom: 0; right: 2px; }
.scene-content-frame .br .sq:nth-child(3) { bottom: 0; right: 4px; }
.scene-content-frame .br .sq:nth-child(4) { bottom: 0; right: 6px; }
.scene-content-frame .br .sq:nth-child(5) { bottom: 2px; right: 0; }
.scene-content-frame .br .sq:nth-child(6) { bottom: 4px; right: 0; }
.scene-content-frame .br .sq:nth-child(7) { bottom: 6px; right: 0; }

.scene-content-frame .line {
    position: absolute;
    background: rgba(var(--frame-line-color), var(--frame-line-alpha));
    z-index: 0;
    animation: frameFlickerIn 2s ease-out forwards;
    opacity: 0;
}

.scene-content-frame .line.h-top {
    top: 0;
    left: 8px;
    right: 0;
    height: 1px;
}
.scene-content-frame .line.h-bottom {
    bottom: 0;
    left: 0;
    right: 8px;
    height: 1px;
}

.scene-content-frame .scene-content-frame-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    box-sizing: border-box;
}

/* Настройки текста узла — в css/buttons.css */

@keyframes matrixFlow {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}