:root {
    --lambda-orange: #FF9F00;
    --concrete-grey: #4A4A4A;
    --terminal-green: #00FF00;
    --alert-red: #FF3030;
    --blue-accent: #00A2FF;
    --dark-bg: #1A1A1A;
    --monitor-bg: #2B2B2B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--dark-bg); color: var(--lambda-orange); font-family: "Trebuchet MS", sans-serif; overflow: hidden; position: relative; }

.app-container { display: flex; height: 100vh; width: 100vw; position: relative; z-index: 2; }

/* CRT Effects */
#crt-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); background-size: 100% 3px, 3px 100%; }
#crt-overlay::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, transparent, rgba(255, 159, 0, 0.05), transparent); animation: scanline 8s linear infinite; }
@keyframes scanline { from { top: -100px; } to { top: 100%; } }

/* Sidebar & Logo */
.sidebar { width: 280px; background: var(--monitor-bg); border-right: 4px solid var(--concrete-grey); display: flex; flex-direction: column; padding: 20px; z-index: 10; }
.sidebar-header { text-align: center; }
.sidebar-header h2 { font-size: 1.2rem; letter-spacing: 2px; text-shadow: 0 0 5px var(--lambda-orange); }
.jdc-logo-container { width: 100px; height: 100px; perspective: 1000px; margin: 0 auto 20px auto; }
.jdc-glyph { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: goldeneyeRotate 6s infinite linear; }
.glyph-face { position: absolute; width: 40px; height: 80px; background: linear-gradient(135deg, var(--lambda-orange) 0%, #b37100 100%); border: 1px solid #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 40px; color: #fff; text-shadow: 2px 2px 0 #000; box-shadow: 0 0 15px var(--lambda-orange); }
.j-face { transform: rotateY(0deg) translateZ(20px); left: 30px; }
.d-face { transform: rotateY(120deg) translateZ(20px); left: 30px; }
.c-face { transform: rotateY(240deg) translateZ(20px); left: 30px; }
@keyframes goldeneyeRotate { 0% { transform: rotateY(0deg) rotateX(10deg); } 50% { transform: rotateY(180deg) rotateX(-10deg); } 100% { transform: rotateY(360deg) rotateX(10deg); } }

.sidebar-nav { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.button-container { height: 48px; position: relative; width: 100%; }
.diegetic-button { background: var(--concrete-grey); border: 3px solid #666; border-bottom: 6px solid #333; border-right: 6px solid #333; color: var(--lambda-orange); padding: 8px; font-weight: bold; cursor: pointer; text-align: left; width: 100%; height: 40px; position: absolute; top: 0; left: 0; transition: all 0.1s; font-size: 0.9rem; }
.diegetic-button:hover { border-color: var(--lambda-orange); box-shadow: 0 0 10px var(--lambda-orange); }
.diegetic-button.active { top: 4px; left: 4px; border-bottom-width: 2px; border-right-width: 2px; background: #555; color: #fff; box-shadow: 0 0 15px var(--lambda-orange); }

/* Main Content */
.main-content { flex-grow: 1; padding: 40px; overflow-y: auto; background: radial-gradient(circle, #333 0%, #1A1A1A 100%); }
.terminal-frame { border: 2px solid var(--concrete-grey); padding: 20px; background: rgba(0, 0, 0, 0.5); position: relative; margin-bottom: 20px; }
.terminal-frame::before { content: ""; position: absolute; top: -2px; left: -2px; width: 20px; height: 20px; border-top: 4px solid var(--lambda-orange); border-left: 4px solid var(--lambda-orange); }

/* Advanced Chromatic Glitch */
.glitch-target { position: relative; overflow: hidden; }
.glitch-active::before, .glitch-active::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: inherit; opacity: 0.5; pointer-events: none; z-index: -1;
}
.glitch-active::before { 
    animation: chromaticRed 5s infinite;
    filter: sepia(1) saturate(5) hue-rotate(-50deg);
}
.glitch-active::after { 
    animation: chromaticBlue 5s infinite;
    filter: sepia(1) saturate(5) hue-rotate(150deg);
}

@keyframes chromaticRed {
    0%, 92%, 100% { transform: translate(0); opacity: 0; }
    93% { transform: translate(-3px, 1px) skewX(2deg); opacity: 0.5; }
    94% { transform: translate(0); opacity: 0; }
}
@keyframes chromaticBlue {
    0%, 92%, 100% { transform: translate(0); opacity: 0; }
    93% { transform: translate(3px, -1px) skewX(-2deg); opacity: 0.5; }
    94% { transform: translate(0); opacity: 0; }
}

/* Status Text Fixed Typing */
.status-msg { font-family: monospace; font-size: 0.8rem; margin-bottom: 20px; color: var(--terminal-green); display: inline-block; overflow: hidden; white-space: nowrap; border-right: 0.15em solid var(--terminal-green); width: 0; animation: typing 2s steps(40, end) forwards, blink-caret 0.75s step-end infinite; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--terminal-green); } }

/* Sections */
.page-home .terminal-frame::before { border-color: var(--lambda-orange); }
.page-work .terminal-frame::before { border-color: var(--blue-accent); }
.page-team .terminal-frame::before { border-color: var(--terminal-green); }
.page-personal .terminal-frame::before { border-color: var(--alert-red); }

.hero-video-bg { width: 100%; height: 250px; background: #000; overflow: hidden; position: relative; border: 2px solid var(--concrete-grey); margin: 15px 0; }
.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: grayscale(1) contrast(1.5) blur(1px); }

.dossier-grid { display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: start; }
.portrait-container { width: 150px; height: 180px; background: #000; overflow: hidden; border: 3px solid var(--concrete-grey); position: relative; }
.portrait { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2) contrast(1.4) brightness(0.9) grayscale(0.2); image-rendering: pixelated; }

.diegetic-button-static { background: var(--concrete-grey); border: 3px solid #666; border-bottom: 4px solid #333; border-right: 4px solid #333; color: var(--lambda-orange); padding: 8px 15px; font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block; transition: all 0.1s; }
.diegetic-button-static:hover { border-color: #fff; color: #fff; box-shadow: 0 0 10px #fff; }

.gallery-scroll { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 15px; }
.gallery-scroll img { height: 180px; border: 2px solid var(--concrete-grey); }

.page-section { animation: glitchIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@keyframes glitchIn { 0% { transform: scale(1.1); filter: brightness(3); opacity: 0; } 100% { transform: scale(1); filter: brightness(1); opacity: 1; } }