/* =================================================================
   👤 CYBERPUNK AVATAR & 🎴 CYBERPUNK CARDS  
   ================================================================= */

/* ============================================
   👤 CYBERPUNK AVATAR - Hero Image
   ============================================ */
.cyber-avatar-container {
    position: relative;
    isolation: isolate;
}

/* Tech rings with octagon shape */
.cyber-ring {
    position: absolute;
    pointer-events: none;
    clip-path: polygon(
        30% 0%, 70% 0%,
        100% 30%, 100% 70%,
        70% 100%, 30% 100%,
        0% 70%, 0% 30%
    );
}

.cyber-ring-outer {
    inset: 0;
    border: 2px solid transparent;
    background: 
        conic-gradient(
            from 0deg,
            #ef4444 0deg,
            transparent 45deg,
            transparent 135deg,
            #ef4444 180deg,
            transparent 225deg,
            transparent 315deg,
            #ef4444 360deg
        ) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: spin-segments 10s linear infinite;
    opacity: 0.5;
}

.cyber-ring-inner {
    inset: 1.5rem;
    border: 2px solid rgba(239, 68, 68, 0.3);
    animation: spin-segments-reverse 15s linear infinite reverse;
}

/* Main avatar frame with angled cuts */
.cyber-avatar-frame {
    position: absolute;
    inset: 2.5rem;
    overflow: hidden;
    background: #121212;
    clip-path: polygon(
        0 40px, 40px 40px, 40px 0,
        calc(100% - 40px) 0, calc(100% - 40px) 40px, 100% 40px,
        100% calc(100% - 40px), calc(100% - 40px) calc(100% - 40px),
        calc(100% - 40px) 100%, 40px 100%, 40px calc(100% - 40px),
        0 calc(100% - 40px)
    );
    box-shadow: 
        inset 0 0 0 2px #ef4444,
        inset 0 0 0 4px #000,
        inset 0 0 0 6px #dc2626,
        0 0 30px rgba(239, 68, 68, 0.4),
        0 0 60px rgba(239, 68, 68, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.8);
    transition: all 0.5s ease;
}

/* Avatar image with glitch preparation */
.cyber-avatar-image {
    position: relative;
    z-index: 1;
    transition: filter 0.5s ease, transform 0.7s ease;
}

.group:hover .cyber-avatar-image {
    filter: brightness(1.2);
}

/* Glitch effect layers */
.cyber-avatar-glitch {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}

.cyber-avatar-glitch-1 {
    animation: glitch-avatar-1 5s infinite;
}

.cyber-avatar-glitch-2 {
    animation: glitch-avatar-2 5s infinite;
    animation-delay: 0.3s;
}

/* Animated border scan - DISABLED */
.cyber-avatar-border-scan {
    display: none;
}

/* Scanline overlay for avatar */
.cyber-avatar-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        transparent 1px,
        transparent 3px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    opacity: 0.4;
    z-index: 3;
    animation: scanline-move 8s linear infinite;
}

/* Corner L-brackets (angular, not rounded) */
.cyber-avatar-bracket {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 3px solid #ef4444;
    opacity: 0.8;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 6;
}

.cyber-avatar-bracket-tl {
    top: -8px;
    left: -8px;
    border-right: none;
    border-bottom: none;
    box-shadow: -2px -2px 10px rgba(239, 68, 68, 0.4);
}

.cyber-avatar-bracket-tr {
    top: -8px;
    right: -8px;
    border-left: none;
    border-bottom: none;
    box-shadow: 2px -2px 10px rgba(239, 68, 68, 0.4);
}

.cyber-avatar-bracket-bl {
    bottom: -8px;
    left: -8px;
    border-right: none;
    border-top: none;
    box-shadow: -2px 2px 10px rgba(239, 68, 68, 0.4);
}

.cyber-avatar-bracket-br {
    bottom: -8px;
    right: -8px;
    border-left: none;
    border-top: none;
    box-shadow: 2px 2px 10px rgba(239, 68, 68, 0.4);
}

/* Corner notches (tech connectors) */
.cyber-avatar-notch {
    position: absolute;
    background: #ef4444;
    opacity: 0.7;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 7;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.cyber-avatar-notch-tl {
    top: 0;
    right: 0;
    width: 40px;
    height: 3px;
}

.cyber-avatar-notch-tr {
    top: 0;
    left: 0;
    width: 3px;
    height: 40px;
}

.cyber-avatar-notch-bl {
    bottom: 0;
    right: 0;
    width: 3px;
    height: 40px;
}

.cyber-avatar-notch-br {
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
}

/* Tech grid overlay */
.cyber-avatar-grid {
    position: absolute;
    inset: 2rem;
    pointer-events: none;
    opacity: 0.15;
    transition: opacity 0.4s ease;
    z-index: 4;
    clip-path: polygon(
        0 40px, 40px 40px, 40px 0,
        calc(100% - 40px) 0, calc(100% - 40px) 40px, 100% 40px,
        100% calc(100% - 40px), calc(100% - 40px) calc(100% - 40px),
        calc(100% - 40px) 100%, 40px 100%, 40px calc(100% - 40px),
        0 calc(100% - 40px)
    );
    background-image: 
        linear-gradient(to right, rgba(239, 68, 68, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(239, 68, 68, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: grid-pulse 4s ease-in-out infinite;
}

/* Mobile responsive for avatar */
@media (max-width: 768px) {
    .cyber-avatar-bracket {
        width: 35px;
        height: 35px;
        border-width: 2px;
    }
    
    .cyber-avatar-notch-tl,
    .cyber-avatar-notch-br {
        width: 30px;
    }
    
    .cyber-avatar-notch-tr,
    .cyber-avatar-notch-bl {
        height: 30px;
    }
    
    .cyber-ring-outer,
    .cyber-ring-inner {
        border-width: 1px;
    }
    
    .cyber-avatar-frame {
        clip-path: polygon(
            0 30px, 30px 30px, 30px 0,
            calc(100% - 30px) 0, calc(100% - 30px) 30px, 100% 30px,
            100% calc(100% - 30px), calc(100% - 30px) calc(100% - 30px),
            calc(100% - 30px) 100%, 30px 100%, 30px calc(100% - 30px),
            0 calc(100% - 30px)
        );
    }
    
    .cyber-avatar-grid {
        clip-path: polygon(
            0 30px, 30px 30px, 30px 0,
            calc(100% - 30px) 0, calc(100% - 30px) 30px, 100% 30px,
            100% calc(100% - 30px), calc(100% - 30px) calc(100% - 30px),
            calc(100% - 30px) 100%, 30px 100%, 30px calc(100% - 30px),
            0 calc(100% - 30px)
        );
        background-size: 15px 15px;
    }
}

/* ============================================
   🎴 CYBERPUNK CARDS
   ============================================ */
.cyber-card {
    position: relative;
    background: rgba(18, 18, 18, 0.9);
    border: 2px solid transparent;
    overflow: visible !important;
    isolation: isolate;
    clip-path: polygon(
        0 0, 
        calc(100% - 20px) 0, 
        100% 20px,
        100% 100%, 
        20px 100%, 
        0 calc(100% - 20px)
    );
    background-image: 
        linear-gradient(rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.95)),
        linear-gradient(135deg, 
            #ef4444 0%, 
            #dc2626 25%, 
            rgba(239, 68, 68, 0.3) 50%, 
            #dc2626 75%, 
            #ef4444 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyber-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    background-image: 
        linear-gradient(rgba(18, 18, 18, 0.95), rgba(18, 18, 18, 0.95)),
        linear-gradient(135deg, 
            #ff6b6b 0%, 
            #ef4444 25%, 
            rgba(255, 107, 107, 0.5) 50%, 
            #ef4444 75%, 
            #ff6b6b 100%
        );
    box-shadow: 
        0 0 30px rgba(239, 68, 68, 0.4),
        0 0 60px rgba(239, 68, 68, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.8);
}

/* Corner brackets decoration */
.cyber-card::before,
.cyber-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ef4444;
    opacity: 0.6;
    transition: all 0.4s ease;
    pointer-events: none;
}

.cyber-card::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
    box-shadow: -2px -2px 8px rgba(239, 68, 68, 0.3);
}

.cyber-card::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
    box-shadow: 2px 2px 8px rgba(239, 68, 68, 0.3);
}

.cyber-card:hover::before,
.cyber-card:hover::after {
    opacity: 1;
    border-color: #ff6b6b;
    box-shadow: 
        0 0 15px rgba(255, 107, 107, 0.6),
        0 0 30px rgba(239, 68, 68, 0.4);
}

.cyber-card:hover::before {
    top: 4px;
    left: 4px;
}

.cyber-card:hover::after {
    bottom: 4px;
    right: 4px;
}

/* Scanline overlay for cards */
.cyber-card-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        transparent 1px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 3px
    );
    pointer-events: none;
    opacity: 0.3;
    z-index: 1;
    clip-path: inherit;
}

/* Animated border scan effect */
.cyber-card-border-scan {
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(239, 68, 68, 0.8) 50%,
        transparent 100%
    );
    opacity: 0;
    animation: border-scan 3s linear infinite;
    pointer-events: none;
    clip-path: inherit;
}

.cyber-card:hover .cyber-card-border-scan {
    opacity: 1;
}

/* Tech corner notch (visual enhancement) */
.cyber-card-notch-tl,
.cyber-card-notch-br {
    position: absolute;
    background: #ef4444;
    opacity: 0.8;
    transition: all 0.4s ease;
    pointer-events: none;
}

.cyber-card-notch-tl {
    top: 0;
    right: 0;
    width: 20px;
    height: 2px;
    transform-origin: right;
}

.cyber-card-notch-br {
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
    transform-origin: left;
}

.cyber-card:hover .cyber-card-notch-tl,
.cyber-card:hover .cyber-card-notch-br {
    opacity: 1;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

/* Override rounded corners for all cyber-card types */
.cyber-card,
.project-card.cyber-card,
.testimonial-card.cyber-card,
.education-card.cyber-card,
.skill-card.cyber-card,
.service-card-cyber.cyber-card,
.contact-card.cyber-card,
.cv-card.cyber-card {
    border-radius: 0 !important;
}

/* Fix overflow for image containers inside project cards */
.project-card.cyber-card > div:first-child {
    overflow: hidden !important;
    clip-path: polygon(
        0 0, 
        calc(100% - 20px) 0, 
        100% 20px,
        100% 100%, 
        0 100%
    );
}

/* Fix overflow for image containers inside file cards */
.file-card.cyber-card > div:first-child {
    overflow: hidden !important;
    clip-path: polygon(
        0 0, 
        calc(100% - 20px) 0, 
        100% 20px,
        100% 100%, 
        0 100%
    );
}

/* Ensure content stays above overlays */
.cyber-card > *:not(.cyber-card-scanline):not(.cyber-card-border-scan):not(.cyber-card-notch-tl):not(.cyber-card-notch-br) {
    position: relative;
    z-index: 2;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .cyber-card {
        clip-path: polygon(
            0 0, 
            calc(100% - 15px) 0, 
            100% 15px,
            100% 100%, 
            15px 100%, 
            0 calc(100% - 15px)
        );
    }
    
    .cyber-card::before,
    .cyber-card::after {
        width: 15px;
        height: 15px;
    }
}