/* Phantom Terminal Overlay - CSS */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --terminal-bg: #0a0a0a;
    --terminal-text: #00ff41;
    /* Hacker Green */
    --terminal-alert: #ff0055;
    /* Cyberpunk Red */
    --terminal-gold: #ffd700;
    --terminal-dim: #008f11;
}

/* Container for the Terminal Feed */
.phantom-terminal-container {
    background-color: var(--terminal-bg);
    border: 2px solid var(--terminal-dim);
    border-radius: 5px;
    padding: 1rem;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: var(--terminal-text);
    height: 400px;
    /* Fixed height for scroll */
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
    /* CRT Scanline Effect */
    background: linear-gradient(rgba(18, 16, 16, 0), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.25) 100%);
    background-size: 100% 4px;
}

/* Scrollbar customization */
.phantom-terminal-container::-webkit-scrollbar {
    width: 8px;
}

.phantom-terminal-container::-webkit-scrollbar-track {
    background: #000;
}

.phantom-terminal-container::-webkit-scrollbar-thumb {
    background: var(--terminal-dim);
    border-radius: 4px;
}

/* Individual Log Entry */
.terminal-entry {
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed #333;
    padding-bottom: 0.5rem;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
    display: flex;
    flex-direction: column;
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: var(--terminal-dim);
    font-size: 0.9rem;
}

.terminal-body {
    margin-top: 0.2rem;
    line-height: 1.2;
    /* Tighter line height for charts */
    white-space: pre-wrap;
    /* Preserve alignment */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    /* Ensure fixed width */
}

/* Dynamic Colors based on Event Type */
.type-sweep {
    color: var(--terminal-gold);
}

.type-quantum {
    color: var(--terminal-alert);
}

.type-system {
    color: #00bfff;
}

.signal-positive {
    color: #00ff41;
}

.signal-negative {
    color: #ff0055;
}

/* Blinking Cursor at the bottom */
.terminal-cursor::after {
    content: '█';
    animation: blink 1s infinite;
    color: var(--terminal-text);
    margin-left: 5px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glitch Effect Class */
.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}