/* ==========================================================================
   SocialDebug.Org -- Styles
   Colors: #0d1117, #161b22, #c9d1d9, #e6edf3, #da3633, #d29922, #238636,
           #58a6ff, #bc3fbc, #30363d
   Fonts: Space Grotesk, IBM Plex Mono, Source Serif 4
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background: #0d1117;
    color: #c9d1d9;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.75;
    overflow-x: hidden;
}

/* --- SVG Noise Filter (global) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ==========================================================================
   TERMINAL BOOT OVERLAY
   ========================================================================== */
#terminal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0d1117;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

#terminal-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#terminal-overlay.hidden {
    display: none;
}

#terminal-content {
    max-width: 720px;
    width: 90%;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #238636;
}

.terminal-line {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    opacity: 0;
    animation: typeIn 0.5s steps(40) forwards;
}

@keyframes typeIn {
    0% {
        width: 0;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

.terminal-line .severity-critical {
    color: #da3633;
    font-weight: 500;
}

.terminal-line .severity-warning {
    color: #d29922;
    font-weight: 500;
}

.terminal-line .severity-patched {
    color: #238636;
    font-weight: 500;
}

/* Blinking cursor */
.terminal-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    background: #238636;
    vertical-align: text-bottom;
    animation: cursorBlink 530ms steps(1) infinite;
    margin-left: 2px;
}

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

/* ==========================================================================
   GLITCH TEAR STRIP
   ========================================================================== */
#glitch-tear-strip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 9000;
    background: #bc3fbc;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#glitch-tear-strip.visible {
    opacity: 1;
    animation: glitchTear 0.4s steps(3) 1;
}

@keyframes glitchTear {
    0% {
        transform: translateX(-10px) scaleY(2);
        background: #bc3fbc;
    }
    33% {
        transform: translateX(8px) scaleY(0.5);
        background: #da3633;
    }
    66% {
        transform: translateX(-5px) scaleY(1.5);
        background: #58a6ff;
    }
    100% {
        transform: translateX(0) scaleY(1);
        background: #bc3fbc;
    }
}

/* ==========================================================================
   SIDE NAVIGATION
   ========================================================================== */
#side-nav {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    background: rgba(13, 17, 23, 0.85);
    border-right: 1px solid #30363d;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#side-nav.visible {
    opacity: 1;
}

.nav-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    color: #c9d1d9;
    text-decoration: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    opacity: 0.5;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.nav-label:hover {
    opacity: 0.8;
    color: #58a6ff;
}

.nav-label.active {
    opacity: 1;
    color: #58a6ff;
    animation: navPulse 2s ease-in-out infinite;
}

@keyframes navPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
#main-content {
    margin-left: 48px;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#main-content.visible {
    opacity: 1;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
#hero {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 100px 10% 60px;
}

#hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: #e6edf3;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.glitch-text {
    position: relative;
    display: inline-block;
    color: #e6edf3;
}

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

.glitch-text::before {
    color: #da3633;
    clip-path: inset(0 0 65% 0);
    animation: glitchTop 3s steps(3) infinite;
}

.glitch-text::after {
    color: #58a6ff;
    clip-path: inset(65% 0 0 0);
    animation: glitchBottom 3s steps(3) infinite;
}

@keyframes glitchTop {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, -1px); }
    94% { transform: translate(3px, 1px); }
    96% { transform: translate(-2px, 0); }
}

@keyframes glitchBottom {
    0%, 90%, 100% { transform: translate(0); }
    91% { transform: translate(2px, 1px); }
    93% { transform: translate(-3px, -1px); }
    95% { transform: translate(1px, 0); }
}

.hero-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    font-weight: 400;
    color: #58a6ff;
    margin-top: 16px;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   BINARY DATA STREAM
   ========================================================================== */
.binary-stream {
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: relative;
    background: #0d1117;
}

.binary-stream::before {
    content: '01001000 01101111 01110101 01110011 01101001 01101110 01100111 00100000 01001000 01100101 01100001 01101100 01110100 01101000 00100000 01000101 01100100 01110101 01100011 01100001 01110100 01101001 01101111 01101110 00100000 01001010 01110101 01110011 01110100 01101001 01100011 01100101 00100000 01000110 01101111 01101111 01100100';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: #30363d;
    letter-spacing: 2px;
    animation: binaryScroll 60s linear infinite;
}

@keyframes binaryScroll {
    0% { transform: translateY(-50%) translateX(0); }
    100% { transform: translateY(-50%) translateX(-50%); }
}

/* ==========================================================================
   DIAGNOSTIC CARDS
   ========================================================================== */
.diagnostic-card {
    width: 85%;
    margin: 40px auto;
    background: #161b22;
    border-radius: 4px;
    border: 1px solid #30363d;
    border-left-width: 3px;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.diagnostic-card.card-right {
    transform: translateX(40px);
}

.diagnostic-card.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Z-pattern offset */
.card-left {
    margin-left: 7.5%;
    margin-right: auto;
}

.card-right {
    margin-right: 7.5%;
    margin-left: auto;
}

/* Severity borders */
.severity-border-critical {
    border-left-color: #da3633;
}

.severity-border-warning {
    border-left-color: #d29922;
}

.severity-border-patched {
    border-left-color: #238636;
}

/* Severity border animation */
.diagnostic-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.8s ease;
}

.diagnostic-card.visible::after {
    transform: scaleY(1);
}

.severity-border-critical::after {
    background: #da3633;
}

.severity-border-warning::after {
    background: #d29922;
}

.severity-border-patched::after {
    background: #238636;
}

/* Card noise texture */
.diagnostic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 1;
}

/* Card header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #30363d;
    position: relative;
    z-index: 2;
}

.status-code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: #e6edf3;
    letter-spacing: 0.05em;
}

/* Severity Badges */
.severity-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.badge-critical {
    background: rgba(218, 54, 51, 0.15);
    color: #da3633;
    border: 1px solid rgba(218, 54, 51, 0.4);
}

.badge-warning {
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
    border: 1px solid rgba(210, 153, 34, 0.4);
}

.badge-patched {
    background: rgba(35, 134, 54, 0.15);
    color: #238636;
    border: 1px solid rgba(35, 134, 54, 0.4);
}

/* Card Body */
.card-body {
    display: flex;
    position: relative;
    z-index: 2;
}

/* Stack Trace Column */
.stack-trace {
    width: 35%;
    padding: 24px;
    border-right: 1px dashed #30363d;
}

.stack-trace h3,
.analysis h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #e6edf3;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Timeline */
.timeline {
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    border-left: 1px dashed #30363d;
}

.timeline-node {
    position: relative;
    padding: 8px 0 8px 16px;
}

.timeline-node::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.node-critical::before {
    background: #da3633;
    box-shadow: 0 0 6px rgba(218, 54, 51, 0.5);
}

.node-warning::before {
    background: #d29922;
    box-shadow: 0 0 6px rgba(210, 153, 34, 0.5);
}

.node-patched::before {
    background: #238636;
    box-shadow: 0 0 6px rgba(35, 134, 54, 0.5);
}

.timeline-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: #58a6ff;
    display: block;
}

.timeline-event {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.775rem;
    font-weight: 400;
    color: #c9d1d9;
    line-height: 1.5;
    display: block;
}

/* Analysis Column */
.analysis {
    width: 65%;
    padding: 24px;
}

.analysis p {
    margin-bottom: 16px;
}

/* Counter Stats */
.counter-stat {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15em;
    display: inline;
}

.severity-text-critical {
    color: #da3633;
}

.severity-text-warning {
    color: #d29922;
}

.severity-text-patched {
    color: #238636;
}

/* Proposed Fix Section */
.proposed-fix {
    margin-top: 20px;
    padding: 20px;
    background: #0d1f0d;
    border-left: 3px solid #238636;
    border-radius: 2px;
}

.proposed-fix h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #238636;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.proposed-fix p {
    font-weight: 400;
    color: #c9d1d9;
    opacity: 0.9;
    margin-bottom: 0;
}

/* Glitch on badge hover */
.severity-badge:hover {
    cursor: default;
}

.diagnostic-card.micro-glitch {
    animation: microGlitch 150ms steps(2) 1;
}

@keyframes microGlitch {
    0% { transform: translateX(0); }
    50% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.diagnostic-card.micro-glitch .card-header .status-code {
    text-shadow: -1px 0 #da3633, 1px 0 #58a6ff;
}

/* ==========================================================================
   DIAGONAL SECTION ANGLES
   ========================================================================== */
.diagnostic-card {
    clip-path: polygon(0 0, 100% 8px, 100% calc(100% - 8px), 0 100%);
}

/* Reduce diagonal clip on mobile for readability */
@media (max-width: 768px) {
    .diagnostic-card {
        clip-path: polygon(0 0, 100% 4px, 100% calc(100% - 4px), 0 100%);
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#site-footer {
    padding: 60px 10% 40px;
    border-top: 1px solid #30363d;
    margin-top: 60px;
}

.footer-terminal {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.875rem;
    color: #238636;
    line-height: 2;
    margin-bottom: 24px;
}

.terminal-prompt {
    color: #58a6ff;
    user-select: none;
}

.footer-credit {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: #30363d;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    #side-nav {
        display: none;
    }

    #main-content {
        margin-left: 0;
    }

    .diagnostic-card {
        width: 95%;
        margin-left: 2.5% !important;
        margin-right: 2.5% !important;
    }

    .card-body {
        flex-direction: column;
    }

    .stack-trace {
        width: 100%;
        border-right: none;
        border-bottom: 1px dashed #30363d;
    }

    .analysis {
        width: 100%;
    }
}

@media (max-width: 600px) {
    #hero {
        padding: 80px 6% 40px;
    }

    #hero h1 {
        font-size: 2rem;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .status-code {
        font-size: 0.7rem;
    }
}