/* VHS/Analog Horror Theme CSS */
/* Extract the core aesthetic from MainPage.html for reusability */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=VT323&family=Share+Tech+Mono&display=swap');

:root {
    /* VHS Horror Color Palette */
    --vhs-gray-light: #555555;
    --vhs-gray-dark: #2a2a2a;
    --vhs-gray-darker: #111111;
    --vhs-gray-bg: #050505;
    --vhs-dirty-white: #888888;
    --vhs-blood-red: #3a0a0a;
    --vhs-sickly-yellow: #3a3a15;
    --vhs-noise: #1a1a1a;
    --vhs-hell-gray: #0a0a0a;
    --vhs-corrupt-gray: #333333;
    
    /* Brutal Aesthetic Colors */
    --vhs-pure-black: #000000;
    --vhs-stark-white: #ffffff;
    --vhs-dead-gray: #1a1a1a;
    --vhs-corruption-red: #ff0000;
    --vhs-void-black: #050505;
}

/* Base VHS styling */
.vhs-theme {
    background: var(--vhs-gray-bg);
    color: var(--vhs-dirty-white);
    font-family: 'VT323', monospace;
    overflow-x: hidden;
    min-height: 100vh;
    cursor: default;
    position: relative;
}

/* VHS Static Overlay */
.vhs-static {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.01) 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(85, 85, 85, 0.01) 1px,
            transparent 3px
        );
    pointer-events: none;
    z-index: 1000;
    animation: vhs-static-flicker 0.05s infinite;
}

@keyframes vhs-static-flicker {
    0% { opacity: 0.9; }
    25% { opacity: 0.95; }
    50% { opacity: 0.85; }
    75% { opacity: 0.92; }
    100% { opacity: 0.88; }
}

/* VHS Scan Lines */
.vhs-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.015) 2px,
        rgba(255, 255, 255, 0.015) 4px
    );
    pointer-events: none;
    z-index: 999;
    animation: vhs-tracking 3s infinite;
}

@keyframes vhs-tracking {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(1px); }
}

/* Horror Background Gradient */
.vhs-horror-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(58, 10, 10, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(26, 26, 26, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.35) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(20, 0, 0, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(0, 0, 20, 0.15) 0%, transparent 30%),
        linear-gradient(45deg, transparent 30%, rgba(42, 42, 42, 0.12) 50%, transparent 70%),
        linear-gradient(135deg, rgba(5, 5, 5, 0.15) 0%, transparent 100%),
        linear-gradient(90deg, transparent 48%, rgba(100, 0, 0, 0.03) 49%, rgba(100, 0, 0, 0.03) 51%, transparent 52%);
    animation: vhs-horror-distort 3s infinite, vhs-shadow-movement 8s infinite;
    z-index: -1;
}

@keyframes vhs-shadow-movement {
    0%, 100% { 
        background-position: 0% 0%, 100% 100%, 50% 50%, 10% 80%, 90% 20%, 0% 0%, 0% 0%, 0% 0%;
    }
    25% { 
        background-position: 5% 10%, 95% 90%, 45% 55%, 15% 75%, 85% 25%, 10% 10%, 10% 10%, 10% 10%;
    }
    50% { 
        background-position: 10% 5%, 90% 95%, 55% 45%, 5% 85%, 95% 15%, 5% 5%, 5% 5%, 5% 5%;
    }
    75% { 
        background-position: 15% 15%, 85% 85%, 40% 60%, 20% 70%, 80% 30%, 15% 15%, 15% 15%, 15% 15%;
    }
}

@keyframes vhs-horror-distort {
    0%, 100% { opacity: 0.8; transform: scale(1) rotate(0deg); }
    20% { opacity: 0.9; transform: scale(1.005) rotate(0.1deg) translate(1px, 0px); }
    40% { opacity: 0.7; transform: scale(0.995) rotate(-0.1deg) translate(-1px, 1px); }
    60% { opacity: 0.85; transform: scale(1.01) rotate(0.05deg) translate(0px, -1px); }
    80% { opacity: 0.75; transform: scale(0.99) rotate(-0.05deg) translate(1px, 1px); }
}

/* VHS Typography */
.vhs-title {
    font-size: clamp(2rem, 8vw, 6rem);
    font-weight: 400;
    font-family: 'Courier Prime', monospace;
    color: var(--vhs-dirty-white);
    text-shadow: 
        2px 2px 0px var(--vhs-gray-dark),
        4px 4px 0px var(--vhs-gray-darker);
    animation: vhs-title-degrade 3s infinite;
    position: relative;
    letter-spacing: 2px;
}

.vhs-title::before {
    content: attr(data-glitch-text);
    position: absolute;
    top: 2px;
    left: 2px;
    color: var(--vhs-blood-red);
    opacity: 0.6;
    animation: vhs-horror-glitch 4s infinite;
}

.vhs-title::after {
    content: attr(data-glitch-alt);
    position: absolute;
    top: -1px;
    left: -1px;
    color: var(--vhs-gray-light);
    opacity: 0.4;
    animation: vhs-horror-glitch-alt 4.5s infinite;
}

@keyframes vhs-title-degrade {
    0%, 95% { filter: none; }
    96% { filter: hue-rotate(180deg) contrast(2); }
    97% { filter: none; }
    98% { filter: invert(0.1); }
    99%, 100% { filter: none; }
}

@keyframes vhs-horror-glitch {
    0%, 90% { 
        clip: rect(0, 900px, 0, 0); 
        transform: translate(0); 
    }
    91% { 
        clip: rect(10px, 900px, 30px, 0); 
        transform: translate(-2px, 1px); 
    }
    92% { 
        clip: rect(20px, 900px, 50px, 0); 
        transform: translate(1px, -1px); 
    }
    93% { 
        clip: rect(0, 900px, 0, 0); 
        transform: translate(0); 
    }
    94% { 
        clip: rect(40px, 900px, 60px, 0); 
        transform: translate(-1px, 2px); 
    }
    95%, 100% { 
        clip: rect(0, 900px, 0, 0); 
        transform: translate(0); 
    }
}

@keyframes vhs-horror-glitch-alt {
    0%, 85% { 
        clip: rect(0, 900px, 0, 0); 
        transform: translate(0); 
    }
    86% { 
        clip: rect(5px, 900px, 25px, 0); 
        transform: translate(1px, -1px); 
    }
    87% { 
        clip: rect(30px, 900px, 45px, 0); 
        transform: translate(-1px, 1px); 
    }
    88%, 100% { 
        clip: rect(0, 900px, 0, 0); 
        transform: translate(0); 
    }
}

.vhs-subtitle {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: var(--vhs-gray-light);
    animation: vhs-flicker-horror 4s infinite;
    letter-spacing: 1px;
}

@keyframes vhs-flicker-horror {
    0%, 94% { opacity: 0.7; }
    95% { opacity: 0.1; }
    96% { opacity: 0.9; }
    97% { opacity: 0.2; }
    98%, 100% { opacity: 0.7; }
}

/* VHS Text Effects */
.vhs-corrupted-text {
    font-family: 'Courier Prime', monospace;
    font-size: 1.2rem;
    color: var(--vhs-sickly-yellow);
    animation: vhs-text-corruption 2s infinite;
    text-shadow: 
        1px 1px 0 var(--vhs-blood-red),
        -1px -1px 0 var(--vhs-gray-dark);
    letter-spacing: 2px;
}

@keyframes vhs-text-corruption {
    0%, 90% { 
        transform: translate(0);
        filter: none;
    }
    91% { 
        transform: translate(-1px, 1px);
        filter: contrast(2);
    }
    92% { 
        transform: translate(1px, -1px);
        filter: hue-rotate(180deg);
    }
    93%, 100% { 
        transform: translate(0);
        filter: none;
    }
}

/* VHS Cards */
.vhs-card {
    background: linear-gradient(135deg, var(--vhs-gray-darker), var(--vhs-gray-dark));
    border: 1px solid var(--vhs-gray-light);
    border-radius: 0;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(74, 14, 14, 0.2);
    filter: contrast(1.1) brightness(0.9);
}

.vhs-card:hover {
    transform: translateY(-2px);
    border-color: var(--vhs-blood-red);
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(74, 14, 14, 0.4);
    animation: vhs-card-degrade 1s, vhs-chromatic-aberration 0.5s;
}

@keyframes vhs-card-degrade {
    0%, 95% { filter: contrast(1.1) brightness(0.9); }
    96% { filter: contrast(2) brightness(0.5) hue-rotate(180deg); }
    97% { filter: contrast(1.1) brightness(0.9); }
    98% { filter: invert(0.1) brightness(0.8); }
    99%, 100% { filter: contrast(1.1) brightness(0.9); }
}

/* VHS Buttons/Links */
.vhs-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(45deg, var(--vhs-blood-red), var(--vhs-gray-dark));
    color: var(--vhs-dirty-white);
    text-decoration: none;
    border: 1px solid var(--vhs-gray-light);
    font-weight: 400;
    font-family: 'VT323', monospace;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.vhs-button:hover {
    background: linear-gradient(45deg, var(--vhs-gray-dark), var(--vhs-blood-red));
    border-color: var(--vhs-blood-red);
    animation: vhs-link-flicker 1s;
}

@keyframes vhs-link-flicker {
    0%, 90% { opacity: 1; }
    91% { opacity: 0.3; }
    92% { opacity: 1; }
    93% { opacity: 0.5; }
    94%, 100% { opacity: 1; }
}

/* Film Grain Overlay */
.vhs-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, transparent 1px, rgba(255,255,255,0.02) 1px);
    background-size: 2px 2px;
    pointer-events: none;
    z-index: 1001;
    animation: vhs-grain-shift 0.2s infinite;
}

/* Subliminal corruption overlay */
.vhs-theme::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 95%, rgba(85, 85, 85, 0.03) 97%, transparent 100%),
        linear-gradient(0deg, transparent 90%, rgba(42, 42, 42, 0.05) 92%, transparent 100%);
    pointer-events: none;
    z-index: 1002;
    animation: vhs-corruption-sweep 7s infinite;
}

@keyframes vhs-corruption-sweep {
    0%, 90% { transform: translateX(-100%); opacity: 0; }
    91% { transform: translateX(0%); opacity: 1; }
    95% { transform: translateX(20%); opacity: 0.8; }
    100% { transform: translateX(100%); opacity: 0; }
}

@keyframes vhs-grain-shift {
    0%, 100% { transform: translate(0, 0); }
    16% { transform: translate(-1px, 1px); }
    33% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, -1px); }
    66% { transform: translate(1px, 1px); }
    83% { transform: translate(0px, -1px); }
}

@keyframes vhs-chromatic-aberration {
    0% { filter: contrast(1.1) brightness(0.9); }
    50% { filter: contrast(1.1) brightness(0.9) drop-shadow(2px 0 0 red) drop-shadow(-2px 0 0 cyan); }
    100% { filter: contrast(1.1) brightness(0.9); }
}

/* Subliminal Text */
.vhs-subliminal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'VT323', monospace;
    font-size: 2rem;
    color: var(--vhs-corrupt-gray);
    opacity: 0;
    pointer-events: none;
    z-index: 998;
    white-space: nowrap;
    animation: vhs-subliminal-flash 12s infinite;
}

@keyframes vhs-subliminal-flash {
    0%, 94% { opacity: 0; }
    95% { opacity: 0.4; }
    95.5% { opacity: 0; }
    96% { opacity: 0.3; }
    96.5% { opacity: 0; }
    97% { opacity: 0.5; }
    97.2% { opacity: 0; }
    100% { opacity: 0; }
}

/* VHS Grid Layout */
.vhs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .vhs-title {
        font-size: 3rem;
    }
    
    .vhs-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Utility classes for quick application */
.vhs-text-mono { font-family: 'VT323', monospace; }
.vhs-text-mono-alt { font-family: 'Courier Prime', monospace; }
.vhs-text-tech { font-family: 'Share Tech Mono', monospace; }

.vhs-color-primary { color: var(--vhs-dirty-white); }
.vhs-color-accent { color: var(--vhs-sickly-yellow); }
.vhs-color-danger { color: var(--vhs-blood-red); }
.vhs-color-muted { color: var(--vhs-gray-light); }

.vhs-bg-dark { background: var(--vhs-gray-bg); }
.vhs-bg-darker { background: var(--vhs-gray-darker); }

/* ===== BRUTAL AESTHETIC ENHANCEMENTS ===== */
/* Aggressive corruption and stark contrast styles */

/* Brutal Text Corruption */
.vhs-brutal-text {
    font-family: 'VT323', monospace;
    font-size: 2.5rem;
    color: var(--vhs-stark-white);
    background: var(--vhs-pure-black);
    padding: 1rem 2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: vhs-brutal-flicker 0.1s infinite, vhs-brutal-corruption 3s infinite;
}

.vhs-brutal-text::before {
    content: attr(data-brutal-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--vhs-pure-black);
    color: var(--vhs-corruption-red);
    z-index: 2;
    opacity: 0;
    animation: vhs-brutal-glitch 0.3s infinite;
}

.vhs-brutal-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        var(--vhs-stark-white) 50%, 
        transparent);
    z-index: 3;
    animation: vhs-brutal-sweep 2s infinite;
}

@keyframes vhs-brutal-flicker {
    0%, 95% { opacity: 1; }
    96% { opacity: 0.1; }
    97% { opacity: 1; }
    98% { opacity: 0.3; }
    99%, 100% { opacity: 1; }
}

@keyframes vhs-brutal-corruption {
    0%, 90% { 
        filter: contrast(1); 
        transform: scale(1); 
    }
    91% { 
        filter: contrast(3) invert(1); 
        transform: scale(1.02) skew(2deg); 
    }
    93% { 
        filter: contrast(1); 
        transform: scale(1); 
    }
    95% { 
        filter: contrast(2) brightness(0.1); 
        transform: scale(0.98) skew(-1deg); 
    }
    97%, 100% { 
        filter: contrast(1); 
        transform: scale(1); 
    }
}

@keyframes vhs-brutal-glitch {
    0%, 85% { opacity: 0; }
    86% { opacity: 1; transform: translateX(-2px); }
    87% { opacity: 0; }
    88% { opacity: 1; transform: translateX(2px); }
    89%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes vhs-brutal-sweep {
    0% { left: -100%; }
    50% { left: -100%; }
    52% { left: 100%; }
    100% { left: 100%; }
}

/* Stark Horror Cards */
.vhs-brutal-card {
    background: var(--vhs-pure-black);
    border: 2px solid var(--vhs-stark-white);
    color: var(--vhs-stark-white);
    padding: 2rem;
    margin: 1rem 0;
    font-family: 'VT323', monospace;
    position: relative;
    overflow: hidden;
    transition: all 0.1s ease;
}

.vhs-brutal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 2px
        );
    z-index: 1;
    animation: vhs-brutal-static 0.05s infinite;
}

.vhs-brutal-card:hover {
    background: var(--vhs-stark-white);
    color: var(--vhs-pure-black);
    border-color: var(--vhs-corruption-red);
    animation: vhs-brutal-invert 0.2s;
}

@keyframes vhs-brutal-static {
    0% { opacity: 0.05; transform: translateY(0); }
    50% { opacity: 0.1; transform: translateY(1px); }
    100% { opacity: 0.05; transform: translateY(0); }
}

@keyframes vhs-brutal-invert {
    0%, 100% { filter: invert(0); }
    25% { filter: invert(1); }
    50% { filter: invert(0) contrast(2); }
    75% { filter: invert(1); }
}

/* Pixelated Corruption Effect */
.vhs-pixelated {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: contrast(2) brightness(0.8);
    animation: vhs-pixel-corruption 4s infinite;
}

@keyframes vhs-pixel-corruption {
    0%, 90% { 
        filter: contrast(2) brightness(0.8); 
        transform: scale(1); 
    }
    91% { 
        filter: contrast(5) brightness(0.3) saturate(0); 
        transform: scale(1.01); 
    }
    93% { 
        filter: contrast(2) brightness(0.8); 
        transform: scale(1); 
    }
    95% { 
        filter: contrast(1) brightness(1.2) saturate(2); 
        transform: scale(0.99); 
    }
    97%, 100% { 
        filter: contrast(2) brightness(0.8); 
        transform: scale(1); 
    }
}

/* Brutal Static Overlay */
.vhs-brutal-static {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            var(--vhs-pure-black) 0px,
            transparent 1px,
            var(--vhs-stark-white) 2px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            var(--vhs-dead-gray) 1px,
            transparent 2px
        );
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    animation: vhs-brutal-static-chaos 0.03s infinite;
}

@keyframes vhs-brutal-static-chaos {
    0% { 
        opacity: 0.03; 
        transform: translate(0, 0); 
        filter: invert(0); 
    }
    10% { 
        opacity: 0.08; 
        transform: translate(1px, -1px); 
        filter: invert(0); 
    }
    20% { 
        opacity: 0.02; 
        transform: translate(-1px, 1px); 
        filter: invert(1); 
    }
    30% { 
        opacity: 0.06; 
        transform: translate(0, -1px); 
        filter: invert(0); 
    }
    40% { 
        opacity: 0.04; 
        transform: translate(1px, 0); 
        filter: invert(1); 
    }
    50% { 
        opacity: 0.07; 
        transform: translate(-1px, -1px); 
        filter: invert(0); 
    }
    60% { 
        opacity: 0.03; 
        transform: translate(0, 1px); 
        filter: invert(1); 
    }
    70% { 
        opacity: 0.05; 
        transform: translate(1px, 1px); 
        filter: invert(0); 
    }
    80% { 
        opacity: 0.08; 
        transform: translate(-1px, 0); 
        filter: invert(1); 
    }
    90% { 
        opacity: 0.02; 
        transform: translate(0, 0); 
        filter: invert(0); 
    }
    100% { 
        opacity: 0.03; 
        transform: translate(0, 0); 
        filter: invert(0); 
    }
}

/* Brutal Theme Modifier */
.vhs-theme.brutal {
    background: var(--vhs-pure-black);
    color: var(--vhs-stark-white);
}

.vhs-theme.brutal .vhs-title {
    color: var(--vhs-stark-white);
    text-shadow: 
        2px 2px 0 var(--vhs-pure-black),
        -2px -2px 0 var(--vhs-corruption-red);
}

.vhs-theme.brutal .vhs-card {
    border-color: var(--vhs-stark-white);
    background: linear-gradient(135deg, var(--vhs-pure-black), var(--vhs-dead-gray));
}

/* Corrupted Name/Text Effect */
.vhs-name-corruption {
    font-family: 'VT323', monospace;
    font-size: 3rem;
    font-weight: bold;
    color: var(--vhs-stark-white);
    background: var(--vhs-pure-black);
    padding: 1rem 2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 3px solid var(--vhs-stark-white);
    animation: vhs-name-chaos 0.2s infinite;
}

.vhs-name-corruption::before {
    content: attr(data-name);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--vhs-pure-black);
    color: var(--vhs-corruption-red);
    z-index: 2;
    opacity: 0;
    font-weight: bold;
    padding: 1rem 2rem;
    animation: vhs-name-glitch-text 0.5s infinite;
}

@keyframes vhs-name-chaos {
    0%, 85% { 
        filter: contrast(1) brightness(1); 
        transform: scale(1); 
        border-color: var(--vhs-stark-white);
    }
    86% { 
        filter: contrast(3) brightness(0.5) hue-rotate(180deg); 
        transform: scale(1.02) skew(1deg); 
        border-color: var(--vhs-corruption-red);
    }
    88% { 
        filter: contrast(1) brightness(1); 
        transform: scale(1); 
        border-color: var(--vhs-stark-white);
    }
    90% { 
        filter: contrast(2) brightness(1.5) saturate(0); 
        transform: scale(0.98) skew(-1deg); 
        border-color: var(--vhs-corruption-red);
    }
    92%, 100% { 
        filter: contrast(1) brightness(1); 
        transform: scale(1); 
        border-color: var(--vhs-stark-white);
    }
}

@keyframes vhs-name-glitch-text {
    0%, 80% { opacity: 0; transform: translateX(0); }
    81% { opacity: 1; transform: translateX(-3px); }
    83% { opacity: 0; transform: translateX(3px); }
    85% { opacity: 1; transform: translateX(-1px); }
    87%, 100% { opacity: 0; transform: translateX(0); }
}