/**
 * NeoWeaver – Terminal UI Styles
 * Updated: glass HUD + CRT terminal blend
 */

:root {
    --neo-bg: #020508;
    --neo-accent: #adff00;
    --neo-border: rgba(173, 255, 0, 0.22);
    --neo-text-main: #d8f5dc;
    --neo-text-dim: #7aa685;
    --neo-error: #ff4d4d;

    --neo-monitor: #00d2ff;
    --neo-monitor-glow: rgba(0, 210, 255, 0.45);
    --neo-monitor-border: rgba(0, 210, 255, 0.18);

    --neo-surface-hud: rgba(3, 7, 18, 0.16);
    --neo-surface-hud-open: rgba(3, 7, 18, 0.3);
    --neo-surface-col: rgba(15, 23, 42, 0.14);

    --font-terminal: 'Chakra Petch', sans-serif;

    --transition-smooth: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-hud: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --blur-hud: 16px;
    --neo-radius: 22px;
}

* {
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(circle at top, rgba(173, 255, 0, 0.04), transparent 30%),
        linear-gradient(180deg, #020508 0%, #050912 100%);
    color: var(--neo-text-main);
    font-family: var(--font-terminal);
    margin: 0;
    overflow-x: hidden;
}

@keyframes monitor-flicker {
    0%, 100% { opacity: 1; }
    96%      { opacity: 0.985; }
    97%      { opacity: 1; }
    98%      { opacity: 0.992; }
    99%      { opacity: 1; }
}

@keyframes scanline-scroll {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

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

@keyframes progress-fill {
    0%   { content: "█▒▒▒▒▒▒▒▒▒▒▒▒▒▒  5%"; }
    30%  { content: "██████▒▒▒▒▒▒▒▒▒ 45%"; }
    50%  { content: "███████████▒▒▒▒ 78%"; opacity: 0.65; }
    100% { content: "███████████████ 100%"; }
}

@keyframes entropy-loop {
    0%   { content: "█▒▒▒▒▒▒▒▒▒▒▒▒▒▒  2%"; color: var(--neo-accent); }
    85%  { content: "███████████████ 99%"; color: var(--neo-error); text-shadow: 0 0 15px var(--neo-error); }
    95%  { content: "▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  0%"; opacity: 0.55; }
    100% { content: "█▒▒▒▒▒▒▒▒▒▒▒▒▒▒  2%"; }
}

@keyframes neon-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(173, 255, 0, 0.35); }
    50%      { text-shadow: 0 0 16px rgba(173, 255, 0, 0.55), 0 0 28px rgba(173, 255, 0, 0.15); }
}

.neoweave-terminal {
    background:
        linear-gradient(135deg, rgba(6, 10, 14, 0.82) 0%, rgba(4, 8, 18, 0.92) 100%);
    color: var(--neo-text-main);
    padding: 32px;
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-radius);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(var(--blur-hud)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--blur-hud)) saturate(145%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(173, 255, 0, 0.07),
        inset 0 1px 0 rgba(173, 255, 0, 0.08),
        inset 0 0 30px rgba(0, 0, 0, 0.35);
    line-height: 1.6;
    margin: 32px auto;
    max-width: 1100px;
    animation: monitor-flicker 7s linear infinite;
}

.neoweave-terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 4px
    );
    pointer-events: none;
    z-index: 5;
    opacity: 0.55;
}

.neoweave-terminal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 30%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
    z-index: 6;
    animation: scanline-scroll 10s linear infinite;
    opacity: 0.3;
}

.terminal-header {
    color: var(--neo-accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(173, 255, 0, 0.14);
    padding-bottom: 10px;
    font-size: 0.78rem;
    letter-spacing: 2px;
    position: relative;
    z-index: 7;
}

.terminal-title {
    color: var(--neo-accent);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(173, 255, 0, 0.42),
        0 0 24px rgba(173, 255, 0, 0.12);
    margin: 16px 0 20px;
    position: relative;
    z-index: 7;
}

.terminal-cursor {
    display: inline-block;
    width: 10px;
    height: 20px;
    background: var(--neo-accent);
    box-shadow: 0 0 10px rgba(173, 255, 0, 0.45);
    animation: power-blink 0.8s step-end infinite;
}

.loading-bar-container,
.entropy-container {
    border: 1px solid rgba(173, 255, 0, 0.14);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 22px 0;
    background: rgba(173, 255, 0, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(173, 255, 0, 0.05),
        0 0 16px rgba(173, 255, 0, 0.03);
    position: relative;
    z-index: 7;
}

.loading-bar::after {
    content: "";
    animation: progress-fill 5s linear infinite;
}

.entropy-bar::after {
    content: "";
    animation: entropy-loop 5s steps(20) infinite;
}

.neoweave-tag {
    color: var(--neo-accent);
    background: rgba(173, 255, 0, 0.09);
    padding: 2px 7px;
    border: 1px solid rgba(173, 255, 0, 0.18);
    border-radius: 999px;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(173, 255, 0, 0.28);
}

.neo-terminal-header {
    height: 60px;
    background: rgba(2, 6, 10, 0.78);
    border-bottom: 1px solid rgba(173, 255, 0, 0.22);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 0 20px rgba(173, 255, 0, 0.05),
        inset 0 -1px 0 rgba(173, 255, 0, 0.08);
    animation: monitor-flicker 7s linear infinite;
}

.neo-footer-container {
    background: rgba(2, 6, 10, 0.78);
    padding: 40px 20px;
    border-top: 1px solid rgba(173, 255, 0, 0.22);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.footer-col h3 {
    color: var(--neo-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col a {
    color: var(--neo-text-dim);
    text-decoration: none;
    transition: color var(--transition-smooth), text-shadow var(--transition-smooth);
}

.footer-col a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(173, 255, 0, 0.35);
}