/* --- HORIZONTAL CSS GLITCH EFFECT --- */
.glitch-text {
    position: relative;
    display: inline-block;
    /* Clean gradient coloring matching the purple logo image */
    background: linear-gradient(135deg, #623675 0%, #3a1547 50%, #21042b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-dark); /* fallback */
    transition: transform 0.2s ease;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    pointer-events: none;
    white-space: nowrap;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    /* Reset gradient clip so solid colors show behind */
    -webkit-text-fill-color: initial;
    background: none;
    -webkit-background-clip: initial;
}

.glitch-text::before {
    color: var(--neon-pink);
    z-index: -1;
    animation: glitch-anim-1 3.5s infinite linear alternate-reverse;
}

.glitch-text::after {
    color: var(--neon-cyan);
    z-index: -2;
    animation: glitch-anim-2 2.8s infinite linear alternate-reverse;
}

/* Subtle, elegant micro-skew on hover */
.glitch-text:hover {
    animation: textMicroGlitch 0.2s steps(2) infinite;
}

@keyframes textMicroGlitch {
    0% { transform: skewX(1deg) translate(0.5px, 0); }
    50% { transform: skewX(-1deg) translate(-0.5px, 0); }
    100% { transform: skewX(0deg) translate(0, 0); }
}

/* Specific styling for white titles inside panels */
.panel .glitch-text {
    background: linear-gradient(135deg, #ffffff 0%, #e8d6f3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-light); /* fallback */
    text-shadow: none !important;
}

/* Glitch Keyframes 1 */
@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-1px, 0.3px);
    }
    10% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(1px, -0.3px);
    }
    20% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(-0.7px, 0.7px);
    }
    30% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(0.7px, -0.7px);
    }
    40% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-0.3px, 0.3px);
    }
    50% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(0.3px, -0.3px);
    }
    60% {
        clip-path: inset(55% 0 25% 0);
        transform: translate(-0.7px, 0.3px);
    }
    70% {
        clip-path: inset(15% 0 75% 0);
        transform: translate(1px, -0.3px);
    }
    80% {
        clip-path: inset(70% 0 15% 0);
        transform: translate(-0.3px, 0.7px);
    }
    90% {
        clip-path: inset(45% 0 35% 0);
        transform: translate(0.7px, -0.3px);
    }
    100% {
        clip-path: inset(25% 0 65% 0);
        transform: translate(0.3px, 0.3px);
    }
}

/* Glitch Keyframes 2 */
@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(10% 0 85% 0);
        transform: translate(1px, -0.3px);
    }
    10% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-1px, 0.3px);
    }
    20% {
        clip-path: inset(30% 0 60% 0);
        transform: translate(0.7px, -0.7px);
    }
    30% {
        clip-path: inset(70% 0 15% 0);
        transform: translate(-0.7px, 0.7px);
    }
    40% {
        clip-path: inset(5% 0 80% 0);
        transform: translate(0.3px, -0.3px);
    }
    50% {
        clip-path: inset(40% 0 45% 0);
        transform: translate(-0.3px, 0.3px);
    }
    60% {
        clip-path: inset(65% 0 15% 0);
        transform: translate(0.7px, -0.7px);
    }
    70% {
        clip-path: inset(25% 0 60% 0);
        transform: translate(-1px, 0.3px);
    }
    80% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(0.3px, -0.3px);
    }
    90% {
        clip-path: inset(15% 0 70% 0);
        transform: translate(-0.7px, 0.7px);
    }
    100% {
        clip-path: inset(35% 0 50% 0);
        transform: translate(0.3px, -0.3px);
    }
}

/* --- TRIGGERED GLITCH FLASH (Deactivated for clean scrolling) --- */
.screen-flash,
.digital-transition {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- CRT MONITOR SCANLINES --- */
.crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.12) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
    background-size: 100% 4px, 6px 100%;
    opacity: 0.85;
    transition: opacity var(--transition-normal);
}

.crt-overlay::before {
    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%);
    background-size: 100% 4px;
    z-index: 2;
    animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
    0% { opacity: 0.27; }
    50% { opacity: 0.22; }
    100% { opacity: 0.27; }
}

/* --- INTERACTIVE GLITCH FOR BUTTONS --- */
.btn-primary:hover, .btn-secondary:hover {
    animation: button-glitch 0.2s steps(2) 3;
}

@keyframes button-glitch {
    0% {
        text-shadow: 1px 0 0 var(--neon-cyan), -1px 0 0 var(--neon-pink);
        transform: translate(-3px, -3px) skewX(2deg);
    }
    50% {
        text-shadow: -2px 0 0 var(--neon-cyan), 2px 0 0 var(--neon-pink);
        transform: translate(-5px, -5px) skewX(-2deg);
    }
    100% {
        text-shadow: 0 0 0 transparent;
        transform: translate(-4px, -4px) skewX(0);
    }
}

/* --- PANEL SEAM GLITCH ON HOVER --- */
.panel.is-snapping::before {
    animation: seamGlitch 0.3s steps(2) infinite;
    opacity: 1;
}

@keyframes seamGlitch {
    0% {
        transform: translateX(0);
        filter: hue-rotate(90deg) invert(0);
    }
    50% {
        transform: translateX(15px) scaleY(1.5);
        filter: hue-rotate(180deg) invert(0.5);
    }
    100% {
        transform: translateX(-15px);
        filter: hue-rotate(0deg) invert(0);
    }
}