/* Scanlines */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.2));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1000;
}

/* Glitch Text Effect */
.glitch-logo {
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    color: var(--secondary-color);
    letter-spacing: 0.1em;
}

.glitch-logo::before,
.glitch-logo::after {
    display: block;
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
}

.glitch-logo::before {
    animation: glitch-color-1 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: var(--primary-color);
    z-index: -1;
}

.glitch-logo::after {
    animation: glitch-color-2 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: var(--danger-color);
    z-index: -2;
}

@keyframes glitch-color-1 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes glitch-color-2 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(2px, -2px);
    }

    40% {
        transform: translate(2px, 2px);
    }

    60% {
        transform: translate(-2px, -2px);
    }

    80% {
        transform: translate(-2px, 2px);
    }

    100% {
        transform: translate(0);
    }
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}