/* crt-filter.css */

/* 1. 基础滤镜层 */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 99999;
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

/* 2. 加载逻辑控制 */
body:not(.is-preload)::after {
    opacity: 1;
    animation: flicker 0.15s infinite;
}

/* 3. 动画定义 */
@keyframes flicker {
    0% {
        opacity: 0.9;
    }

    5% {
        opacity: 0.95;
    }

    10% {
        opacity: 0.9;
    }

    100% {
        opacity: 1;
    }
}

/* 4. 暗角效果 */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 99998; /* 稍微调低一点，让它在扫描线下层 */
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

/* 加载完成后暗角也显示 */
body:not(.is-preload)::before {
    opacity: 1;
}