/* Pixel-art stepped border effect */
.pixel-border {
    box-shadow:
        inset -2px -2px 0 0 var(--neon-cyan),
        inset 2px 2px 0 0 rgba(0, 245, 255, 0.3);
}

/* Pixel-art corners using clip-path */
.pixel-clip {
    clip-path: polygon(
        0 8px, 8px 8px, 8px 0,
        calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
        calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px),
        0 calc(100% - 8px)
    );
}

/* Scanline CRT overlay */
.scanlines {
    position: relative;
}

.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Neon text glow */
.neon-text {
    color: var(--neon-cyan);
    text-shadow:
        0 0 7px var(--neon-cyan),
        0 0 10px var(--neon-cyan),
        0 0 21px var(--neon-cyan);
}

.neon-text--magenta {
    color: var(--neon-magenta);
    text-shadow:
        0 0 7px var(--neon-magenta),
        0 0 10px var(--neon-magenta),
        0 0 21px var(--neon-magenta);
}

.neon-text--green {
    color: var(--neon-green);
    text-shadow:
        0 0 7px var(--neon-green),
        0 0 10px var(--neon-green),
        0 0 21px var(--neon-green);
}

/* Glass card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: rgba(0, 245, 255, 0.15);
    box-shadow: var(--glow-cyan);
}

/* Glass panel (no hover effect) */
.glass-panel {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

/* Pixel art image rendering */
.pixel-render {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Neon underline for active items */
.neon-underline {
    position: relative;
}

.neon-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.neon-underline:hover::after,
.neon-underline.active::after {
    transform: scaleX(1);
}

/* Animated neon border */
@keyframes neon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.neon-border-animated {
    border: 1px solid var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    animation: neon-pulse 2s ease-in-out infinite;
}

/* Pixel grid background pattern */
.pixel-grid-bg {
    background-image:
        linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Floating pixel particles (decorative) */
@keyframes float-pixel {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(45deg); opacity: 0.6; }
}

/* Retro blink for cursors/carets */
@keyframes pixel-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.pixel-blink {
    animation: pixel-blink 1s step-end infinite;
}