/* ============================================================
   Terminal Portfolio — style.css
   Theme: CRT Phosphor Green on Pitch Black
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
    --bg: #000000;
    --fg: #00ff00;
    --fg-dim: #00cc00;
    --fg-bright: #33ff33;
    --fg-muted: #555555;
    --fg-hint: #666666;
    --fg-white: #cccccc;
    --fg-red: #ff4444;
    --fg-yellow: #ffcc00;
    --fg-cyan: #00ffff;
    --fg-magenta: #ff66ff;
    --fg-blue: #7a9ec2;
    --fg-orange: #ff9933;
    --glow-sm: 0 0 1px rgba(0, 255, 0, 0.4);
    --glow-md: 0 0 2px rgba(0, 255, 0, 0.5);
    --font-mono: 'Fira Code', 'Courier New', Courier, monospace;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- CRT Wrapper ---------- */
#crt {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ---------- Scanlines Overlay ---------- */
#crt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.12) 0px,
            rgba(0, 0, 0, 0.12) 1px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 10;
}

/* ---------- Vignette (disabled — strains readability at edges) ---------- */

/* ---------- Screen Flicker ---------- */
@keyframes flicker {
    0% {
        opacity: 0.97;
    }

    5% {
        opacity: 0.95;
    }

    10% {
        opacity: 0.98;
    }

    15% {
        opacity: 0.96;
    }

    20% {
        opacity: 0.99;
    }

    50% {
        opacity: 0.96;
    }

    80% {
        opacity: 0.98;
    }

    85% {
        opacity: 0.95;
    }

    90% {
        opacity: 0.99;
    }

    95% {
        opacity: 0.97;
    }

    100% {
        opacity: 0.98;
    }
}

#terminal-container {
    animation: flicker 4s infinite;
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--fg-dim) var(--bg);
    position: relative;
    z-index: 1;
}

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

#terminal-container::-webkit-scrollbar-track {
    background: var(--bg);
}

#terminal-container::-webkit-scrollbar-thumb {
    background: var(--fg-dim);
    border-radius: 3px;
}

/* ---------- Output Area ---------- */
#output {
    white-space: pre-wrap;
    word-wrap: break-word;
}

#output .line {
    min-height: 1.5em;
}

/* ---------- Text Glow ---------- */
#output,
.input-line {
    text-shadow: var(--glow-sm);
}

/* ---------- Prompt / Input Line ---------- */
.input-line {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--fg);
}

.prompt-text {
    flex-shrink: 0;
    color: var(--fg);
    margin-right: 0;
}

.prompt-user {
    color: var(--fg-cyan);
}

.prompt-at {
    color: var(--fg);
}

.prompt-host {
    color: var(--fg-magenta);
}

.prompt-path {
    color: var(--fg-blue);
}

.prompt-dollar {
    color: var(--fg);
    white-space: pre;
}

/* ---------- Hidden Real Input ---------- */
#command-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ---------- Visible Typed Text + Cursor ---------- */
.typed-text {
    color: var(--fg);
    white-space: pre;
}

.cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.15em;
    background: var(--fg);
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ---------- Colour Utility Classes ---------- */
.c-green {
    color: var(--fg);
}

.c-dim {
    color: var(--fg-dim);
}

.c-bright {
    color: var(--fg-bright);
}

.c-muted {
    color: var(--fg-muted);
}

.c-hint {
    color: var(--fg-hint);
}

.c-white {
    color: var(--fg-white);
}

.c-red {
    color: var(--fg-red);
}

.c-yellow {
    color: var(--fg-yellow);
}

.c-cyan {
    color: var(--fg-cyan);
}

.c-magenta {
    color: var(--fg-magenta);
}

.c-blue {
    color: var(--fg-blue);
}

.c-orange {
    color: var(--fg-orange);
}

.bold {
    font-weight: 700;
}

/* ---------- Progress Bars (skills.sh) ---------- */
.skill-bar {
    display: inline-block;
}

.bar-fill {
    display: inline-block;
}

.bar-empty {
    display: inline-block;
    color: #333333;
}

/* ---------- Link styling ---------- */
#output a {
    color: var(--fg-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#output a:hover {
    color: var(--fg-bright);
}

/* ---------- Boot Sequence ---------- */
.boot-line {
    color: var(--fg-dim);
}

.boot-ok {
    color: var(--fg);
    font-weight: 700;
}

.boot-fail {
    color: var(--fg-red);
    font-weight: 700;
}

/* ---------- ASCII Art ---------- */
.ascii-art {
    line-height: 1.15;
    font-size: 12px;
    color: var(--fg-yellow);
}

/* ---------- Docker Table ---------- */
.docker-table {
    color: var(--fg-white);
}

.docker-header {
    color: var(--fg-cyan);
    font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {

    html,
    body {
        font-size: 12px;
    }

    #terminal-container {
        padding: 10px 12px;
    }
}