/* Terminal Font Imports */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* Terminal Font CSS Variables */
:root {
    --terminal-font: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', monospace;
    --terminal-font-size: 14px;
    --terminal-font-weight-normal: 400;
    --terminal-font-weight-bold: 600;
    --terminal-line-height: 1.4;
}

/* Global Terminal Font Styles */
body {
    font-family: var(--terminal-font);
    font-size: var(--terminal-font-size);
    line-height: var(--terminal-line-height);
    font-weight: var(--terminal-font-weight-normal);
}

/* Terminal Font Utility Classes */
.terminal-font {
    font-family: var(--terminal-font) !important;
    font-size: var(--terminal-font-size);
    line-height: var(--terminal-line-height);
    font-weight: var(--terminal-font-weight-normal);
}

.terminal-font-bold {
    font-family: var(--terminal-font) !important;
    font-weight: var(--terminal-font-weight-bold);
}

.terminal-font-small {
    font-family: var(--terminal-font) !important;
    font-size: 12px;
}

.terminal-font-large {
    font-family: var(--terminal-font) !important;
    font-size: 16px;
}

/* Apply terminal font to code elements */
pre, code, kbd, samp {
    font-family: var(--terminal-font) !important;
    font-size: var(--terminal-font-size);
    line-height: var(--terminal-line-height);
}

/* Override Tailwind's font-mono with our terminal font */
.font-mono {
    font-family: var(--terminal-font) !important;
}

   .custom-border {
        box-shadow: 
            rgb(51, 51, 51) 0px 0px 0px 15px, 
            rgb(68, 68, 68) 0px 0px 0px 20px, 
            rgb(33, 33, 33) 0px 0px 0px 21px, 
            rgba(0, 0, 0, 0.5) 0px 0px 32px 10px inset, 
            rgba(0, 255, 0, 0.27) 0px 0px 20px 0px, 
            rgb(0, 0, 0) 0px 0px 0px 70px;
    }

  
  .framer{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url('img/bg.png');
    background-repeat: repeat;         
    background-position: left top;
    background-size: auto;            
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}
.yellow-overlay{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: rgba(0, 0, 0, 0.082);  
    mix-blend-mode: overlay;  
    pointer-events: none;
    z-index: 1;
}

/* ===================== GLITCH VERTICAL SCAN LINE ===================== */
.glitch-scan-line {
    position: absolute;
    top: -12%; /* pornește puțin deasupra pentru a acoperi TOT la final */
    left: 0;
    width: 100%;
    height: 6%; /* linie mai subtire (bandă) */
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.05) 55%, rgba(255,255,255,0) 90%),
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.28) 0 2px, rgba(255,255,255,0.05) 2px 4px);
    backdrop-filter: blur(.4px) brightness(1.45) contrast(1.25);
    animation: glitch-scan-move 5.2s linear infinite;
    opacity: 0.28;
    z-index: 2; /* peste overlay-uri */
}
.glitch-scan-line::before,
.glitch-scan-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,0,0,0.25), rgba(255,0,0,0) 60%);
    mix-blend-mode: screen;
    filter: blur(0.6px) contrast(1.4);
    animation: glitch-scan-rgb 0.18s steps(2, end) infinite;
    opacity: 0.55;
}
.glitch-scan-line::after {
    background: linear-gradient(to bottom, rgba(0,255,255,0.35), rgba(0,255,255,0) 65%);
    mix-blend-mode: lighten;
    animation-duration: 0.22s;
    opacity: 0.45;
}

/* Nou: animăm proprietatea top ca să nu se ciocnească cu transform-ul din jitter */
@keyframes glitch-scan-move {
    0%   { top: -12%; opacity: 0; }
    3%   {            opacity: .42; }
    10%  {            opacity: .34; }
    80%  {            opacity: .34; }
    90%  {            opacity: .30; }
    96%  {            opacity: .18; }
    100% { top: 100%; opacity: 0; }
}

@keyframes glitch-scan-rgb {
    0% { transform: translateX(0); filter: hue-rotate(0deg) brightness(1.2); }
    50% { transform: translateX(-1px); filter: hue-rotate(20deg) brightness(1.3); }
    100% { transform: translateX(1px); filter: hue-rotate(-10deg) brightness(1.1); }
}

/* Random pulse / jitter while scanning (applied via JS toggling class) */
.glitch-scan-line.jitter {
    /* păstrăm aceeași durată de scan + jitter doar orizontal */
    animation: glitch-scan-move 5.2s linear infinite, glitch-scan-jitter 0.45s steps(3, end) infinite;
}
@keyframes glitch-scan-jitter {
    0% { transform: translateX(0); }
    33% { transform: translateX(-0.7px); }
    66% { transform: translateX(0.7px); }
    100% { transform: translateX(0); }
}

/* OPTIONAL: multiple passes faster on narrow screens */
@media (max-width: 900px) {
    .glitch-scan-line { animation-duration: 4.5s; height: 18%; }
}
@media (max-width: 640px) {
    .glitch-scan-line { animation-duration: 3.8s; height: 20%; }
}

/* ===================== END GLITCH VERTICAL SCAN LINE ===================== */

/* Custom TV-style Scrollbar */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(90deg, 
        rgb(33, 33, 33) 0%, 
        rgb(51, 51, 51) 50%, 
        rgb(33, 33, 33) 100%);
    border: 2px solid rgb(68, 68, 68);
    border-radius: 8px;
    box-shadow: 
        inset 0px 0px 8px rgba(0, 0, 0, 0.5),
        0px 0px 4px rgba(0, 255, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, 
        rgb(68, 68, 68) 0%, 
        rgb(85, 85, 85) 50%, 
        rgb(68, 68, 68) 100%);
    border: 1px solid rgb(0, 255, 0);
    border-radius: 6px;
    box-shadow: 
        inset 0px 0px 4px rgba(0, 255, 0, 0.3),
        0px 0px 6px rgba(0, 255, 0, 0.15),
        inset 0px 1px 0px rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, 
        rgb(85, 85, 85) 0%, 
        rgb(102, 102, 102) 50%, 
        rgb(85, 85, 85) 100%);
    border-color: rgba(0, 255, 0, 0.8);
    box-shadow: 
        inset 0px 0px 6px rgba(0, 255, 0, 0.4),
        0px 0px 8px rgba(0, 255, 0, 0.25),
        inset 0px 1px 0px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, 
        rgb(102, 102, 102) 0%, 
        rgb(119, 119, 119) 50%, 
        rgb(102, 102, 102) 100%);
    border-color: rgb(0, 255, 0);
    box-shadow: 
        inset 0px 0px 8px rgba(0, 255, 0, 0.5),
        0px 0px 10px rgba(0, 255, 0, 0.3);
}

::-webkit-scrollbar-corner {
    background: rgb(33, 33, 33);
    border: 2px solid rgb(68, 68, 68);
    border-radius: 4px;
}

/* TV-style scrollbar buttons (arrows) */
::-webkit-scrollbar-button {
    background: linear-gradient(135deg, 
        rgb(68, 68, 68) 0%, 
        rgb(85, 85, 85) 100%);
    border: 1px solid rgb(51, 51, 51);
    border-radius: 3px;
    height: 16px;
    width: 16px;
    box-shadow: 
        inset 0px 0px 2px rgba(0, 255, 0, 0.2),
        0px 0px 3px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-button:hover {
    background: linear-gradient(135deg, 
        rgb(85, 85, 85) 0%, 
        rgb(102, 102, 102) 100%);
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 
        inset 0px 0px 3px rgba(0, 255, 0, 0.3),
        0px 0px 4px rgba(0, 255, 0, 0.2);
}

/* Scrollbar for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(68, 68, 68) rgb(33, 33, 33);
}

/* Marquee Animation */
.marquee-container {
    position: relative;
    
}

.marquee-text {
    display: inline-block;
    animation: marquee 60s linear infinite;
    padding-right: 100%;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}





 .glitch-image {
        animation: glitch-main 3s infinite linear;
        filter: contrast(1.1) brightness(1.1);
    }

    .glitch-layer-red {
        mix-blend-mode: screen;
        filter: contrast(1.2) brightness(0.9) hue-rotate(0deg);
        animation: glitch-red 0.16s infinite steps(2, end);
    }

    .glitch-layer-green {
        mix-blend-mode: screen;
        filter: contrast(1.2) brightness(0.9) hue-rotate(120deg);
        animation: glitch-green 0.2s infinite steps(3, end);
    }

    .glitch-layer-blue {
        mix-blend-mode: screen;
        filter: contrast(1.2) brightness(0.9) hue-rotate(240deg);
        animation: glitch-blue 0.13s infinite steps(2, end);
    }

    .noise-overlay {
        background: 
            radial-gradient(circle at 20% 80%, transparent 20%, rgba(120,119,198,0.3) 21%, rgba(120,119,198,0.3) 29%, transparent 30%, transparent),
            linear-gradient(rgba(29,3,25,0.13) 50%, transparent 50%),
            linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)),
            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
        animation: noise 0.08s infinite steps(8, end);
        mix-blend-mode: overlay;
    }

    .rgb-glitch-overlay {
        background: 
            radial-gradient(circle at 15% 25%, rgba(255,0,0,0.8) 1px, transparent 2px),
            radial-gradient(circle at 85% 75%, rgba(0,255,0,0.6) 1.5px, transparent 2.5px),
            radial-gradient(circle at 45% 60%, rgba(0,0,255,0.7) 1px, transparent 2px),
            radial-gradient(circle at 70% 30%, rgba(255,255,0,0.5) 1.5px, transparent 2.5px),
            radial-gradient(circle at 25% 80%, rgba(255,0,255,0.6) 1px, transparent 2px),
            radial-gradient(circle at 90% 45%, rgba(0,255,255,0.7) 1.5px, transparent 2.5px),
            radial-gradient(circle at 35% 15%, rgba(255,128,0,0.6) 1px, transparent 2px);
        animation: rgb-glitch 0.12s infinite steps(6, end);
        mix-blend-mode: screen;
        opacity: 0.4;
    }

    @keyframes glitch-main {
        0%, 85% { transform: translate(0) scale(1) skew(0deg); }
        86% { transform: translate(-0.3px, 0.2px) scale(1.005, 0.995) skew(0.1deg); }
        87% { transform: translate(0.3px, -0.2px) scale(0.995, 1.008) skew(-0.08deg); }
        88% { transform: translate(-0.2px, 0.3px) scale(1.003, 0.997) skew(0.15deg); }
        89% { transform: translate(0.2px, -0.25px) scale(0.997, 1.006) skew(-0.12deg); }
        90% { transform: translate(-0.35px, 0.1px) scale(1.007, 0.993) skew(0.2deg); }
        91% { transform: translate(0.4px, 0.2px) scale(0.993, 1.01) skew(-0.18deg); }
        92% { transform: translate(-0.25px, -0.3px) scale(1.004, 0.996) skew(0.08deg); }
        93% { transform: translate(0.1px, 0.35px) scale(0.996, 1.007) skew(-0.14deg); }
        94% { transform: translate(-0.2px, -0.15px) scale(1.002, 0.998) skew(0.05deg); }
        95% { transform: translate(0.25px, 0.2px) scale(0.998, 1.004) skew(-0.1deg); }
        96%, 100% { transform: translate(0) scale(1) skew(0deg); }
    }

    @keyframes glitch-red {
        0%, 5% { transform: translate(0, 0) scale(1) skew(0deg); opacity: 0.8; }
        10% { transform: translate(-0.4px, 0.15px) scale(1.004, 0.996) skew(0.2deg); opacity: 0.6; }
        15% { transform: translate(0.35px, -0.1px) scale(0.996, 1.006) skew(-0.15deg); opacity: 0.7; }
        20% { transform: translate(-0.25px, 0.25px) scale(1.002, 0.998) skew(0.1deg); opacity: 0.5; }
        25% { transform: translate(0.2px, -0.3px) scale(0.998, 1.008) skew(-0.12deg); opacity: 0.8; }
        30% { transform: translate(-0.3px, 0.12px) scale(1.006, 0.994) skew(0.18deg); opacity: 0.4; }
        35% { transform: translate(0.38px, 0.2px) scale(0.994, 1.01) skew(-0.08deg); opacity: 0.7; }
        40% { transform: translate(-0.12px, -0.27px) scale(1.004, 0.996) skew(0.14deg); opacity: 0.6; }
        45% { transform: translate(0.27px, 0.33px) scale(0.996, 1.006) skew(-0.06deg); opacity: 0.5; }
        50% { transform: translate(-0.33px, -0.06px) scale(1.002, 0.998) skew(0.04deg); opacity: 0.7; }
        55% { transform: translate(0.21px, 0.15px) scale(0.998, 1.004) skew(-0.16deg); opacity: 0.6; }
        60%, 100% { transform: translate(0, 0) scale(1) skew(0deg); opacity: 0.0; }
    }

    @keyframes glitch-green {
        0%, 10% { transform: translate(0, 0) scale(1) skew(0deg); opacity: 0.0; }
        15% { transform: translate(0.24px, -0.18px) scale(1.002, 0.998) skew(0.12deg); opacity: 0.5; }
        20% { transform: translate(-0.3px, 0.27px) scale(0.996, 1.006) skew(-0.18deg); opacity: 0.6; }
        25% { transform: translate(0.15px, -0.36px) scale(1.004, 0.994) skew(0.08deg); opacity: 0.4; }
        30% { transform: translate(-0.39px, 0.09px) scale(0.998, 1.008) skew(-0.14deg); opacity: 0.7; }
        35% { transform: translate(0.33px, 0.24px) scale(1.006, 0.994) skew(0.16deg); opacity: 0.5; }
        40% { transform: translate(-0.21px, -0.12px) scale(0.994, 1.01) skew(-0.1deg); opacity: 0.6; }
        45% { transform: translate(0.12px, 0.3px) scale(1.002, 0.998) skew(0.06deg); opacity: 0.7; }
        50%, 100% { transform: translate(0, 0) scale(1) skew(0deg); opacity: 0.0; }
    }

    @keyframes glitch-blue {
        0%, 15% { transform: translate(0, 0) scale(1) skew(0deg); opacity: 0.0; }
        20% { transform: translate(-0.27px, 0.21px) scale(1.004, 0.996) skew(0.14deg); opacity: 0.4; }
        25% { transform: translate(0.36px, -0.3px) scale(0.996, 1.006) skew(-0.16deg); opacity: 0.7; }
        30% { transform: translate(-0.18px, 0.33px) scale(1.002, 0.998) skew(0.1deg); opacity: 0.5; }
        35% { transform: translate(0.42px, -0.09px) scale(0.998, 1.008) skew(-0.12deg); opacity: 0.6; }
        40% { transform: translate(-0.33px, 0.18px) scale(1.006, 0.994) skew(0.18deg); opacity: 0.4; }
        45% { transform: translate(0.24px, -0.24px) scale(0.994, 1.01) skew(-0.08deg); opacity: 0.7; }
        50% { transform: translate(-0.09px, 0.39px) scale(1.004, 0.996) skew(0.06deg); opacity: 0.5; }
        55% { transform: translate(0.18px, -0.15px) scale(0.996, 1.006) skew(-0.14deg); opacity: 0.6; }
        60% { transform: translate(-0.24px, 0.12px) scale(1.002, 0.998) skew(0.04deg); opacity: 0.6; }
        65%, 100% { transform: translate(0, 0) scale(1) skew(0deg); opacity: 0.0; }
    }

    @keyframes noise {
        0% { opacity: 0.05; transform: translateX(0px) scale(1); }
        12.5% { opacity: 0.08; transform: translateX(-0.2px) scale(1.002, 0.998); }
        25% { opacity: 0.06; transform: translateX(0.2px) scale(0.998, 1.002); }
        37.5% { opacity: 0.1; transform: translateX(0px) scale(1.004, 0.996); }
        50% { opacity: 0.04; transform: translateX(-0.2px) scale(0.996, 1.004); }
        62.5% { opacity: 0.12; transform: translateX(0.2px) scale(1.002, 0.998); }
        75% { opacity: 0.07; transform: translateX(0px) scale(0.998, 1.002); }
        87.5% { opacity: 0.09; transform: translateX(-0.2px) scale(1.002, 0.998); }
        100% { opacity: 0.05; transform: translateX(0px) scale(1); }
    }

    @keyframes rgb-glitch {
        0% { 
            background: 
                radial-gradient(circle at 15% 25%, rgba(255,0,0,0.8) 1px, transparent 2px),
                radial-gradient(circle at 85% 75%, rgba(0,255,0,0.6) 1.5px, transparent 2.5px),
                radial-gradient(circle at 45% 60%, rgba(0,0,255,0.7) 1px, transparent 2px);
            opacity: 0.6;
        }
        16.6% { 
            background: 
                radial-gradient(circle at 70% 30%, rgba(255,255,0,0.9) 1.5px, transparent 2.5px),
                radial-gradient(circle at 25% 80%, rgba(255,0,255,0.7) 1px, transparent 2px),
                radial-gradient(circle at 90% 10%, rgba(0,255,255,0.8) 1px, transparent 2px);
            opacity: 0.4;
        }
        33.3% { 
            background: 
                radial-gradient(circle at 35% 15%, rgba(255,128,0,0.6) 1px, transparent 2px),
                radial-gradient(circle at 80% 85%, rgba(128,255,0,0.8) 1.5px, transparent 2.5px),
                radial-gradient(circle at 10% 50%, rgba(255,0,128,0.7) 1px, transparent 2px);
            opacity: 0.7;
        }
        50% { 
            background: 
                radial-gradient(circle at 55% 70%, rgba(0,128,255,0.9) 1.5px, transparent 2.5px),
                radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5) 1px, transparent 2px),
                radial-gradient(circle at 90% 60%, rgba(128,0,255,0.6) 1px, transparent 2px);
            opacity: 0.3;
        }
        66.6% { 
            background: 
                radial-gradient(circle at 75% 40%, rgba(255,64,0,0.8) 1px, transparent 2px),
                radial-gradient(circle at 30% 90%, rgba(64,255,128,0.7) 1.5px, transparent 2.5px),
                radial-gradient(circle at 95% 25%, rgba(128,64,255,0.6) 1px, transparent 2px);
            opacity: 0.5;
        }
        83.3% { 
            background: 
                radial-gradient(circle at 40% 55%, rgba(255,192,0,0.7) 1.5px, transparent 2.5px),
                radial-gradient(circle at 85% 15%, rgba(0,255,192,0.8) 1px, transparent 2px),
                radial-gradient(circle at 15% 75%, rgba(192,0,255,0.6) 1px, transparent 2px);
            opacity: 0.6;
        }
        100% { 
            background: 
                radial-gradient(circle at 60% 35%, rgba(255,0,64,0.9) 1px, transparent 2px),
                radial-gradient(circle at 25% 65%, rgba(64,255,0,0.7) 1.5px, transparent 2.5px),
                radial-gradient(circle at 80% 50%, rgba(0,64,255,0.8) 1px, transparent 2px);
            opacity: 0.4;
        }
    }









      /* GOAT Floating Player Styles (compact) */
    .goat-player { position:fixed; top:20px; left:24px; display:flex; align-items:center; background:#F0BB13; color:#eee; font-family:monospace; border:3px solid #444; padding:6px 10px; border-radius:8px; box-shadow:0 0 0 2px #000,0 3px 14px -4px #000 inset; gap:10px; cursor:grab; z-index:9999; user-select:none; }
        .goat-player.dragging { opacity:.85; cursor:grabbing; }
    .goat-icon { width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:#000000; border:3px solid #000; border-radius:6px; font-size:26px; box-shadow:0 0 0 2px #1d1d1d inset,0 0 6px #000; }
        .goat-controls { display:flex; align-items:center; gap:6px; }
    .goat-btn { background:#222; border:2px solid #444; color:#f0f0f0; padding:6px 8px; font-size:18px; line-height:1; border-radius:6px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-weight:600; letter-spacing:1px; transition:background .18s,border-color .18s, transform .18s; }
        .goat-btn:hover { background:#333; border-color:#777; }
        .goat-btn:active { background:#000; transform:translateY(2px) scale(.96); }
    .goat-track-marquee { position:relative; overflow:hidden; width:260px; height:46px; display:flex; align-items:center; background:repeating-linear-gradient(90deg,#181818 0 10px,#1f1f1f 10px 20px); border:2px solid #333; border-radius:6px; padding:0 4px; }
    .goat-track-text { white-space:nowrap; will-change:transform; animation:goat-scroll 13s linear infinite; padding-left:100%; font-size:15px; letter-spacing:3px; text-transform:uppercase; font-weight:600; }
        @keyframes goat-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-100%); } }
        .goat-player::after { content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg,rgba(255,255,255,0.08) 0 3px,rgba(255,255,255,0) 3px 6px); mix-blend-mode:overlay; opacity:.4; border-radius:inherit; }
    @media (max-width:900px){ .goat-player { transform:scale(.85); transform-origin:top left; } .goat-track-marquee { width:220px; } }
    @media (max-width:640px){ .goat-player { transform:scale(.7); transform-origin:top left; } .goat-track-marquee { width:190px; } }




       /* marquee scroll */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* tiny glitch motion for RGB layers */
        @keyframes glitch-anim {
            0% { transform: translate(0,0) skewX(0); clip-path: inset(0 0 0 0); }
            8% { transform: translate(2px,-1px) skewX(0.5deg); clip-path: inset(10% 0 60% 0); }
            15% { transform: translate(-2px,1px) skewX(-0.5deg); clip-path: inset(60% 0 10% 0); }
            25% { transform: translate(0,0) skewX(0); clip-path: inset(0 0 0 0); }
            100% { transform: translate(0,0) skewX(0); clip-path: inset(0 0 0 0); }
        }

        .marq { display: inline-block; }
        .marq-red { mix-blend-mode: screen; transform: translate(2px,0); animation: glitch-anim 2s infinite linear; }
        .marq-cyan { mix-blend-mode: screen; transform: translate(-2px,0); animation: glitch-anim 2.3s infinite linear; }
        /* keep base crisp above layers */
        .marq.base { position: relative; z-index: 2; }
        .marq.red, .marq.cyan { z-index: 1; }


    /* Terminal and Navigation Styles */
         .terminal-section {
            font-family: 'Courier New', monospace;
         }
         
         .terminal-output {
            scrollbar-width: thin;
            scrollbar-color: #F0BB13 #000000;
         }
         
         .terminal-output::-webkit-scrollbar {
            width: 8px;
         }
         
         .terminal-output::-webkit-scrollbar-track {
            background: #000000;
         }
         
         .terminal-output::-webkit-scrollbar-thumb {
            background: #F0BB13;
            border-radius: 4px;
         }
         
         .terminal-line {
            margin-bottom: 0.5rem;
            word-wrap: break-word;
            text-align: left !important;
            z-index: 9999;
            position: relative;
         }
         
         .terminal-output {
            text-align: left !important;
         }
         
         .terminal-output pre {
            text-align: left !important;
            margin: 0;
            padding: 0;
         }
         
         .typing-text {
            animation: typing 2s steps(20) 1s both;
         }
         
         @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
         }
         
         .nav-btn {
            transition: all 0.3s ease;
            font-family: 'Courier New', monospace;
         }
         
         .nav-btn:hover {
            transform: translateX(5px);
            box-shadow: 0 0 10px rgba(240, 187, 19, 0.5);
         }
         
         .nav-btn.active {
            background-color: #F0BB13 !important;
            color: #000000 !important;
            box-shadow: 0 0 15px rgba(240, 187, 19, 0.7);
         }
         
         .terminal-audio-btn {
            font-family: 'Courier New', monospace;
         }
         
         .terminal-audio-btn:hover {
            transform: scale(1.05);
         }
         
         /* Terminal Input Styles */
         .terminal-input-container {
            transition: all 0.3s ease;
         }
         
         .terminal-input-container:hover {
            border-color: #F0BB13;
            box-shadow: 0 0 5px rgba(240, 187, 19, 0.3);
         }
         
         .terminal-input-container:focus-within {
            border-color: #F0BB13;
            box-shadow: 0 0 10px rgba(240, 187, 19, 0.5);
         }
         
         #terminalInput:focus {
            outline: none;
         }
         
         .terminal-cursor {
            animation: blink 1s infinite;
         }
         
         @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
         }

         /* Header Link Text Glitch Effects */
         .header-link pre {
            position: relative;
            display: inline-block;
            animation: text-glitch 4s infinite linear;
         }

         .header-link pre::before,
         .header-link pre::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
         }

         /* Create additional pseudo-elements using box-shadow trick */
         .header-link pre {
            position: relative;
         }

         .header-link pre::before {
            animation: text-glitch-red 0.3s infinite steps(2, end);
            color: #ff0000;
            text-shadow: 2px 0 #ff0000;
            clip: rect(0, 900px, 0, 0);
         }

         .header-link pre::after {
            animation: text-glitch-cyan 0.25s infinite steps(3, end);
            color: #00ffff;
            text-shadow: -2px 0 #00ffff;
            clip: rect(0, 900px, 0, 0);
         }

         /* Blue and additional red layers using multiple shadows */
         .header-link pre {
            text-shadow: 
                0 0 0 transparent,
                1px 0 0 #0000ff,
                -1px 0 0 #ff6600;
            animation: 
                text-glitch 4s infinite linear,
                text-glitch-blue 0.35s infinite steps(4, end),
                text-glitch-orange 0.28s infinite steps(3, end);
         }

         @keyframes text-glitch {
            0%, 85% { 
                transform: translate(0);
                filter: contrast(1);
            }
            86% { 
                transform: translate(-0.5px, 0.2px);
                filter: contrast(1.2);
            }
            87% { 
                transform: translate(0.5px, -0.1px);
                filter: contrast(0.9);
            }
            88% { 
                transform: translate(-0.3px, 0.3px);
                filter: contrast(1.1);
            }
            89% { 
                transform: translate(0.2px, -0.2px);
                filter: contrast(1.0);
            }
            90% { 
                transform: translate(-0.4px, 0.1px);
                filter: contrast(1.15);
            }
            91%, 100% { 
                transform: translate(0);
                filter: contrast(1);
            }
         }

         @keyframes text-glitch-red {
            0%, 10% { 
                clip: rect(0, 900px, 0, 0);
                transform: translate(0);
            }
            15% { 
                clip: rect(10px, 900px, 15px, 0);
                transform: translate(-2px, 0);
            }
            20% { 
                clip: rect(5px, 900px, 25px, 0);
                transform: translate(2px, 0);
            }
            25% { 
                clip: rect(20px, 900px, 8px, 0);
                transform: translate(-1px, 0);
            }
            30% { 
                clip: rect(12px, 900px, 18px, 0);
                transform: translate(3px, 0);
            }
            35% { 
                clip: rect(3px, 900px, 22px, 0);
                transform: translate(-2px, 0);
            }
            40%, 100% { 
                clip: rect(0, 900px, 0, 0);
                transform: translate(0);
            }
         }

         @keyframes text-glitch-cyan {
            0%, 15% { 
                clip: rect(0, 900px, 0, 0);
                transform: translate(0);
            }
            20% { 
                clip: rect(8px, 900px, 12px, 0);
                transform: translate(2px, 0);
            }
            25% { 
                clip: rect(15px, 900px, 5px, 0);
                transform: translate(-3px, 0);
            }
            30% { 
                clip: rect(2px, 900px, 20px, 0);
                transform: translate(1px, 0);
            }
            35% { 
                clip: rect(18px, 900px, 10px, 0);
                transform: translate(-2px, 0);
            }
            40% { 
                clip: rect(6px, 900px, 16px, 0);
                transform: translate(2px, 0);
            }
            45%, 100% { 
                clip: rect(0, 900px, 0, 0);
                transform: translate(0);
            }
         }

         @keyframes text-glitch-blue {
            0%, 20% { 
                text-shadow: 
                    0 0 0 transparent,
                    1px 0 0 transparent,
                    -1px 0 0 #ff6600;
            }
            25% { 
                text-shadow: 
                    0 0 0 transparent,
                    1px 0 0 #0000ff,
                    -1px 0 0 #ff6600;
            }
            30% { 
                text-shadow: 
                    0 0 0 transparent,
                    2px 0 0 #0000ff,
                    -2px 0 0 #ff6600;
            }
            35% { 
                text-shadow: 
                    0 0 0 transparent,
                    -1px 0 0 #0000ff,
                    1px 0 0 #ff6600;
            }
            40% { 
                text-shadow: 
                    0 0 0 transparent,
                    3px 0 0 #0000ff,
                    -1px 0 0 #ff6600;
            }
            45%, 100% { 
                text-shadow: 
                    0 0 0 transparent,
                    0 0 0 transparent,
                    0 0 0 transparent;
            }
         }

         @keyframes text-glitch-orange {
            0%, 30% { 
                text-shadow: 
                    0 0 0 transparent,
                    1px 0 0 #0000ff,
                    0 0 0 transparent;
            }
            35% { 
                text-shadow: 
                    0 0 0 transparent,
                    1px 0 0 #0000ff,
                    -2px 0 0 #ff6600;
            }
            40% { 
                text-shadow: 
                    0 0 0 transparent,
                    2px 0 0 #0000ff,
                    -3px 0 0 #ff6600;
            }
            45% { 
                text-shadow: 
                    0 0 0 transparent,
                    -1px 0 0 #0000ff,
                    2px 0 0 #ff6600;
            }
            50% { 
                text-shadow: 
                    0 0 0 transparent,
                    3px 0 0 #0000ff,
                    -2px 0 0 #ff6600;
            }
            55%, 100% { 
                text-shadow: 
                    0 0 0 transparent,
                    0 0 0 transparent,
                    0 0 0 transparent;
            }
         }

         /* Disable glitch on hover for cleaner interaction */
         .header-link:hover pre {
            animation: none !important;
            text-shadow: none !important;
            color: #F0BB13 !important;
            transition: color 0.3s ease;
         }

         .header-link:hover pre::before,
         .header-link:hover pre::after {
            animation: none;
            opacity: 0;
         }