/* Advanced Glitch Effects for 1142 Labs */

/* ============================================
   ADVANCED GLITCH LOGO - RGB SPLITTING
   ============================================ */

.glitch-logo {
    position: relative;
    display: inline-block;
    animation: glitch-logo-main 2.5s infinite;
}

.glitch-logo::before,
.glitch-logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-size: cover;
    background-position: center;
}

.glitch-logo::before {
    animation: glitch-before 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 100%);
    background-image: inherit;
}

.glitch-logo::after {
    animation: glitch-after 0.3s infinite;
    clip-path: polygon(0 65%, 100% 0, 100% 100%, 0 100%);
    background-image: inherit;
}

/* Primary glitch animation - RGB channel separation */
@keyframes glitch-logo-main {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7)) brightness(1);
        transform: translate(0, 0) skew(0deg);
    }
    5% {
        filter: drop-shadow(-3px 0 0 #FF0080) drop-shadow(3px 0 0 #00FF00) brightness(1.1);
        transform: translate(-2px, 1px) skew(-0.5deg);
    }
    10% {
        filter: drop-shadow(3px 0 0 #0080FF) drop-shadow(-3px 0 0 #FFFF00) brightness(0.95);
        transform: translate(2px, -1px) skew(0.5deg);
    }
    15% {
        filter: drop-shadow(0 3px 0 #FF00FF) drop-shadow(0 -3px 0 #00FFFF) brightness(1.05);
        transform: translate(-1px, 2px) skew(-0.3deg);
    }
    20% {
        filter: drop-shadow(-2px -2px 0 #EC4899) drop-shadow(2px 2px 0 #00FFFF) brightness(1);
        transform: translate(1px, -2px) skew(0.3deg);
    }
    25% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8)) drop-shadow(2px 0 0 #6D28D9) brightness(1.15);
        transform: translate(0, 0) skew(0deg);
    }
    30% {
        filter: drop-shadow(-3px 0 0 #EC4899) drop-shadow(3px 0 0 #00FF88) brightness(0.9);
        transform: translate(-2px, -1px) skew(-0.5deg);
    }
    35% {
        filter: drop-shadow(3px 0 0 #FF6B00) drop-shadow(-3px 0 0 #00FFFF) brightness(1.1);
        transform: translate(2px, 1px) skew(0.5deg);
    }
    40% {
        filter: drop-shadow(0 -3px 0 #FF00FF) drop-shadow(0 3px 0 #00FF00) brightness(0.95);
        transform: translate(-1px, -2px) skew(-0.3deg);
    }
    45% {
        filter: drop-shadow(2px 2px 0 #00FFFF) drop-shadow(-2px -2px 0 #EC4899) brightness(1.05);
        transform: translate(1px, 2px) skew(0.3deg);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(109, 40, 217, 0.8)) brightness(1.2);
        transform: translate(0, 0) skew(0deg);
    }
    55% {
        filter: drop-shadow(-3px 0 0 #00FF00) drop-shadow(3px 0 0 #FF0080) brightness(0.9);
        transform: translate(-2px, 1px) skew(-0.5deg);
    }
    60% {
        filter: drop-shadow(3px 0 0 #00FFFF) drop-shadow(-3px 0 0 #FF6B00) brightness(1.1);
        transform: translate(2px, -1px) skew(0.5deg);
    }
    65% {
        filter: drop-shadow(0 3px 0 #00FF00) drop-shadow(0 -3px 0 #FF00FF) brightness(0.95);
        transform: translate(-1px, 2px) skew(-0.3deg);
    }
    70% {
        filter: drop-shadow(-2px -2px 0 #00FFFF) drop-shadow(2px 2px 0 #EC4899) brightness(1.05);
        transform: translate(1px, -2px) skew(0.3deg);
    }
    75% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.7)) brightness(1);
        transform: translate(0, 0) skew(0deg);
    }
    80% {
        filter: drop-shadow(-3px 0 0 #FF0080) drop-shadow(3px 0 0 #00FFFF) brightness(1.1);
        transform: translate(-2px, -1px) skew(-0.5deg);
    }
    85% {
        filter: drop-shadow(3px 0 0 #0080FF) drop-shadow(-3px 0 0 #FFFF00) brightness(0.95);
        transform: translate(2px, 1px) skew(0.5deg);
    }
    90% {
        filter: drop-shadow(0 -3px 0 #FF00FF) drop-shadow(0 3px 0 #00FFFF) brightness(1.05);
        transform: translate(-1px, -2px) skew(-0.3deg);
    }
    95% {
        filter: drop-shadow(-2px 2px 0 #EC4899) drop-shadow(2px -2px 0 #00FFFF) brightness(1.15);
        transform: translate(1px, 2px) skew(0.3deg);
    }
}

@keyframes glitch-before {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    20%, 24% {
        transform: translate(-2px, -2px);
        opacity: 0.8;
    }
    40%, 44% {
        transform: translate(2px, 2px);
        opacity: 0.8;
    }
    60%, 64% {
        transform: translate(-1px, 1px);
        opacity: 0.8;
    }
    80%, 84% {
        transform: translate(1px, -1px);
        opacity: 0.8;
    }
}

@keyframes glitch-after {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    15%, 19% {
        transform: translate(2px, 2px);
        opacity: 0.8;
    }
    35%, 39% {
        transform: translate(-2px, -2px);
        opacity: 0.8;
    }
    55%, 59% {
        transform: translate(1px, -1px);
        opacity: 0.8;
    }
    75%, 79% {
        transform: translate(-1px, 1px);
        opacity: 0.8;
    }
}

/* ============================================
   INTERACTIVE GLITCH NAV LINKS
   ============================================ */

.nav-link {
    position: relative;
    transition: all 0.2s ease;
}

.nav-link::before,
.nav-link::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-link::before {
    animation: glitch-text-before 0.3s infinite;
    color: #FF0080;
    z-index: -1;
}

.nav-link::after {
    animation: glitch-text-after 0.3s infinite;
    color: #00FF00;
    z-index: -2;
}

.nav-link:hover {
    color: #00FFFF;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.5);
}

.nav-link:hover::before,
.nav-link:hover::after {
    opacity: 0.7;
}

@keyframes glitch-text-before {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0, 0);
    }
    20% {
        clip-path: inset(0 0 65% 0);
        transform: translate(-2px, -2px);
    }
    40% {
        clip-path: inset(0 0 35% 0);
        transform: translate(2px, 2px);
    }
    60% {
        clip-path: inset(0 0 50% 0);
        transform: translate(-1px, 1px);
    }
    80% {
        clip-path: inset(0 0 20% 0);
        transform: translate(1px, -1px);
    }
}

@keyframes glitch-text-after {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0, 0);
    }
    20% {
        clip-path: inset(65% 0 0 0);
        transform: translate(2px, 2px);
    }
    40% {
        clip-path: inset(35% 0 0 0);
        transform: translate(-2px, -2px);
    }
    60% {
        clip-path: inset(50% 0 0 0);
        transform: translate(1px, -1px);
    }
    80% {
        clip-path: inset(20% 0 0 0);
        transform: translate(-1px, 1px);
    }
}

.nav-link.active {
    color: #00FFFF;
    border-bottom: 2px solid #00FFFF;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(109, 40, 217, 0.4);
}

.nav-link-secondary:hover {
    color: #00FFFF;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

/* ============================================
   GLITCH TITLE EFFECT
   ============================================ */

.glitch-title {
    position: relative;
    display: inline-block;
    animation: glitch-title-main 3s infinite;
}

.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.glitch-title::before {
    animation: glitch-title-before 0.3s infinite;
    color: #FF0080;
    z-index: -1;
}

.glitch-title::after {
    animation: glitch-title-after 0.3s infinite;
    color: #00FF00;
    z-index: -2;
}

@keyframes glitch-title-main {
    0%, 100% {
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(109, 40, 217, 0.7), 0 0 40px rgba(0, 255, 255, 0.5);
    }
}

@keyframes glitch-title-before {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0, 0);
    }
    20% {
        clip-path: inset(0 0 70% 0);
        transform: translate(-3px, -3px);
    }
    40% {
        clip-path: inset(0 0 30% 0);
        transform: translate(3px, 3px);
    }
    60% {
        clip-path: inset(0 0 50% 0);
        transform: translate(-2px, 2px);
    }
    80% {
        clip-path: inset(0 0 15% 0);
        transform: translate(2px, -2px);
    }
}

@keyframes glitch-title-after {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0, 0);
    }
    20% {
        clip-path: inset(70% 0 0 0);
        transform: translate(3px, 3px);
    }
    40% {
        clip-path: inset(30% 0 0 0);
        transform: translate(-3px, -3px);
    }
    60% {
        clip-path: inset(50% 0 0 0);
        transform: translate(2px, -2px);
    }
    80% {
        clip-path: inset(15% 0 0 0);
        transform: translate(-2px, 2px);
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .glitch-logo {
        animation: glitch-logo-main 2s infinite;
    }
    
    .glitch-title {
        animation: glitch-title-main 2.5s infinite;
    }
}