/* CUSTOM FONTS */
@font-face {
    font-family: 'Stack Sans Notch';
    src: url('StackSansNotch.woff2') format('woff2'),
         url('StackSansNotch.otf') format('opentype');
    font-weight: normal;
}

@font-face {
    font-family: 'Datatype';
    src: url('Datatype.woff2') format('woff2'),
         url('Datatype.otf') format('opentype');
    font-weight: normal;
}

:root {
    --bg-color: #000000;
    --text-color: #b0b0b0;
    --highlight: #ffffff;
    --accent-color: #8b0000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: crosshair;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Datatype', "Courier New", monospace;
    line-height: 1.4;
    position: relative;
    overflow: hidden; 
    width: 100vw;
    height: 100vh;
}

/* CRT SCANLINES */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 9999;
    pointer-events: none;
}

/* DOS TEXT PHOSPHOR GLOW */
.dos-text {
    text-shadow: 0 0 2px rgba(176, 176, 176, 0.6); 
}

/* BLINKING CURSOR */
.dos-cursor::after {
    content: '\2588';
    animation: blink 1s step-end infinite;
    margin-left: 8px;
    color: var(--text-color);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* BOOT SCREEN */
#boot-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; color: var(--text-color);
    z-index: 10000; padding: 20px; font-size: 1.1rem;
    display: flex; flex-direction: column;
}

/* DESKTOP & CANVAS BACKGROUND */
#desktop {
    width: 100vw; height: 100vh;
    position: relative; background: #000;
}

#bg-canvas {
    position: absolute; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0; pointer-events: none;
}

/* DESKTOP ICONS */
.desktop-icons {
    position: absolute; top: 20px; left: 20px;
    display: flex; flex-direction: column; gap: 30px; z-index: 10;
}

.icon {
    width: 100px; text-align: center; cursor: pointer;
    color: var(--text-color); transition: all 0.1s;
    font-family: 'Stack Sans Notch', sans-serif;
}

.icon-img {
    font-size: 2.5rem; display: block; margin-bottom: 5px; font-family: monospace; 
}
.icon:hover { background-color: var(--text-color); color: #000; }
.icon:hover .icon-img { color: #000; }

/* -------------------------------------
   DRAGGABLE WINDOWS
-------------------------------------- */
.window {
    position: absolute;
    border: 2px solid var(--text-color);
    background: #000; display: flex; flex-direction: column;
    box-shadow: 10px 10px 0px rgba(20,20,20,0.8);
    min-width: 300px; z-index: 100;
}

.window.maximized {
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    box-shadow: none !important;
}

.window.maximized .window-content {
    flex: 1; height: calc(100vh - 35px); width: 100%;
}

.window.maximized .viewer-app,
.window.maximized .music-app {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
}

.title-bar {
    border-bottom: 2px solid var(--text-color);
    background: var(--text-color); color: #000;
    padding: 5px 10px; display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; font-family: 'Stack Sans Notch', sans-serif; letter-spacing: 1px;
    user-select: none;
}
.title-bar:active { cursor: grabbing; }

.title-bar .title { flex-grow: 1; }

.window-controls { display: flex; gap: 10px; }
.window-controls span { font-family: monospace; font-weight: bold; font-size: 1.1rem; padding: 0 2px; }
.window-controls span:hover { color: var(--highlight); background: #000; }

.window-content {
    background: #000; overflow: auto; display: flex;
}
.window.minimized .window-content { display: none !important; }

/* -------------------------------------
   VIEWER APP & ARTISTIC GLITCH
-------------------------------------- */
.viewer-app {
    width: 800px; height: 500px;
    max-width: 100vw; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
}

.software-body {
    display: flex; width: 100%; height: 100%;
}

.img-panel {
    flex: 3; border-right: 2px solid var(--text-color); padding: 15px;
    display: flex; align-items: center; justify-content: center;
    background: #020202; position: relative; height: 100%; overflow: hidden;
    min-width: 0; /* Prevents flexbox from resizing due to image size */
}

.img-panel img {
    position: absolute; /* Detaches image from flexbox flow for strict sizing */
    top: 5%; left: 5%;
    width: 90%; height: 90%;
    object-fit: contain; 
    filter: grayscale(100%) contrast(140%) brightness(90%);
    transition: filter 0.2s; z-index: 2;
}
.img-panel img:hover { filter: grayscale(0%) contrast(110%); }

#glitch-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(170,170,170,0.1) 2px, rgba(170,170,170,0.1) 4px);
    z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: overlay;
}

/* PURE DOS/B&W STEPS TRANSITION */
@keyframes dos-glitch {
    0%   { opacity: 1; filter: grayscale(100%) contrast(140%) brightness(90%); transform: translate(0, 0); }
    25%  { opacity: 1; filter: grayscale(100%) contrast(300%) brightness(150%); transform: translate(-5px, 3px); }
    50%  { opacity: 0; filter: grayscale(100%) contrast(500%) brightness(10%); transform: translate(5px, -3px); } /* Swaps Data Here */
    75%  { opacity: 0.5; filter: grayscale(100%) contrast(400%) brightness(200%); transform: translate(-3px, 5px); }
    100% { opacity: 1; filter: grayscale(100%) contrast(140%) brightness(90%); transform: translate(0, 0); }
}

@keyframes flash-overlay {
    0%, 100% { opacity: 0; }
    20%, 40% { opacity: 1; }
    70% { opacity: 0.5; }
}

.heavy-glitch img { animation: dos-glitch 0.8s steps(4, start) forwards; }
.heavy-glitch #glitch-overlay { animation: flash-overlay 0.8s forwards; }

.info-panel {
    flex: 1; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; background: #000;
}
.info-panel h2 { font-family: 'Stack Sans Notch', sans-serif; font-size: 1.5rem; color: var(--highlight); margin-bottom: 10px; }
.meta-label { color: #555; margin-top: 20px; font-size: 0.8rem; border-bottom: 1px dashed #333; padding-bottom: 3px; margin-bottom: 8px; }
.controls-hint { margin-top: auto; color: #555; font-size: 0.8rem; border: 1px solid #333; padding: 10px; text-align: center; background: #050505; }

/* -------------------------------------
   MUSIC APP & OSCILLOSCOPE
-------------------------------------- */
.music-app { width: 700px; height: 350px; padding: 0; flex-direction: row; }
.tracks-panel { flex: 1; padding: 20px; border-right: 2px solid var(--text-color); overflow-y: auto; }
.eq-panel { flex: 1; padding: 20px; display: flex; flex-direction: column; background: #020202; }
.eq-panel h3 { font-family: 'Stack Sans Notch', sans-serif; font-size: 1.2rem; color: var(--highlight); border-bottom: 1px solid #333; padding-bottom: 5px; }

.audio-box { border: 1px solid #333; padding: 15px; margin-bottom: 15px; }
.audio-box h3 { font-family: 'Stack Sans Notch', sans-serif; font-size: 1.1rem; color: var(--highlight); }
audio { width: 100%; margin-top: 10px; filter: grayscale(1) contrast(200%) invert(100%); }

/* -------------------------------------
   ABOUT & CONTACT APPS
-------------------------------------- */
.about-app { width: 600px; max-height: 80vh; padding: 30px; flex-direction: column; }
.about-app h2 { font-family: 'Stack Sans Notch', sans-serif; font-size: 2rem; color: var(--highlight); margin-bottom