/* Dedicated Hacker theme overrides and Matrix rain effect */

/* ===========================
   Hacker Theme
   =========================== */
.hacker-light,
[data-theme="hacker"][data-theme-mode="light"] {
    --color-primary: #00ff00;
    --color-secondary: #005a12;
    --color-accent: #00cc00;
    --color-highlight: #008b1b;
    --color-bg-primary: #f0fff0;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5fff5;
    --color-card-bg: #f0fff0;
    --color-card-border: rgba(0, 0, 0, 0.15);
    --color-text-primary: #000000;
    --color-text-secondary: rgba(0, 0, 0, 0.75);
    --color-text-muted: rgba(0, 0, 0, 0.6);
    --color-header-bg: rgba(240, 255, 240, 0.85);
    --color-border: rgba(0, 0, 0, 0.15);
    --gradient-hero-1: rgba(0, 255, 0, 0.1);
    --gradient-hero-2: rgba(0, 90, 18, 0.08);
    --gradient-hero-3: rgba(0, 204, 0, 0.06);
}

.hacker-dark,
[data-theme="hacker"][data-theme-mode="dark"] {
    --color-primary: #00ff00;
    --color-secondary: #b7e6c1;
    --color-accent: #00cc00;
    --color-highlight: #008b1b;
    --color-bg-primary: #000000;
    --color-bg-secondary: #005500;
    --color-bg-tertiary: #003300;
    --color-card-bg: rgba(0, 85, 0, 0.6);
    --color-card-border: rgba(194, 255, 194, 0.2);
    --color-text-primary: #c2ffc2;
    --color-text-secondary: rgba(194, 255, 194, 0.75);
    --color-text-muted: rgba(194, 255, 194, 0.6);
    --color-header-bg: rgba(0, 0, 0, 0.85);
    --color-border: rgba(194, 255, 194, 0.2);
    --gradient-hero-1: rgba(0, 255, 0, 0.3);
    --gradient-hero-2: rgba(0, 90, 18, 0.2);
    --gradient-hero-3: rgba(0, 204, 0, 0.15);
}

.hacker-light .hero,
[data-theme="hacker"][data-theme-mode="light"] .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #f7fff7;
    background-image:
        radial-gradient(circle at 16% 8%, rgba(0, 110, 24, 0.16), transparent 38%),
        radial-gradient(circle at 82% 0%, rgba(0, 140, 36, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(243, 255, 244, 0.98) 0%, rgba(228, 248, 231, 0.99) 100%);
}

.hacker-dark .hero,
[data-theme="hacker"][data-theme-mode="dark"] .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #000;
    background-image:
        radial-gradient(circle at 16% 8%, rgba(0, 255, 0, 0.1), transparent 36%),
        radial-gradient(circle at 82% 0%, rgba(0, 255, 0, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(0, 18, 0, 0.95) 0%, rgba(0, 0, 0, 0.99) 100%);
}

.matrix-rain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hacker-light .matrix-rain-canvas,
[data-theme="hacker"][data-theme-mode="light"] .matrix-rain-canvas {
    opacity: 0.62;
}

.hacker-dark .matrix-rain-canvas,
[data-theme="hacker"][data-theme-mode="dark"] .matrix-rain-canvas {
    opacity: 0.85;
}

.hacker-light .hero-content,
[data-theme="hacker"][data-theme-mode="light"] .hero-content,
.hacker-dark .hero-content,
[data-theme="hacker"][data-theme-mode="dark"] .hero-content {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 8px rgba(0, 255, 70, 0.45), 0 0 20px rgba(0, 120, 35, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .matrix-rain-canvas {
        display: none;
    }
}