/* --- 1. SETUP & COLOR PALETTE --- */
:root {
    --bg-color: #0d0221;
    --text-color: #c0c0c0;
    --accent-pink: #ff00c1;
    --accent-cyan: #00f6ff;
    --accent-red: #e74c47;
    --font-main: 'VT323', monospace;
}

/* --- 2. GENERAL STYLING --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 22px; /* Default for larger screens */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 0; /* Explicitly set body z-index to 0 for clear stacking context */
}

h1, h2 {
    color: var(--accent-red);
    text-transform: uppercase;
    margin-bottom: 0px;
}

/* General H1 styling for content, not the main site title */
h1 {
    font-size: 3rem;
    text-shadow:
        0 0 5px var(--accent-red),
        0 0 10px var(--accent-red),
        0 0 20px var(--accent-red);
    margin: 0 0 1rem 0;
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: var(--bg-color);
    background-color: var(--accent-cyan);
    text-shadow: 0 0 5px var(--bg-color);
}

/* --- 3. THREE COLUMN GRID LAYOUT --- */
.site-wrapper {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr; /* Default for larger screens */
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sidebar-left main sidebar-right"
        "footer footer footer";
    gap: 20px; /* Default gap */
    padding: 20px; /* Default padding */
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
    z-index: 1; /* Set site-wrapper z-index to 1, above body */
}

/* --- 4. GRID AREA STYLING --- */
/* .site-header rule is removed as the element no longer exists in HTML */

.logo-area {
    position: relative;
    overflow: hidden;
    width: 246px; /* Default fixed width */
    height: 246px; /* Default fixed height */
    margin: 20px auto; /* Centered in sidebar, added some margin for spacing */
}

.frame-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.avatar-image {
    position: absolute;
    width: 202px; /* Default fixed width */
    height: 202px; /* Default fixed height */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.title-area {
    padding: 10px 20px; /* Adjust padding for sidebar */
    text-align: center; /* Center align content in sidebar */
    margin-bottom: 5px; /* Reduced space before the logo */
}

.title-area h1 {
    color: var(--accent-red); /* Keep the red color */
    font-size: 2.5rem; /* Smaller font size for sidebar H1 */
    text-shadow:
        0 0 5px var(--accent-red),
        0 0 10px var(--accent-red); /* Slightly reduced glow */
    margin: 0; /* Remove default margin */
    line-height: 1.2; /* Adjust line height */
}

.title-area .connection-status { /* New class for the connection status text */
    color: var(--accent-red); /* Keep the red color for status */
    font-size: 1.2rem; /* Size for the status text */
    margin-top: 10px; /* Space below the H1 */
    text-shadow:
        0 0 3px var(--accent-red),
        0 0 5px var(--accent-red); /* Subtle glow */
}


.left-sidebar,
.main-content,
.right-sidebar {
    padding: 20px;
    border: 1px solid var(--accent-cyan);
    background-color: var(--bg-color); /* Added background color */
}

.site-footer {
    padding: 20px;
    border: 1px solid var(--accent-cyan); /* Footer border was set to 0px, keeping it */
    background-color: var(--bg-color); /* Ensure footer also has background color */
}

.left-sidebar {
    grid-area: sidebar-left;
    text-align: center; /* Keep text centered in sidebar */
    display: flex; /* Use flexbox to arrange content vertically */
    flex-direction: column;
    align-items: center; /* Center items horizontally within the flex container */
}

.left-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
    width: 100%; /* Ensure nav takes full width for consistent centering */
}

.right-sidebar { grid-area: sidebar-right; text-align: center; }
.site-footer { grid-area: footer; text-align: center; }

/* --- NEW: Full-page background video styles --- */
.body-bg-video-container {
    position: fixed; /* Fixed to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Ensures it stays behind all other content */
    opacity: 0.2; /* Adjust this value for desired transparency */
}

.body-bg-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers container without distortion */
    display: block;
}

/* --- 6. BLOG POST STYLING --- */
.blog-post {
    text-align: left;
    border-bottom: 1px solid var(--accent-cyan);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.main-content > *:not(.main-content-bg-video) {
    position: relative;
    z-index: 1;
}


.post-meta {
    font-size: 0.9rem;
    color: var(--accent-pink);
    margin-bottom: 1rem;
}

.blog-post h2 a {
    text-decoration: none;
}

/* --- 7. MISC & NEW STYLES --- */
.video-embed {
    margin-top: 20px;
}

/* --- RESPONSIVE VIDEO EMBEDS --- */
.video-wrapper {
    position: relative;
    padding-bottom: 23.65%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border: 1px dashed var(--accent-pink);
    margin-bottom: 1rem;
    /* New styles for desktop size */
    max-width: 560px; /* Limit the width of the video wrapper on desktop to 560px */
    margin-left: 0; /* Center the video wrapper */
    margin-right: auto; /* Center the video wrapper */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 315px;
}

/* --- 8. ANIMATED PANEL OVERLAY --- */
.logo-area::after,
.left-sidebar::after,
.title-area::after,
.main-content::after,
.right-sidebar::after,
.site-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(20, 20, 20, 0.4) 0px,
        rgba(20, 20, 20, 0.4) 1px,
        transparent 1px,
        transparent 2px
    );
    animation: static-flicker 0.2s infinite;
    pointer-events: none;
    z-index: 2; /* Adjusted z-index to be above content (z-index:1) within their parent boxes */
}

@keyframes static-flicker {
    0% { opacity: 0.05; transform: translate(0, 0); } /* Reduced opacity */
    20% { opacity: 0.15; transform: translate(-1px, 1px); } /* Reduced opacity */
    40% { opacity: 0.1; transform: translate(1px, -1px); } /* Reduced opacity */
    60% { opacity: 0.2; transform: translate(1px, 2px); } /* Reduced opacity */
    80% { opacity: 0.05; transform: translate(-2px, -1px); } /* Reduced opacity */
    100% { opacity: 0.15; transform: translate(0, 0); } /* Reduced opacity */
}

/* --- 9. CYBERPUNK PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.75s ease-out;
}

.preloader-text {
    font-family: var(--font-main);
    color: var(--accent-cyan);
    text-shadow: 0 0 5px var(--accent-cyan);
    text-align: left;
    white-space: pre-wrap;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- MAIN SITE TITLE (GLITCH EFFECT) --- */
.main-title {
    text-align: center;
    padding: 0;
    margin-bottom: 34px;
    margin-top: 15px;
    position: relative; /* Ensure main-title has a stacking context */
    z-index: 1; /* Place above body background video */
}

.main-title h1 {
    color: var(--accent-cyan);
    font-size: 7rem;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    text-shadow: 0 0 7px var(--accent-pink);
    line-height: 1;
}

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

.main-title h1::before {
    left: 2px;
    text-shadow: -2px 0 var(--accent-pink);
    color: var(--accent-cyan);
    animation: glitch-1 3s infinite linear alternate-reverse;
}

.main-title h1::after {
    left: -2px;
    text-shadow: 2px 0 var(--accent-cyan);
    color: var(--accent-pink);
    animation: glitch-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
    0% { clip-path: inset(15% 0 80% 0); }
    10% { clip-path: inset(55% 0 25% 0); }
    20% { clip-path: inset(20% 0 30% 0); }
    30% { clip-path: inset(90% 0 5% 0); }
    40% { clip-path: inset(40% 0 45% 0); }
    50% { clip-path: inset(60% 0 10% 0); }
    60% { clip-path: inset(85% 0 10% 0); }
    70% { clip-path: inset(5% 0 90% 0); }
    80% { clip-path: inset(30% 0 60% 0); }
    90% { clip-path: inset(70% 0 5% 0); }
    100% { clip-path: inset(45% 0 40% 0); }
}

@keyframes glitch-2 {
    0% { clip-path: inset(80% 0 10% 0); }
    10% { clip-path: inset(10% 0 85% 0); }
    20% { clip-path: inset(45% 0 40% 0); }
    30% { clip-path: inset(5% 0 70% 0); }
    40% { clip-path: inset(65% 0 5% 0); }
    50% { clip-path: inset(35% 0 50% 0); }
    60% { clip-path: inset(95% 0 2% 0); }
    70% { clip-path: inset(25% 0 70% 0); }
    80% { clip-path: inset(50% 0 30% 0); }
    90% { clip-path: inset(5% 0 60% 0); }
    100% { clip-path: inset(75% 0 15% 0); }
}

/* --- BINARY BORDER --- */
.binary-border {
    width: 100%;
    height: 25px;
    background-color: var(--bg-color);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan) inset;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 1; /* Place above body background video */
}

.binary-border::before {
    content: "01000001 01000100 01001101 01001001 01001110 00100000 01000101 01011000 01000011 01000101 01000101 01000100 01010011 00100000 01001000 01000001 01010010 01000001 01000011 01010100 01000101 01010010 00100000 01001100 01001001 01001101 01001001 01010100 00101110 00100000 01000010 01010101 01000110 01000110 01000101 01010010 01001001 01001110 01000111 0010111001000001 01000100 01001101 01001001 01001110 00100000 01000101 01011000 01000011 01000101 01000101 01000100 01010011 00100000 01001000 01000001 01010010 01000001 01000011 01010100 01000101 01010010 00100000 01001100 01001001 01001101 01001001 01010100 00101110 00100000 01000010 01010101 01000110 01000110 01000101 01010010 01001001 01001110 01000111 00101110";
    color: var(--accent-cyan);
    position: absolute;
    left: 0;
    white-space: nowrap;
    animation: scroll-binary 30s linear infinite;
    font-size: 1.5rem;
}

@keyframes scroll-binary {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

/* --- 10. RESPONSIVE STYLES (MOBILE) --- */
@media (max-width: 768px) {
    body {
        font-size: 18px;
    }

    .site-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "sidebar-left"
            "main"
            "sidebar-right"
            "footer";
        padding: 10px;
        gap: 10px;
    }

    .logo-area {
        width: 120px;
        height: 120px;
        margin: 10px auto;
    }

    .avatar-image {
        width: 90px;
        height: 90px;
    }

    .title-area {
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    .title-area h1 {
        font-size: clamp(1.2rem, 5vw, 2.2rem);
        text-shadow:
            0 0 3px var(--accent-red),
            0 0 5px var(--accent-red);
    }

    .title-area .connection-status {
        font-size: 0.9rem;
        margin-top: 5px;
    }

    .main-title {
        margin-bottom: 20px;
    }

    .main-title h1 {
        font-size: 3.5rem;
    }

    .binary-border {
        height: 20px;
        box-shadow: 0 0 5px var(--accent-cyan), 0 0 10px var(--accent-cyan) inset;
    }

    .binary-border::before {
        font-size: 1rem;
        animation-duration: 45s;
    }

    .left-sidebar,
    .main-content,
    .right-sidebar,
    .site-footer {
        padding: 15px;
    }

    .right-sidebar iframe {
        height: 250px;
    }

    /* Mobile-specific style for video-wrapper */
    .video-wrapper {
        max-width: none; /* Remove max-width constraint */
        width: 100%; /* Make it full width */
        margin-left: 0; /* Remove centering margin */
        margin-right: 0; /* Remove centering margin */
    }
}