/* --- BACKGROUND EFFECTS (Plexus & Texture) --- */
#bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    opacity: 0; /* Hidden by default */
    transition: opacity 1s;
    pointer-events: none;
}
.texture-overlay {
    position: fixed;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0; /* Hidden by default */
    z-index: -1;
    pointer-events: none;
    transition: opacity 1s;
}

/* CYBERPUNK OVERRIDES */
body.cyber-mode {
    --bg-color: #030303; /* Darker for canvas trails */
    --text-color: #a0c0d0;
    --accent-color: #00f3ff; /* Electric Cyan */
    --accent-secondary: #ff0055; /* Neon Pink */
    --card-bg: rgba(10, 20, 30, 0.8);
    --header-bg: rgba(5, 10, 16, 0.9);
    --font-main: 'Space Mono', monospace; /* Font update */
}

/* Show Effects in Cyber Mode */
body.cyber-mode #bg-canvas { opacity: 1; }
body.cyber-mode .texture-overlay { opacity: 0.20; }

body.cyber-mode .logo, 
body.cyber-mode .hero h1, 
body.cyber-mode h2, 
body.cyber-mode h3,
body.cyber-mode nav a,
body.cyber-mode .contact-btn {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px var(--accent-color);
}

body.cyber-mode .logo span { color: var(--accent-secondary); text-shadow: 0 0 5px var(--accent-secondary), 0 0 15px var(--accent-secondary); }

body.cyber-mode .hero { background: transparent; border: none; box-shadow: none; }
body.cyber-mode .hero h1 { color: var(--accent-color); }

/* Fix Icons in Cyber Mode - Global Override */
body.cyber-mode .fas,
body.cyber-mode .fa-solid {
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
}

body.cyber-mode .fab,
body.cyber-mode .fa-brands {
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
}

body.cyber-mode .far,
body.cyber-mode .fa-regular {
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
}

/* Common Icon Styles for Cyber Mode */
body.cyber-mode i {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: var(--accent-color);
    text-shadow: 0 0 8px var(--accent-color);
    -webkit-font-smoothing: antialiased;
    margin-right: 5px; /* Default spacing */
}

/* Fix for Custom HTML Icons (like Fiverr) in Cyber Mode */
body.cyber-mode .social-btn span {
    color: var(--accent-color) !important;
    text-shadow: 0 0 8px var(--accent-color);
}

/* Remove margin for icons that are alone or centered */
body.cyber-mode .social-btn i,
body.cyber-mode .hamburger-menu i {
    margin-right: 0;
}

body.cyber-mode .skill-tag { 
    border-radius: 0; 
    border: 1px solid var(--accent-color); 
    background: rgba(0, 243, 255, 0.1); 
    color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}

/* Angular Cards with Glow */
body.cyber-mode .card {
    border-radius: 0;
    border: 1px solid #333;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background: var(--card-bg);
}
body.cyber-mode .card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}
body.cyber-mode .card::before {
    content: "SYSTEM_LOCK";
    position: absolute;
    top: 5px; right: 5px;
    font-size: 10px;
    color: var(--accent-secondary);
    opacity: 0.7;
    text-shadow: 0 0 5px var(--accent-secondary);
}

/* Content Box Cyber Style */
body.cyber-mode .content-box {
    border-radius: 0;
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
    background: rgba(5, 10, 15, 0.7);
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%
    );
}

/* B2B Section */
body.cyber-mode .b2b { background: transparent; border: none; box-shadow: none; }
body.cyber-mode .service-item { border-left: 3px solid var(--accent-secondary); background: rgba(255, 255, 255, 0.02); }
body.cyber-mode .service-item:hover { background: rgba(255, 0, 85, 0.05); box-shadow: inset 0 0 20px rgba(255, 0, 85, 0.1); }

/* Buttons */
body.cyber-mode .contact-btn {
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 0;
    box-shadow: 0 0 10px var(--accent-color);
}
body.cyber-mode .contact-btn:hover {
    background: var(--accent-color);
    color: #000;
    text-shadow: none;
}

body.cyber-mode .funky-btn {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    text-shadow: 0 0 5px var(--accent-secondary);
    box-shadow: 0 0 10px var(--accent-secondary), inset 0 0 5px var(--accent-secondary);
}
body.cyber-mode .funky-btn:hover {
    background: var(--accent-secondary);
    color: #fff;
    text-shadow: none;
}

/* Cyber Mode overrides for Venture */
body.cyber-mode .venture-showcase {
    border-color: var(--accent-color);
    background: rgba(0, 243, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}

/* Cyber Mode overrides for Header */
body.cyber-mode header {
    background: rgba(5, 10, 16, 0.85);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15);
    border-radius: 16px; /* Ensure rounded corners stay even in cyber mode */
}

/* Cyber Mode overrides for Hero Box */
body.cyber-mode .hero-intro-box {
    border-color: var(--accent-color);
    background: rgba(0, 243, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}

/* Ensure Role Badges use Space Mono in Cyber Mode */
body.cyber-mode .role-badge {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--accent-color);
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 5px var(--accent-color);
    color: var(--accent-color);
}

/* Explicitly target icons inside role badges to ensure they don't inherit Space Mono */
body.cyber-mode .role-badge i {
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: var(--accent-color);
    text-shadow: 0 0 8px var(--accent-color);
}

/* Cyber Mode Form Overrides */
body.cyber-mode .form-input,
body.cyber-mode .form-textarea {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #333;
    border-radius: 0;
    font-family: 'Space Mono', monospace;
    color: var(--accent-color);
}

body.cyber-mode .form-input:focus,
body.cyber-mode .form-textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    background: rgba(0, 243, 255, 0.05);
}

body.cyber-mode .submit-btn {
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 0;
    box-shadow: 0 0 10px var(--accent-color);
    font-family: 'Space Mono', monospace;
    text-shadow: 0 0 5px var(--accent-color);
}

body.cyber-mode .submit-btn:hover {
    background: var(--accent-color);
    color: #000;
    text-shadow: none;
    box-shadow: 0 0 20px var(--accent-color);
}

/* Cyber Mode CTA Overrides */
body.cyber-mode .cta-btn.steam-btn {
    background: rgba(23, 26, 33, 0.8);
    border: 1px solid var(--accent-secondary);
    color: var(--accent-secondary);
    text-shadow: 0 0 5px var(--accent-secondary);
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
}

body.cyber-mode .cta-btn.steam-btn:hover {
    background: var(--accent-secondary);
    color: #fff;
    box-shadow: 0 0 20px var(--accent-secondary);
}

body.cyber-mode .cta-btn.outline-btn {
    border-color: var(--accent-color);
    color: var(--accent-color);
    text-shadow: 0 0 5px var(--accent-color);
    font-family: 'Space Mono', monospace;
}

body.cyber-mode .cta-btn.outline-btn:hover {
    background: var(--accent-color);
    color: #000;
    box-shadow: 0 0 20px var(--accent-color);
    text-shadow: none;
}