/* socials/css/style.css */
:root {
    --energy: #F37720;
    --cyber: #00f3ff;
    --void: #050505;
    --glass: rgba(10, 10, 12, 0.85);
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'Chakra Petch', sans-serif;
    overflow-x: hidden;
}

/* --- 1. BACKGROUND FX --- */
.scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    opacity: 0.6;
}
.stars {
    position: fixed; inset: 0;
    background: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.3; z-index: -1;
    animation: drift 100s linear infinite;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* --- 2. HUD PANELS (The "Tech" Look) --- */
.hud-panel {
    background: rgba(5, 5, 5, 0.85);
    border: 1px solid rgba(243, 119, 32, 0.3);
    box-shadow: 0 0 20px rgba(243, 119, 32, 0.05);
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
/* Corner Accents */
.hud-panel::before {
    content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px;
    border-top: 2px solid var(--energy); border-left: 2px solid var(--energy);
    z-index: 10;
}
.hud-panel::after {
    content: ''; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px;
    border-bottom: 2px solid var(--energy); border-right: 2px solid var(--energy);
    z-index: 10;
}
.hud-panel:hover {
    border-color: var(--energy);
    box-shadow: 0 0 30px rgba(243, 119, 32, 0.15);
}

/* --- 3. GLITCH TEXT (Restored Original Animation) --- */
.glitch { position: relative; color: #fff; }
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before {
    left: 2px; text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px; text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(38px, 9999px, 81px, 0); } 20% { clip: rect(8px, 9999px, 86px, 0); }
    40% { clip: rect(59px, 9999px, 14px, 0); } 60% { clip: rect(18px, 9999px, 58px, 0); }
    80% { clip: rect(98px, 9999px, 4px, 0); } 100% { clip: rect(24px, 9999px, 90px, 0); }
}
@keyframes glitch-anim2 {
    0% { clip: rect(26px, 9999px, 11px, 0); } 20% { clip: rect(54px, 9999px, 86px, 0); }
    40% { clip: rect(12px, 9999px, 43px, 0); } 60% { clip: rect(69px, 9999px, 15px, 0); }
    80% { clip: rect(5px, 9999px, 88px, 0); } 100% { clip: rect(96px, 9999px, 2px, 0); }
}

/* --- 4. BUTTONS & UI --- */
.cyber-btn {
    background: rgba(243, 119, 32, 0.1);
    border: 1px solid var(--energy);
    color: var(--energy);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.cyber-btn:hover {
    background: var(--energy);
    color: #000;
    box-shadow: 0 0 20px var(--energy);
}

.sys-stat {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: #555;
    letter-spacing: 1px;
}
.sys-stat span { color: var(--energy); }

/* --- 5. HEX AVATARS --- */
.hex-avatar {
    width: 100%; height: 100%; object-fit: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #000;
}
.hex-wrap {
    filter: drop-shadow(0 0 5px var(--energy));
    transition: 0.3s;
}
.hex-wrap:hover {
    filter: drop-shadow(0 0 15px var(--energy));
    transform: scale(1.05);
}

/* --- 6. SCROLLBAR --- */
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: #000; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--energy); }

/* --- TRAFFIC MONITOR ANIMATION --- */
@keyframes fluctuate {
    0%, 100% { height: 20%; opacity: 0.3; }
    50% { height: 100%; opacity: 1; }
}

.monitor-bar {
    width: 14%;
    background: var(--energy);
    bottom: 0;
    position: relative;
    animation: fluctuate 2s infinite ease-in-out;
}

/* Stagger the animations so they don't move together */
.monitor-bar:nth-child(1) { animation-duration: 2.2s; animation-delay: 0.1s; background: rgba(243, 119, 32, 0.2); }
.monitor-bar:nth-child(2) { animation-duration: 1.8s; animation-delay: 0.3s; background: rgba(243, 119, 32, 0.4); }
.monitor-bar:nth-child(3) { animation-duration: 3.5s; animation-delay: 0s;   background: rgba(243, 119, 32, 0.6); }
.monitor-bar:nth-child(4) { animation-duration: 1.5s; animation-delay: 0.5s; background: rgba(243, 119, 32, 0.8); }
.monitor-bar:nth-child(5) { animation-duration: 2.8s; animation-delay: 0.2s; background: rgba(243, 119, 32, 1.0); }
.monitor-bar:nth-child(6) { animation-duration: 2.0s; animation-delay: 0.4s; background: #fff; box-shadow: 0 0 10px #fff; }