/**
 * The Redacted Reality - Master Style Sheet
 * Theme: Sci-Fi / Glitch / Dark Tech
 * Colors: Red, Blue, Green, Black
 */

:root {
    /* Color Palette */
    --bg-black: #050505;
    --terminal-green: #00ff41;
    --cyber-blue: #00d4ff;
    --glitch-red: #ff0000;
    --deep-gray: #1a1a1a;
    --text-main: #e0e0e0;
    
    /* Glow Effects */
    --blue-glow: 0 0 10px rgba(0, 212, 255, 0.6);
    --red-glow: 0 0 10px rgba(255, 0, 0, 0.6);
    --green-glow: 0 0 10px rgba(0, 255, 65, 0.6);
}

/* 1. Base Reset & Typography */
body {
    background-color: var(--bg-black);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
}

h1, h2, h3, h4, h5, .orbitron {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* 2. The Futuristic CRT Scanline Effect */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 9999;
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
    opacity: 0.8;
}

/* 3. Global Glitch Animation */
.glitch {
    position: relative;
    display: inline-block;
}

.glitch:hover::before {
    content: attr(data-text);
    position: absolute;
    top: 0; left: -2px;
    width: 100%;
    background: var(--bg-black);
    text-shadow: 2px 0 var(--glitch-red);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 85px, 0); }
    20% { clip: rect(60px, 9999px, 30px, 0); }
    40% { clip: rect(10px, 9999px, 50px, 0); }
    60% { clip: rect(80px, 9999px, 20px, 0); }
    80% { clip: rect(40px, 9999px, 90px, 0); }
    100% { clip: rect(20px, 9999px, 70px, 0); }
}

/* 4. Power-House Components */

/* Futuristic Cards for Articles/Podcasts */
.cyber-card {
    background: var(--deep-gray);
    border-left: 4px solid var(--cyber-blue);
    border-right: 1px solid rgba(0, 212, 255, 0.2);
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    transition: all 0.4s ease;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.cyber-card:hover {
    border-left: 4px solid var(--glitch-red);
    box-shadow: var(--red-glow);
    transform: translateY(-5px);
}

/* Neon Inputs for Login/Forms */
.form-control {
    background-color: #111 !important;
    border: 1px solid #333;
    color: var(--terminal-green) !important;
    font-family: 'Roboto Mono', monospace;
}

.form-control:focus {
    border-color: var(--cyber-blue);
    box-shadow: var(--blue-glow);
}

/* 5. Utility Classes */
.text-glow-blue { text-shadow: var(--blue-glow); }
.text-glow-red { text-shadow: var(--red-glow); }
.text-glow-green { text-shadow: var(--green-glow); }

.border-redacted {
    border: 1px solid var(--glitch-red);
    padding: 10px;
    position: relative;
}

/* Button Styling */
.btn-cyber {
    background: transparent;
    border: 1px solid var(--cyber-blue);
    color: var(--cyber-blue);
    text-transform: uppercase;
    font-family: 'Orbitron';
    transition: 0.3s;
}

.btn-cyber:hover {
    background: var(--cyber-blue);
    color: #000;
    box-shadow: var(--blue-glow);
}

.shadow-red { box-shadow: 0 0 15px rgba(255, 0, 0, 0.2); }
.shadow-blue { box-shadow: 0 0 15px rgba(0, 212, 255, 0.2); }

/* Article Card Specifics */
.article-image-container {
    position: relative;
    border-bottom: 1px solid var(--cyber-blue);
    overflow: hidden;
}

.article-image-container img {
    transition: transform 0.5s ease;
}

.cyber-card:hover .article-image-container img {
    transform: scale(1.1);
    filter: brightness(1.2) sepia(0.3) hue-rotate(180deg); /* Sci-fi glitch look on hover */
}

.category-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 212, 255, 0.8);
    color: #000;
    font-family: 'Orbitron';
    font-size: 0.6rem;
    padding: 3px 8px;
    letter-spacing: 1px;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

.x-small {
    font-size: 0.65rem;
}

.category-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid var(--cyber-blue);
    padding: 2px 10px;
    color: #fff;
    font-size: 0.7rem;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.article-image-container {
    position: relative;
    overflow: hidden;
}

.article-image-container img {
    transition: transform 0.5s ease;
}

.cyber-card:hover img {
    transform: scale(1.1);
}

/* Reading Progress Bar */
.reading-progress-container {
    width: 100%;
    height: 4px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}
.reading-progress-bar {
    height: 4px;
    background: var(--terminal-green);
    width: 0%;
    box-shadow: var(--green-glow);
}

/* Article Content Wrapper */
.article-content-wrapper {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
}

.short-desc-lead {
    color: var(--cyber-blue);
    font-size: 1.1rem;
    border-left: 3px solid var(--cyber-blue);
    padding-left: 20px;
    line-height: 1.4;
    text-shadow: var(--blue-glow);
}

/* Typography Enhancements for Body */
.article-body {
    font-size: 1.15rem; /* Larger font for readability */
    color: #d1d1d1;
    letter-spacing: 0.02rem;
}

.article-body p {
    margin-bottom: 1.8rem;
}

.article-body h2, .article-body h3 {
    color: var(--terminal-green);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: var(--green-glow);
}

/* Author Box Styling */
.author-box-final {
    background: linear-gradient(90deg, #111 0%, #0a0a0a 100%);
}

.img-pixel-border {
    border: 2px solid var(--terminal-green);
    padding: 3px;
    box-shadow: var(--green-glow);
}

/* Make images inside article content responsive */
.article-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--deep-gray);
    margin: 20px 0;
}