/* Terminal and Hacking Theme for Skills Page */

/* Base styles - keep monospace for page but exempt specific elements */
body.skills-page {
    background: #1a1a1a; /* Lighter background, matching experience page */
    color: #33ff33;
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    isolation: isolate;
}

/* Reset navbar and header fonts to match other pages */
.skills-page .navbar,
.skills-page .page-header {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.skills-page .navbar-brand,
.skills-page .nav-link,
.skills-page .page-header h1,
.skills-page .page-header p,
.skills-page .footer {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Terminal elements keep monospace styling */
.skills-page .terminal-container,
.skills-page .terminal-content,
.skills-page .command-line,
.skills-page .response,
.skills-page .category-btn,
.skills-page .skill-category,
.skills-page .skill-name,
.skills-page .skill-details {
    font-family: 'Courier New', monospace;
}

/* Page header text color adjustment to match other pages */
.skills-page .page-header h1,
.skills-page .page-header p {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Create colorful radial gradients like experience page */
body.skills-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at 0% 0%, rgba(74, 158, 255, 0.15), transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(159, 122, 234, 0.15), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(72, 187, 120, 0.15), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(237, 100, 166, 0.15), transparent 50%);
    background-color: #1a1a1a;
    z-index: -2;
    pointer-events: none;
    animation: gradientFlow 20s ease-in-out infinite alternate;
}

/* Enhanced digital rain overlay */
body.skills-page::after {
    content: "";
    position: fixed;
    inset: 0;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='200' viewBox='0 0 100 200'%3E%3Ctext x='10' y='25' font-family='monospace' font-size='12' fill='rgba(51, 255, 51, 0.3)'%3E01101%3C/text%3E%3Ctext x='30' y='50' font-family='monospace' font-size='18' fill='rgba(51, 255, 51, 0.25)'%3E10%3C/text%3E%3Ctext x='70' y='80' font-family='monospace' font-size='14' fill='rgba(51, 255, 51, 0.2)'%3E01%3C/text%3E%3Ctext x='50' y='110' font-family='monospace' font-size='20' fill='rgba(51, 255, 51, 0.3)'%3E101%3C/text%3E%3Ctext x='20' y='150' font-family='monospace' font-size='12' fill='rgba(51, 255, 51, 0.25)'%3E1001%3C/text%3E%3Ctext x='60' y='180' font-family='monospace' font-size='16' fill='rgba(51, 255, 51, 0.3)'%3E010%3C/text%3E%3C/svg%3E");
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    animation: matrixRain 30s linear infinite;
}

/* Add animated digital rain element */
.skills-page .content-wrap::before {
    content: "";
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    background: 
        repeating-linear-gradient(0deg, 
            rgba(0, 0, 0, 0), 
            rgba(0, 0, 0, 0) 15px, 
            rgba(51, 255, 51, 0.2) 15px, 
            rgba(51, 255, 51, 0.2) 16px
        ),
        repeating-linear-gradient(90deg, 
            rgba(0, 0, 0, 0), 
            rgba(0, 0, 0, 0) 25px, 
            rgba(51, 255, 51, 0.1) 25px, 
            rgba(51, 255, 51, 0.1) 26px
        );
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
    animation: matrixScan 20s linear infinite;
}

/* Remove distracting grid patterns and scanning lines */
body.skills-page::after {
    display: none; /* Remove the grid pattern overlay */
}

/* Remove the scanning line effect */
.skills-page::after,
.content-wrap::before {
    display: none;
}

/* Remove matrix scanning animation */
.skills-page .content-wrap::before {
    display: none;
}

/* Position the matrix rain properly as a backdrop element */
.matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Ensure it's behind all content */
    opacity: 0.8;
}

/* Reset the header to match the contact page's inherited styling */
.skills-page .page-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 50%, #3498db 100%);
    color: white;
    padding: 60px 0;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(74, 158, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1;
    /* Remove any custom backdrop filters */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Use the same header styling as contact page */
.skills-page .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 60%),
        linear-gradient(to right, rgba(74, 158, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(to bottom, rgba(74, 158, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px;
    animation: pulse 10s infinite;
    z-index: -1;
    opacity: 0.7;
}

/* Remove container/grid lines around matrix rain */
.matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Keep behind all content */
}

/* Remove any scanning lines or grid patterns */
.skills-page::after,
.content-wrap::before,
body.skills-page::after {
    display: none;
}

/* Clean up z-index structure */
.navbar {
    z-index: 1100 !important; /* Navbar always on top */
}

.page-container,
.content-wrap {
    /* Make these transparent */
    background: transparent;
    position: relative;
    z-index: 1; 
}

.terminal-container {
    /* Keep terminal above matrix rain */
    position: relative;
    z-index: 5;
}

/* Subtle header overlay animation */
.skills-page .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 60%),
        linear-gradient(to right, rgba(74, 158, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(to bottom, rgba(74, 158, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px;
    animation: pulse 10s infinite;
    z-index: -1;
    opacity: 0.7;
}

/* Remove the old header overlay that's no longer needed */
.skills-page .page-header::after {
    display: none;
}

/* Make sure text is properly styled like contact page */
.skills-page .page-header h1 {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.skills-page .page-header h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    border-radius: 3px;
}

/* Ensure container backgrounds are transparent */
.skills-page .page-container,
.skills-page .content-wrap {
    background: transparent;
}

/* Improve terminal container integration */
.terminal-container {
    max-width: 1200px;
    margin: 0px auto 30px; /* Reduced top margin from 60px to 30px */
    border: 1px solid #33ff33;
    border-radius: 8px;
    background-color: rgba(15, 20, 15, 0.9);
    box-shadow: 0 0 20px rgba(51, 255, 51, 0.3);
    position: relative;
    z-index: 5; /* Above matrix rain */
}

/* Footer integration */
.skills-page .footer {
    background-color: transparent !important;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(51, 255, 51, 0.2);
}

/* Unified scanning line effect across entire page */
.skills-page::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(51, 255, 51, 0.2);
    animation: scanning 8s linear 1 forwards; /* Run only once and keep final state */
    pointer-events: none;
    z-index: 1000;
}

/* Fix for ALL SKILLS button functionality */
.skills-page .skill-category {
    display: block;  /* Remove !important */
    visibility: visible;  /* Remove !important */
    opacity: 1;  /* Remove !important */
}

/* Remove all display: none rules for skill-category and terminal-content */
.skills-page .terminal-container .skill-category,
.skills-page .terminal-content,
.skill-category,
.terminal-line,
.skill-entry {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove category filtering for now to guarantee visibility */
body[data-filter] .skill-category {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure proper category filtering */
body[data-filter="all"] .skill-category {
    display: block;
    animation: fadeIn 0.5s ease;
}

body[data-filter]:not([data-filter="all"]) .skill-category {
    display: none;
}

body[data-filter="software"] .skill-category[data-category="software"],
body[data-filter="web"] .skill-category[data-category="web"],
body[data-filter="blockchain"] .skill-category[data-category="blockchain"],
body[data-filter="dataEngineering"] .skill-category[data-category="dataEngineering"],
body[data-filter="management"] .skill-category[data-category="management"],
body[data-filter="office"] .skill-category[data-category="office"],
body[data-filter="hardware"] .skill-category[data-category="hardware"],
body[data-filter="business"] .skill-category[data-category="business"],
body[data-filter="design"] .skill-category[data-category="design"],
body[data-filter="soft_skills"] .skill-category[data-category="soft_skills"] {
    display: block;
    animation: fadeIn 0.5s ease;
}

/* Main terminal container */
.terminal-container {
    max-width: 1200px;
    margin: 0px auto; /* Reduced top margin from 60px to 30px */
    border: 1px solid #33ff33;
    border-radius: 8px;
    background-color: rgba(0, 10, 0, 0.95);
    box-shadow: 0 0 20px rgba(51, 255, 51, 0.3);
    overflow: hidden;
    position: relative;
}

/* Terminal header styling */
.terminal-header {
    background-color: #111;
    padding: 10px 15px;
    border-bottom: 1px solid #33ff33;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terminal-title {
    color: #33ff33;
    font-weight: bold;
    font-size: 14px;
}

.terminal-controls {
    display: flex;
    gap: 8px;
}

.control {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.control.minimize {
    background-color: #ffbd2e;
}

.control.maximize {
    background-color: #28c941;
}

.control.close {
    background-color: #ff5f57;
}

/* Terminal content area */
.terminal-content {
    padding: 15px;
    height: auto;
    min-height: 70vh;
    overflow-y: auto;
    position: relative;
}

/* Command lines and responses */
.command-line {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: #33ff33;
    white-space: nowrap;
    overflow: hidden;
}

.prompt {
    color: #33ff33;
    font-weight: bold;
}

.command {
    color: #ffffff;
}

.response {
    color: #999;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    animation: typeWriter 1s steps(40, end);
}

.response.initializing {
    color: #ffbd2e;
    animation: pulse 1.5s infinite alternate;
}

.response.success {
    color: #28c941;
}

.response.error {
    color: #ff5f57;
}

/* Active command line with cursor */
.active-line {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.cursor {
    color: #33ff33;
    font-weight: bold;
    animation: blink 1s step-end infinite;
}

/* Category buttons */
.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0 20px 15px;
}

.category-btn {
    background-color: rgba(51, 255, 51, 0.1);
    color: #33ff33;
    border: 1px solid #33ff33;
    border-radius: 4px;
    padding: 5px 12px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background-color: rgba(51, 255, 51, 0.2);
    box-shadow: 0 0 10px rgba(51, 255, 51, 0.3);
}

.category-btn.active {
    background-color: rgba(51, 255, 51, 0.3);
    box-shadow: 0 0 15px rgba(51, 255, 51, 0.4);
}

/* Skills display */
.skills-display-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Skill category sections */
.skill-category {
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid rgba(51, 255, 51, 0.3);
    background-color: rgba(15, 25, 15, 0.6); /* Slightly lighter background */
    position: relative;
    animation: fadeIn 1s ease;
    display: block !important; /* Always show skill categories */
}

/* Ensure skill-category always shows up in terminal */
.skills-page .terminal-container .skill-category {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Optional: Add terminal-line style for skill entries */
.terminal-line {
    font-family: 'Courier New', monospace;
    color: #33ff33;
    background: transparent;
    border-left: 2px solid #33ff33;
    padding-left: 8px;
    margin-bottom: 8px;
    /* mimic terminal output */
}

/* Category headers */
.category-header {
    margin-bottom: 15px;
    border-bottom: 1px dashed #33ff33;
    padding-bottom: 10px;
}

.category-header h3 {
    font-size: 18px;
    color: #33ff33;
    margin: 0;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-header h3 i {
    font-size: 16px;
}

/* Individual skill entries */
.skill-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-entry {
    padding: 8px;
    border-radius: 3px;
    margin-bottom: 6px;
    background-color: rgba(0, 10, 0, 0.6);
    border-left: 3px solid #33ff33;
    animation: slideIn 0.5s ease;
    transition: all 0.3s ease;
}

.skill-entry:hover {
    background-color: rgba(0, 15, 0, 0.8);
    transform: translateX(5px);
}

/* Skill name with arrow */
.skill-name {
    font-weight: bold;
    color: #fff;
    position: relative;
    display: inline-block;
    font-size: 15px;
    margin-bottom: 8px;
}

.skill-name::before {
    content: '> ';
    color: #33ff33;
}

/* Skill description */
.skill-description {
    font-size: 0.85rem;
    color: rgba(51, 255, 51, 0.8);
    line-height: 1.4;
    margin: 0;
    padding-left: 15px;
}

/* Skill blocks for terminal categories */
.skill-block {
    /* Match section bar color */
    background: #111 !important;
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(52,152,219,0.10), 0 1px 4px rgba(0,0,0,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
}

/* Initial hidden state for creative reveal */
#skillsDisplayContainer {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(.77,0,.18,1);
    will-change: opacity;
}
#skillsDisplayContainer[style*="display: block"] {
    opacity: 1;
}

/* Skill block creative reveal effect */
.skill-block {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(.77,0,.18,1), transform 0.7s cubic-bezier(.77,0,.18,1);
    will-change: opacity, transform;
}
#skillsDisplayContainer[style*="display: block"] .skill-block {
    opacity: 1;
    transform: translateY(0);
}

/* Initial hidden state for creative reveal of tabs */
#skills-tabs {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(.77,0,.18,1);
    will-change: opacity;
}
#skills-tabs[style*="display: flex"] {
    opacity: 1;
}

/* Tabs bar: allow wrapping and responsive layout */
#skills-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 40px !important;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    row-gap: 16px;
}

/* Individual tab button spacing */
#skills-tabs .skills-tab {
    margin: 0;
    margin-bottom: 0;
    flex: 1 1 120px;
    max-width: 180px;
    min-width: 90px;
    box-sizing: border-box;
}

/* Responsive: tabs wrap into two lines on small screens */
@media (max-width: 900px) {
    #skills-tabs {
        gap: 10px 12px;
        row-gap: 10px;
        margin-bottom: 24px !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        padding-bottom: 6px;
    }
    #skills-tabs .skills-tab {
        font-size: 13px;
        padding: 6px 12px;
        min-width: 90px;
        flex: 1 1 45%;
        max-width: 48%;
        margin-bottom: 0;
    }
}

/* For very small screens, stack tabs vertically */
@media (max-width: 600px) {
    #skills-tabs {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px 0;
        row-gap: 8px;
        align-items: stretch;
    }
    #skills-tabs .skills-tab {
        min-width: unset;
        max-width: unset;
        width: 100%;
        flex: 1 1 100%;
        margin-bottom: 0;
    }
}

/* ...existing code... */