/* diplomatic.boo — Glassmorphism Phantom Interface
   Palette: #0A0C12 #1A1E2E #00D4FF #B0D4F1 #FFB627 #E4E8F0 #6B7080 #6B3FA0
*/

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

body {
    background-color: #0A0C12;
    color: #E4E8F0;
    font-family: 'Exo 2', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Scanning Line */
#scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 212, 255, 0.3);
    z-index: 500;
    animation: scanSweep 8s linear infinite;
    pointer-events: none;
}

@keyframes scanSweep {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

/* Phantom Data Streams */
.data-stream {
    position: fixed;
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
    color: #B0D4F1;
    opacity: 0.04;
    writing-mode: vertical-rl;
    white-space: nowrap;
    z-index: 0;
    animation: streamScroll 30s linear infinite;
    pointer-events: none;
}

.stream-1 { left: 10%; top: 0; }
.stream-2 { left: 50%; top: 0; animation-duration: 40s; }
.stream-3 { left: 80%; top: 0; animation-duration: 35s; }

@keyframes streamScroll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* Glass Panels */
.glass-panel {
    position: absolute;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(26, 30, 46, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 24px 20px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.glass-panel.visible {
    opacity: 1;
}

.glass-panel.glitch {
    animation: panelGlitch 0.2s steps(2) 1;
}

@keyframes panelGlitch {
    0% { clip-path: inset(0 0 0 0); transform: translateX(0); }
    50% { clip-path: inset(10% 0 10% 0); transform: translateX(3px); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* Panel drift animations */
.panel-hero { animation: drift1 30s ease-in-out infinite; }
.panel-sm { animation: drift2 25s ease-in-out infinite; }
.panel-md { animation: drift3 35s ease-in-out infinite; }
.panel-lg { animation: drift1 40s ease-in-out infinite; }

@keyframes drift1 {
    0%, 100% { margin-top: 0; margin-left: 0; }
    50% { margin-top: 10px; margin-left: -8px; }
}

@keyframes drift2 {
    0%, 100% { margin-top: 0; margin-left: 0; }
    50% { margin-top: -12px; margin-left: 6px; }
}

@keyframes drift3 {
    0%, 100% { margin-top: 0; margin-left: 0; }
    50% { margin-top: 8px; margin-left: 10px; }
}

.panel-header {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: #00D4FF;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.panel-content {
    color: #E4E8F0;
    margin-bottom: 12px;
}

.panel-content:last-child {
    margin-bottom: 0;
}

.panel-data {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: #B0D4F1;
    margin-bottom: 4px;
}

.panel-data.warn {
    color: #FFB627;
}

.signal-indicator {
    color: #00D4FF;
}

/* Interface Sections */
.interface-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* Hero Title */
.hero-title {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.08em;
    color: #00D4FF;
    margin-bottom: 16px;
    min-height: 1.2em;
}

.hero-title .boo-glitch {
    display: inline-block;
    animation: glitchText 0.3s steps(3) 1;
    color: #6B3FA0;
}

@keyframes glitchText {
    0% { transform: translateX(0); opacity: 1; }
    33% { transform: translateX(-4px); opacity: 0.5; }
    66% { transform: translateX(3px); opacity: 0.8; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Blink Cursor */
.blink-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease;
}

.blink-cursor.visible {
    opacity: 1;
}

.cursor-char {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2rem;
    color: #00D4FF;
    animation: cursorBlink 1s step-end infinite;
}

.cursor-char.spectral {
    color: #6B3FA0;
}

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

/* Fade Panel */
.fade-panel {
    transition: opacity 2s ease;
}

/* Status Bar */
#status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(10, 12, 18, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    padding: 8px 24px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.status-item {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: #6B7080;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
    .glass-panel {
        position: relative !important;
        width: 90% !important;
        left: 5% !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 24px;
    }

    .interface-section {
        min-height: auto;
        padding: 40px 0;
    }

    #status-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 12px;
    }

    .status-item {
        font-size: 0.65rem;
    }
}