/* Cyberpunk Logo Effects */

/* Define cyberpunk color variables for the logo */
.logo {
    --cyber-logo-blue: #00f3ff;
    --cyber-logo-pink: #ff0070;
    --cyber-logo-purple: #a742bc;
    --cyber-logo-green: #00ff66;
}

/* Cyberpunk Glitch Effect for Logo */
.logo.cyberpunk-glitch {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.logo-text.cyberpunk {
    position: relative;
    background: linear-gradient(45deg, var(--cyber-logo-blue), var(--cyber-logo-pink), var(--cyber-logo-purple));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cyber-gradient-shift 4s ease infinite;
    /* Subtle glow for better readability */
    filter: drop-shadow(0 0 2px rgba(0, 243, 255, 0.3));
}

/* Logo dot cyberpunk effect */
.logo.cyberpunk-glitch span:last-child {
    color: var(--cyber-logo-green);
    filter: drop-shadow(0 0 3px rgba(0, 255, 102, 0.4));
    animation: cyber-dot-pulse 3s infinite ease-in-out;
}

/* Glitch effects on hover */
.logo.cyberpunk-glitch:hover .logo-text.cyberpunk {
    animation: cyber-logo-glitch 0.4s linear, cyber-gradient-shift 4s ease infinite;
    filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.5));
}

.logo.cyberpunk-glitch:hover span:last-child {
    animation: cyber-dot-glitch 0.6s linear, cyber-dot-pulse 3s infinite ease-in-out;
    filter: drop-shadow(0 0 6px rgba(0, 255, 102, 0.6));
}

/* Create glitch copies */
.logo-text.cyberpunk::before,
.logo-text.cyberpunk::after {
    content: 'AIvanCP';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.logo-text.cyberpunk::before {
    color: var(--cyber-logo-pink);
    animation: cyber-glitch-1 2s infinite linear;
    z-index: -1;
}

.logo-text.cyberpunk::after {
    color: var(--cyber-logo-blue);
    animation: cyber-glitch-2 2.5s infinite linear;
    z-index: -2;
}

/* Scan line effect */
.logo.cyberpunk-glitch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--cyber-logo-blue), 
        var(--cyber-logo-pink), 
        transparent);
    opacity: 0;
    animation: cyber-scan-line 4s infinite ease-in-out;
    z-index: 10;
}

/* Circuit lines around logo */
.logo.cyberpunk-glitch::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: linear-gradient(45deg, 
        var(--cyber-logo-blue), 
        var(--cyber-logo-pink), 
        var(--cyber-logo-purple), 
        var(--cyber-logo-green));
    background-size: 400% 400%;
    animation: cyber-border-flow 6s linear infinite;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: -3;
    opacity: 0.7;
}

/* Hover intensity effect */
.logo.cyberpunk-glitch:hover::before {
    animation: cyber-scan-line-intense 0.5s ease-in-out 3;
}

.logo.cyberpunk-glitch:hover::after {
    opacity: 1;
    animation: cyber-border-flow-intense 2s linear infinite;
}

/* Keyframe animations */
@keyframes cyber-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes cyber-dot-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(0, 255, 102, 0.4));
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 6px rgba(0, 255, 102, 0.6));
    }
}

@keyframes cyber-logo-glitch {
    0%, 100% { 
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    10% { 
        transform: translate(-2px, 1px);
        filter: hue-rotate(90deg);
    }
    20% { 
        transform: translate(2px, -1px);
        filter: hue-rotate(180deg);
    }
    30% { 
        transform: translate(-1px, -1px);
        filter: hue-rotate(270deg);
    }
    40% { 
        transform: translate(1px, 1px);
        filter: hue-rotate(0deg);
    }
    50% { 
        transform: translate(-1px, 1px);
        filter: hue-rotate(45deg);
    }
    60% { 
        transform: translate(1px, -1px);
        filter: hue-rotate(135deg);
    }
    70% { 
        transform: translate(0);
        filter: hue-rotate(225deg);
    }
    80% { 
        transform: translate(-1px, 0);
        filter: hue-rotate(315deg);
    }
    90% { 
        transform: translate(1px, 0);
        filter: hue-rotate(45deg);
    }
}

@keyframes cyber-dot-glitch {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        color: var(--cyber-logo-green);
    }
    25% { 
        transform: scale(1.5) rotate(90deg);
        color: var(--cyber-logo-blue);
    }
    50% { 
        transform: scale(0.8) rotate(180deg);
        color: var(--cyber-logo-pink);
    }
    75% { 
        transform: scale(1.2) rotate(270deg);
        color: var(--cyber-logo-purple);
    }
}

@keyframes cyber-glitch-1 {
    0%, 100% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
        opacity: 0;
    }
    10% { 
        clip-path: inset(10% 0 85% 0);
        transform: translate(-1px, 0.5px);
        opacity: 0.4;
    }
    20% { 
        clip-path: inset(80% 0 15% 0);
        transform: translate(1px, -0.5px);
        opacity: 0.3;
    }
    30% { 
        clip-path: inset(40% 0 50% 0);
        transform: translate(-0.5px, -0.5px);
        opacity: 0.35;
    }
    40% { 
        clip-path: inset(60% 0 25% 0);
        transform: translate(0.5px, 0.5px);
        opacity: 0.25;
    }
    50% { 
        clip-path: inset(20% 0 70% 0);
        transform: translate(-0.5px, 0.5px);
        opacity: 0.4;
    }
    60% { 
        clip-path: inset(70% 0 20% 0);
        transform: translate(0.5px, -0.5px);
        opacity: 0.3;
    }
    70% { 
        clip-path: inset(30% 0 60% 0);
        transform: translate(0, 0.5px);
        opacity: 0.7;
    }
    80% { 
        clip-path: inset(90% 0 5% 0);
        transform: translate(-1px, 0);
        opacity: 0.5;
    }
    90% { 
        clip-path: inset(5% 0 90% 0);
        transform: translate(1px, 0);
        opacity: 0.8;
    }
}

@keyframes cyber-glitch-2 {
    0%, 100% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
        opacity: 0;
    }
    15% { 
        clip-path: inset(20% 0 75% 0);
        transform: translate(2px, -1px);
        opacity: 0.7;
    }
    25% { 
        clip-path: inset(70% 0 25% 0);
        transform: translate(-2px, 1px);
        opacity: 0.5;
    }
    35% { 
        clip-path: inset(50% 0 40% 0);
        transform: translate(1px, 1px);
        opacity: 0.8;
    }
    45% { 
        clip-path: inset(30% 0 60% 0);
        transform: translate(-1px, -1px);
        opacity: 0.6;
    }
    55% { 
        clip-path: inset(80% 0 15% 0);
        transform: translate(2px, 0);
        opacity: 0.7;
    }
    65% { 
        clip-path: inset(10% 0 85% 0);
        transform: translate(-2px, 0);
        opacity: 0.5;
    }
    75% { 
        clip-path: inset(60% 0 30% 0);
        transform: translate(0, -1px);
        opacity: 0.8;
    }
    85% { 
        clip-path: inset(40% 0 50% 0);
        transform: translate(0, 1px);
        opacity: 0.6;
    }
    95% { 
        clip-path: inset(90% 0 5% 0);
        transform: translate(1px, 0);
        opacity: 0.7;
    }
}

@keyframes cyber-scan-line {
    0%, 100% { 
        top: 0;
        opacity: 0;
        width: 0%;
    }
    50% { 
        top: 50%;
        opacity: 1;
        width: 100%;
    }
}

@keyframes cyber-scan-line-intense {
    0% { 
        top: 0;
        opacity: 0;
        height: 2px;
    }
    25% { 
        top: 25%;
        opacity: 1;
        height: 3px;
    }
    50% { 
        top: 50%;
        opacity: 1;
        height: 4px;
    }
    75% { 
        top: 75%;
        opacity: 1;
        height: 3px;
    }
    100% { 
        top: 100%;
        opacity: 0;
        height: 2px;
    }
}

@keyframes cyber-border-flow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

@keyframes cyber-border-flow-intense {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* Random glitch trigger animation */
.logo.cyberpunk-glitch {
    animation: random-glitch-trigger 15s infinite;
}

@keyframes random-glitch-trigger {
    0%, 90%, 100% { 
        /* Normal state - no extra effects */
    }
    91%, 92% { 
        filter: brightness(1.1);
        transform: translate(0.5px, 0);
    }
    93%, 94% { 
        filter: brightness(0.9);
        transform: translate(-0.5px, 0);
    }
    95%, 96% { 
        filter: brightness(1.05);
        transform: translate(0, 0);
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .logo-text.cyberpunk {
    filter: drop-shadow(0 0 3px rgba(0, 243, 255, 0.4));
}

[data-theme="dark"] .logo.cyberpunk-glitch span:last-child {
    filter: drop-shadow(0 0 4px rgba(0, 255, 102, 0.5));
}

[data-theme="dark"] .logo.cyberpunk-glitch span:last-child {
    text-shadow: 
        0 0 8px var(--cyber-logo-green),
        0 0 16px var(--cyber-logo-green),
        0 0 24px var(--cyber-logo-green);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .logo-text.cyberpunk::before,
    .logo-text.cyberpunk::after {
        animation-duration: 3s; /* Slower animation on mobile */
    }
    
    .logo.cyberpunk-glitch:hover .logo-text.cyberpunk {
        animation-duration: 1s; /* Faster hover animation on mobile */
    }
}

/* Accessibility - Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo.cyberpunk-glitch,
    .logo-text.cyberpunk,
    .logo.cyberpunk-glitch span:last-child,
    .logo-text.cyberpunk::before,
    .logo-text.cyberpunk::after,
    .logo.cyberpunk-glitch::before,
    .logo.cyberpunk-glitch::after {
        animation: none !important;
    }
    
    .logo-text.cyberpunk {
        background: var(--cyber-logo-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .logo.cyberpunk-glitch span:last-child {
        color: var(--cyber-logo-green);
    }
}