/* ============================================
   CSS VARIABLES & THEME CONFIGURATION
   ============================================ */
:root {
    --bg-color: rgba(26, 26, 26, 0.85);
    --header-bg: rgba(51, 51, 51, 0.9);
    --text-color: #00ff00;
    --prompt-color: #00ff00;
    --accent-color: #be9eff;
    --input-color: #fff;
    --font-family: 'Fira Code', monospace;
    --glow-color: rgba(190, 158, 255, 0.3);
}

/* ============================================
   GLOBAL RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   BODY & BACKGROUND (PIXEL THEME - DEFAULT)
   ============================================ */
body {
    background: radial-gradient(ellipse at top, #090a0f 0%, #000000 100%);
    color: var(--text-color);
    font-family: var(--font-family);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
    transition: background 0.8s ease;
    animation: bg-glitch 12s infinite;
}

@keyframes bg-glitch {
    0%, 93% { 
        background: radial-gradient(ellipse at top, #090a0f 0%, #000000 100%);
    }
    94% { 
        background: radial-gradient(ellipse at top, #0a090f 0%, #050005 100%);
    }
    95% { 
        background: radial-gradient(ellipse at top, #1a0a1f 0%, #000000 100%);
    }
    96% { 
        background: radial-gradient(ellipse at top, #0a1a1f 0%, #000500 100%);
    }
    97%, 100% { 
        background: radial-gradient(ellipse at top, #090a0f 0%, #000000 100%);
    }
}

/* Add scan lines effect for pixel theme */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 50%,
        rgba(190, 158, 255, 0.03) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
    animation: scan-lines 8s linear infinite;
}

@keyframes scan-lines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* Add screen noise effect for pixel theme */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 0, 0.02) 0px,
        transparent 1px,
        transparent 2px,
        rgba(255, 0, 255, 0.02) 3px
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
    animation: noise 0.2s infinite;
}

@keyframes noise {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.4; }
}

/* Intense glitch effect on scan lines and noise */
body.intense-glitch-active::before {
    background-size: 100% 2px !important;
    animation: intense-scan-lines 1s linear infinite !important;
    opacity: 1 !important;
}

body.intense-glitch-active::after {
    animation: intense-noise 0.1s infinite !important;
    opacity: 0.8 !important;
}

@keyframes intense-scan-lines {
    0% { 
        transform: translateY(0); 
        filter: hue-rotate(0deg);
    }
    25% { 
        transform: translateY(2px) scaleY(2); 
        filter: hue-rotate(90deg);
    }
    50% { 
        transform: translateY(0); 
        filter: hue-rotate(180deg);
    }
    75% { 
        transform: translateY(2px) scaleY(1.5); 
        filter: hue-rotate(270deg);
    }
    100% { 
        transform: translateY(0); 
        filter: hue-rotate(360deg);
    }
}

@keyframes intense-noise {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.9; }
}

/* ============================================
   ANIMATED STARS (Pixel Theme)
   ============================================ */
#stars, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    transition: all 0.5s ease;
    background: transparent;
}

/* Glitch pixels for pixel theme - Layer 1: Small squares */
#stars { 
    width: 16px; 
    height: 16px; 
    border-radius: 2px;
    animation: glitch-float-1 15s linear infinite;
    box-shadow: 147px 119px 0 2px rgba(255, 0, 255, 0.6), 
                1802px 426px 0 -3px rgba(0, 255, 255, 0.6), 
                466px 209px 0 5px rgba(255, 255, 0, 0.6), 
                1432px 341px 0 -2px rgba(190, 158, 255, 0.6), 
                1740px 819px 0 4px rgba(255, 0, 255, 0.5), 
                341px 259px 0 -4px rgba(0, 255, 255, 0.5), 
                179px 653px 0 6px rgba(255, 255, 0, 0.5), 
                1040px 656px 0 3px rgba(190, 158, 255, 0.5), 
                598px 97px 0 -5px rgba(255, 0, 255, 0.7), 
                1658px 979px 0 7px rgba(0, 255, 255, 0.7),
                921px 445px 0 8px rgba(255, 0, 255, 0.6),
                1234px 678px 0 -6px rgba(0, 255, 255, 0.5);
}

/* Layer 2: Large horizontal rectangles */
#stars2 { 
    width: 32px; 
    height: 12px; 
    animation: glitch-float-2 20s linear infinite;
    box-shadow: 124px 342px 0 4px rgba(190, 158, 255, 0.5), 
                892px 712px 0 -3px rgba(255, 0, 255, 0.5), 
                452px 912px 0 6px rgba(0, 255, 255, 0.6), 
                112px 112px 0 -5px rgba(255, 255, 0, 0.6), 
                1721px 342px 0 8px rgba(190, 158, 255, 0.7), 
                312px 612px 0 5px rgba(255, 0, 255, 0.6),
                1456px 234px 0 -4px rgba(0, 255, 255, 0.6),
                678px 789px 0 7px rgba(255, 255, 0, 0.5);
}

/* Layer 3: Large vertical rectangles and irregular shapes */
#stars3 { 
    width: 20px; 
    height: 28px; 
    animation: glitch-float-3 25s linear infinite;
    box-shadow: 892px 342px 0 6px rgba(0, 255, 255, 0.6), 
                112px 892px 0 -5px rgba(255, 255, 0, 0.5), 
                1621px 12px 0 9px rgba(190, 158, 255, 0.7), 
                412px 612px 0 -7px rgba(255, 0, 255, 0.6),
                1123px 456px 0 10px rgba(0, 255, 255, 0.5),
                789px 234px 0 -8px rgba(255, 0, 255, 0.6);
}

#stars::after, #stars2::after, #stars3::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: inherit;
    height: inherit;
    background: inherit;
    box-shadow: inherit;
}

/* Glitch float animations for pixel theme */
@keyframes glitch-float-1 {
    0% { transform: translateY(0px) translateX(0px); }
    10% { transform: translateY(-300px) translateX(20px); }
    20% { transform: translateY(-600px) translateX(-10px); }
    30% { transform: translateY(-900px) translateX(15px); }
    40% { transform: translateY(-1200px) translateX(-20px); }
    50% { transform: translateY(-1500px) translateX(0px); }
    60% { transform: translateY(-1800px) translateX(25px); }
    70% { transform: translateY(-2100px) translateX(-15px); }
    80% { transform: translateY(-2400px) translateX(10px); }
    90% { transform: translateY(-2700px) translateX(-25px); }
    100% { transform: translateY(-3000px) translateX(0px); }
}

@keyframes glitch-float-2 {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    15% { transform: translateY(-400px) translateX(-30px) rotate(90deg); }
    30% { transform: translateY(-800px) translateX(20px) rotate(180deg); }
    45% { transform: translateY(-1200px) translateX(-10px) rotate(270deg); }
    60% { transform: translateY(-1600px) translateX(30px) rotate(360deg); }
    75% { transform: translateY(-2000px) translateX(-20px) rotate(90deg); }
    90% { transform: translateY(-2400px) translateX(15px) rotate(180deg); }
    100% { transform: translateY(-2800px) translateX(0px) rotate(0deg); }
}

@keyframes glitch-float-3 {
    0% { transform: translateY(0px) scale(1); opacity: 0.6; }
    12% { transform: translateY(-350px) scale(1.2); opacity: 0.8; }
    25% { transform: translateY(-700px) scale(0.8); opacity: 0.5; }
    37% { transform: translateY(-1050px) scale(1.1); opacity: 0.7; }
    50% { transform: translateY(-1400px) scale(0.9); opacity: 0.6; }
    62% { transform: translateY(-1750px) scale(1.3); opacity: 0.8; }
    75% { transform: translateY(-2100px) scale(0.7); opacity: 0.5; }
    87% { transform: translateY(-2450px) scale(1); opacity: 0.7; }
    100% { transform: translateY(-2800px) scale(1); opacity: 0.6; }
}

/* Intense glitch effect on floating pixels */
body.intense-glitch-active #stars,
body.intense-glitch-active #stars2,
body.intense-glitch-active #stars3 {
    filter: hue-rotate(180deg) brightness(200%) saturate(300%);
    animation-duration: 2s !important;
}

#pixel-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(190, 158, 255, 0.15) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(190, 158, 255, 0.15) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.5s ease;
    animation: grid-flicker 8s infinite;
}

@keyframes grid-flicker {
    0%, 90% { opacity: 0.7; }
    91%, 93% { opacity: 0.4; }
    94%, 96% { opacity: 0.8; }
    97%, 100% { opacity: 0.7; }
}

/* Intense glitch effect on grid */
body.intense-glitch-active #pixel-grid {
    animation: intense-grid-glitch 20s linear !important;
    opacity: 1 !important;
}

@keyframes intense-grid-glitch {
    0%, 100% { 
        opacity: 1; 
        transform: translate(0, 0); 
        filter: hue-rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% { 
        opacity: 0.3; 
        transform: translate(5px, 5px); 
        filter: hue-rotate(180deg);
    }
    20%, 40%, 60%, 80% { 
        opacity: 1; 
        transform: translate(-5px, -5px); 
        filter: hue-rotate(360deg);
    }
}

/* ============================================
   CLASSIC THEME (Soft & Elegant)
   ============================================ */
body.classic-theme {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) !important;
    animation: none !important;
}

/* Disable glitch effects in classic theme */
body.classic-theme::before,
body.classic-theme::after {
    display: none;
}

body.classic-theme #pixel-grid {
    display: none;
}

body.classic-theme #stars,
body.classic-theme #stars2,
body.classic-theme #stars3 { 
    display: block;
    border-radius: 50%;
}

body.classic-theme #stars { 
    width: 2px; 
    height: 2px; 
    animation: animStar 50s linear infinite; 
    box-shadow: 147px 119px #FFF, 1802px 426px #FFF, 1813px 255px #FFF, 
                466px 209px #FFF, 1432px 341px #FFF, 1740px 819px #FFF, 
                341px 259px #FFF, 179px 653px #FFF, 1040px 656px #FFF, 
                598px 97px #FFF;
}

body.classic-theme #stars2 { 
    width: 3px; 
    height: 3px; 
    animation: animStar 100s linear infinite; 
    box-shadow: 124px 342px #FFF, 1542px 112px #FFF, 892px 712px #FFF, 
                452px 912px #FFF, 112px 112px #FFF, 1721px 342px #FFF, 
                312px 612px #FFF;
}

body.classic-theme #stars3 { 
    width: 4px; 
    height: 4px; 
    animation: animStar 150s linear infinite; 
    box-shadow: 892px 342px #FFF, 112px 892px #FFF, 1621px 12px #FFF, 
                412px 612px #FFF;
}

/* Simple star animation for classic theme */
@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

/* Disable glitch effect in classic theme for elegance */
body.classic-theme .glitch-text {
    animation: none;
    color: var(--accent-color);
}

body.classic-theme .glitch-text::before,
body.classic-theme .glitch-text::after {
    display: none;
}

/* ============================================
   BACKGROUND TOGGLE BUTTON
   ============================================ */
#bg-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 10px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

#bg-toggle:hover {
    transform: scale(1.1);
}

#star-icon {
    pointer-events: none;
}

/* ============================================
   TERMINAL INTERFACE CONTAINER
   ============================================ */
#terminal-interface {
    width: 90vw;
    max-width: 900px;
    height: 80vh;
    background-color: var(--bg-color);
    position: relative;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 0 30px var(--glow-color), 0 20px 50px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(190, 158, 255, 0.4);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--glow-color);
    z-index: 10;
    animation: terminal-glitch 15s infinite;
}

/* Glitch effect for terminal in pixel theme */
@keyframes terminal-glitch {
    0%, 95% { 
        transform: translate(0, 0); 
        box-shadow: 0 0 30px var(--glow-color), 0 20px 50px rgba(0, 0, 0, 0.7),
                    0 0 60px rgba(190, 158, 255, 0.4);
    }
    96% { 
        transform: translate(-2px, 1px); 
        box-shadow: -2px 0 10px rgba(255, 0, 255, 0.7), 2px 0 10px rgba(0, 255, 255, 0.7);
    }
    97% { 
        transform: translate(2px, -1px); 
        box-shadow: 2px 0 10px rgba(255, 0, 255, 0.7), -2px 0 10px rgba(0, 255, 255, 0.7);
    }
    98% { 
        transform: translate(-1px, -1px); 
    }
    99%, 100% { 
        transform: translate(0, 0); 
        box-shadow: 0 0 30px var(--glow-color), 0 20px 50px rgba(0, 0, 0, 0.7),
                    0 0 60px rgba(190, 158, 255, 0.4);
    }
}

/* Intense glitch effect triggered by glitch command */
#terminal-interface.intense-glitch {
    animation: intense-glitch-shake 20s linear !important;
}

#terminal-interface.intense-glitch #output,
#terminal-interface.intense-glitch .prompt,
#terminal-interface.intense-glitch #terminal-input {
    animation: intense-text-glitch 20s linear !important;
}

@keyframes intense-glitch-shake {
    0%, 100% { 
        transform: translate(0, 0); 
        filter: hue-rotate(0deg);
    }
    5% { 
        transform: translate(-10px, 5px) skewX(-5deg); 
        filter: hue-rotate(90deg) saturate(300%);
        box-shadow: -10px 0 20px rgba(255, 0, 255, 0.9), 10px 0 20px rgba(0, 255, 255, 0.9);
    }
    10% { 
        transform: translate(8px, -3px) skewX(5deg); 
        filter: hue-rotate(180deg) saturate(200%);
        box-shadow: 10px 0 20px rgba(255, 0, 255, 0.9), -10px 0 20px rgba(0, 255, 255, 0.9);
    }
    15% { 
        transform: translate(-5px, -8px) skewY(3deg); 
        filter: hue-rotate(270deg) saturate(400%);
    }
    20% { 
        transform: translate(12px, 6px) skewX(-3deg); 
        filter: hue-rotate(45deg) brightness(150%);
    }
    25% { 
        transform: translate(-15px, -2px) skewY(-5deg); 
        filter: hue-rotate(135deg) contrast(200%);
    }
    30% { 
        transform: translate(7px, -10px) skewX(8deg); 
        filter: hue-rotate(225deg) saturate(500%);
    }
    35% { 
        transform: translate(-3px, 4px) skewY(-2deg); 
        filter: hue-rotate(315deg) brightness(120%);
    }
    40% { 
        transform: translate(6px, -5px) skewX(-6deg); 
        filter: hue-rotate(60deg) contrast(150%);
    }
    45% { 
        transform: translate(-8px, 8px) skewY(4deg); 
        filter: hue-rotate(150deg) saturate(350%);
    }
    50% { 
        transform: translate(10px, -7px) skewX(6deg); 
        filter: hue-rotate(240deg) brightness(180%);
    }
    55% { 
        transform: translate(-12px, 3px) skewY(-4deg); 
        filter: hue-rotate(330deg) saturate(250%);
    }
    60% { 
        transform: translate(4px, -9px) skewX(-7deg); 
        filter: hue-rotate(75deg) contrast(180%);
    }
    65% { 
        transform: translate(-6px, 5px) skewY(5deg); 
        filter: hue-rotate(165deg) brightness(140%);
    }
    70% { 
        transform: translate(9px, -4px) skewX(4deg); 
        filter: hue-rotate(255deg) saturate(300%);
    }
    75% { 
        transform: translate(-7px, 7px) skewY(-3deg); 
        filter: hue-rotate(345deg) contrast(160%);
    }
    80% { 
        transform: translate(11px, -6px) skewX(-8deg); 
        filter: hue-rotate(90deg) brightness(170%);
    }
    85% { 
        transform: translate(-4px, 2px) skewY(6deg); 
        filter: hue-rotate(180deg) saturate(400%);
    }
    90% { 
        transform: translate(5px, -11px) skewX(3deg); 
        filter: hue-rotate(270deg) contrast(200%);
    }
    95% { 
        transform: translate(-9px, 4px) skewY(-7deg); 
        filter: hue-rotate(0deg) brightness(130%);
    }
}

@keyframes intense-text-glitch {
    0%, 100% { 
        text-shadow: 0 0 0 transparent;
    }
    5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 
    55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95% { 
        text-shadow: 
            5px 0 0 rgba(255, 0, 255, 0.9), 
            -5px 0 0 rgba(0, 255, 255, 0.9),
            0 5px 0 rgba(255, 255, 0, 0.9),
            0 -5px 0 rgba(0, 255, 0, 0.9);
    }
    7%, 17%, 27%, 37%, 47%, 57%, 67%, 77%, 87%, 97% {
        text-shadow: 
            -5px 0 0 rgba(0, 255, 255, 0.9), 
            5px 0 0 rgba(255, 0, 255, 0.9),
            0 -5px 0 rgba(255, 255, 0, 0.9),
            0 5px 0 rgba(0, 255, 0, 0.9);
    }
}

/* Disable glitch in classic theme */
body.classic-theme #terminal-interface {
    animation: none;
    box-shadow: 0 0 30px var(--glow-color), 0 20px 50px rgba(0, 0, 0, 0.7);
}

/* ============================================
   TERMINAL HEADER (MacOS Style)
   ============================================ */
#terminal-header {
    background-color: var(--header-bg);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.window-buttons {
    display: flex;
    gap: 8px;
}

.btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.close { background-color: #ff5f56; }
.minimize { background-color: #ffbd2e; }
.expand { background-color: #27c93f; }

.window-title {
    flex-grow: 1;
    text-align: center;
    font-size: 0.9rem;
    color: #aaa;
}

/* ============================================
   TERMINAL BODY & OUTPUT
   ============================================ */
#terminal-body {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

#terminal-body::-webkit-scrollbar {
    width: 6px;
}

#terminal-body::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 10px;
}

#output {
    white-space: pre-wrap;
    text-shadow: 0.5px 0 0 rgba(255, 0, 255, 0.3), 
                 -0.5px 0 0 rgba(0, 255, 255, 0.3);
    animation: text-glitch 10s infinite;
}

@keyframes text-glitch {
    0%, 94% { 
        text-shadow: 0.5px 0 0 rgba(255, 0, 255, 0.3), 
                     -0.5px 0 0 rgba(0, 255, 255, 0.3);
    }
    95% { 
        text-shadow: 2px 0 0 rgba(255, 0, 255, 0.8), 
                     -2px 0 0 rgba(0, 255, 255, 0.8);
    }
    96% { 
        text-shadow: -2px 0 0 rgba(255, 0, 255, 0.8), 
                     2px 0 0 rgba(0, 255, 255, 0.8);
    }
    97%, 100% { 
        text-shadow: 0.5px 0 0 rgba(255, 0, 255, 0.3), 
                     -0.5px 0 0 rgba(0, 255, 255, 0.3);
    }
}

/* Disable text chromatic aberration in classic theme */
body.classic-theme #output {
    text-shadow: none;
    animation: none;
}

pre {
    white-space: pre;
    word-break: normal;
    overflow: visible;
}

.line {
    margin-bottom: 8px;
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ============================================
   GLITCH TEXT ANIMATION (ASCII Logo)
   ============================================ */
.glitch-text {
    position: relative;
    color: var(--accent-color);
    animation: glitch-color 10s infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: "  __  __ _  ____            _____ __     __ _____ _______ ______ __  __  _____ \n |  \\/  | |/ /  _ \\         / ____|\\ \\   / / ____|__   __|  ____|  \\/  |/ ____|\n | \\  / | ' /| |_) |  ____ | (___   \\ \\_/ / (___    | |  | |__  | \\  / | (___  \n | |\\/| |  < |  _ <  |____| \\___ \\   \\   / \\___ \\   | |  |  __| | |\\/| |\\___ \\ \n | |  | | . \\| |_) |        ____) |   | |  ____) |  | |  | |____| |  | |____) |\n |_|  |_|_|\\_\\____/        |_____/    |_| |_____/   |_|  |______|_|  |_|_____/ ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.1s;
}

.glitch-text::before {
    animation: glitch-slab-1 20s infinite steps(1);
    color: #ff0000;
    mix-blend-mode: screen;
}

.glitch-text::after {
    animation: glitch-slab-2 20s infinite steps(1);
    color: #0000ff;
    mix-blend-mode: screen;
}

@keyframes glitch-color {
    0%, 90% { 
        color: var(--accent-color); 
        filter: hue-rotate(0deg); 
    }
    92% { 
        color: #00ff00; 
        filter: hue-rotate(90deg); 
    }
    94% { 
        color: #ff00ff; 
        filter: hue-rotate(180deg); 
    }
    96% { 
        color: #00ffff; 
        filter: hue-rotate(270deg); 
    }
    98%, 100% { 
        color: var(--accent-color); 
        filter: hue-rotate(360deg); 
    }
}

@keyframes glitch-slab-1 {
    0%, 90% { 
        opacity: 0; 
        clip-path: inset(0 0 0 0); 
        transform: translate(0); 
    }
    91% { 
        opacity: 1; 
        clip-path: inset(0 0 70% 0); 
        transform: translate(-10px); 
    }
    93% { 
        opacity: 1; 
        clip-path: inset(30% 0 40% 0); 
        transform: translate(10px); 
    }
    95% { 
        opacity: 1; 
        clip-path: inset(60% 0 10% 0); 
        transform: translate(-5px); 
    }
    97% { 
        opacity: 1; 
        clip-path: inset(10% 0 80% 0); 
        transform: translate(5px); 
    }
    99% { 
        opacity: 1; 
        clip-path: inset(40% 0 30% 0); 
        transform: translate(-15px); 
    }
    100% { 
        opacity: 0; 
        clip-path: inset(80% 0 0 0); 
        transform: translate(10px); 
    }
}

@keyframes glitch-slab-2 {
    0%, 90% { 
        opacity: 0; 
        clip-path: inset(0 0 0 0); 
        transform: translate(0); 
    }
    92% { 
        opacity: 1; 
        clip-path: inset(15% 0 65% 0); 
        transform: translate(10px); 
    }
    94% { 
        opacity: 1; 
        clip-path: inset(45% 0 35% 0); 
        transform: translate(-10px); 
    }
    96% { 
        opacity: 1; 
        clip-path: inset(75% 0 5% 0); 
        transform: translate(15px); 
    }
    98% { 
        opacity: 1; 
        clip-path: inset(5% 0 85% 0); 
        transform: translate(-15px); 
    }
    100% { 
        opacity: 0; 
        clip-path: inset(35% 0 45% 0); 
        transform: translate(10px); 
    }
}

/* ============================================
   TERMINAL INPUT LINE
   ============================================ */
.input-line {
    display: flex;
    align-items: center;
}

.prompt {
    color: var(--prompt-color);
    margin-right: 10px;
    white-space: nowrap;
    text-shadow: 0.5px 0 0 rgba(255, 0, 255, 0.4), 
                 -0.5px 0 0 rgba(0, 255, 255, 0.4);
}

/* Disable prompt chromatic aberration in classic theme */
body.classic-theme .prompt {
    text-shadow: none;
}

#terminal-input {
    background: transparent;
    border: none;
    color: var(--input-color);
    font-family: var(--font-family);
    font-size: 1rem;
    width: 100%;
    outline: none;
}

/* ============================================
   COMMAND OUTPUT CONTENT STYLING
   ============================================ */
.command-output {
    padding-left: 20px;
    border-left: 2px solid #333;
}

.category-title {
    color: var(--accent-color);
    font-weight: bold;
    display: block;
}

.skill-list, .project-list {
    list-style: none;
    margin: 5px 0;
}

.skill-list li::before, 
.project-list li::before {
    content: "• ";
    color: var(--accent-color);
}

/* ============================================
   HELP TIP & UTILITIES
   ============================================ */
#help-tip {
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    font-style: italic;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ============================================
   RESPONSIVE DESIGN (Mobile Optimization)
   ============================================ */
@media (max-width: 600px) {
    #terminal-interface {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    
    .glitch-text {
        font-size: 0.4rem;
    }
}