/* glitch.css */
/* Advanced UI Glitch Effects & Dynamic Sizing */

:root {
    --glitch-color-1: #0ff; 
    --glitch-color-2: #f0f; 
    
    /* Default fallback sizes (overridden by main.js) */
    --lab-thumb-w: 256px;
    --lab-thumb-h: 160px;
}

/* --- 1. The Container --- */
.lab-glitch-container {
    position: relative;
    width: var(--lab-thumb-w);
    height: var(--lab-thumb-h);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    flex-shrink: 0; 
}

/* --- 2. The Main Image --- */
.lab-glitch-img {
    width: 100%;
    height: 100%;
    /* FIX: Force full image display (stretch to fit if needed) */
    object-fit: fill; 
    display: block;
    opacity: 0.9;
    filter: sepia(100%) hue-rotate(180deg) saturate(80%);
    transition: filter 0.2s;
}

/* --- 3. Scanline Overlay --- */
.lab-glitch-container::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    z-index: 2;
    pointer-events: none;
}

/* --- 4. Glitch Layers --- */
.lab-glitch-layers {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    background-image: var(--thumb-url);
    /* FIX: Ensure the glitch layer also matches the full stretched image */
    background-size: 100% 100%; 
    background-position: center;
    opacity: 0;
    mix-blend-mode: hard-light;
}

/* Trigger Glitch */
.lab-label:hover .lab-glitch-layers,
.lab-label.visible .lab-glitch-layers {
    opacity: 1;
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

.lab-label:hover .lab-glitch-img {
    filter: none;
    opacity: 1;
}

/* --- 5. Keyframe Animations --- */
@keyframes glitch-anim {
    0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
    20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, -1px); }
    40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 2px); }
    60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, 1px); }
    80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, -2px); }
    100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, 2px); }
}