/* ============================================
   Amber CRT Theme - Macomate-inspired
   ============================================ */

:root {
    /* Macomate-inspired Colors */
    --color-primary: #6ec6b9;
    --color-primary-accent: #9fe1d7;
    --color-primary-super: #c6f1ea;
    
    --color-secondary: #794309;
    --color-secondary-accent: #ad8c1d;
    
    /* CRT Amber Theme */
    --color-bg-primary: #3d2510;
    --color-bg-secondary: #4a2f14;
    --color-bg-card: #4a2f14;
    --color-bg-card-hover: #5a3a18;
    
    --color-text-primary: #6ec6b9;
    --color-text-secondary: #9fe1d7;
    --color-text-muted: #4f9f93;
    
    --color-accent: #6ec6b9;
    --color-accent-hover: #9fe1d7;
    --color-accent-glow: rgba(110, 198, 185, 0.4);
    
    --color-synth: #6ec6b9;
    --color-effect: #4f9f93;
    
    --color-border-hover: #6a4520;
    
    --shadow-glow: 0 0 20px rgba(110, 198, 185, 0.5);
    --color-glow: 0 0 12px rgba(110, 198, 185, 0.5);
}

/* CRT Scanline Effect */
.site-header::before,
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.24) 0px,
            rgba(0, 0, 0, 0.24) 1px,
            rgba(110, 198, 185, 0.03) 1px,
            rgba(110, 198, 185, 0.03) 2px,
            transparent 2px,
            transparent 4px
        ),
        linear-gradient(
            180deg,
            rgba(110, 198, 185, 0.015) 0%,
            rgba(0, 0, 0, 0.04) 100%
        );
    pointer-events: none;
    z-index: 2;
}

/* Text glow for amber theme */
body {
    text-shadow: 0 0 5px rgba(110, 198, 185, 0.35);
}

h1, h2, h3 {
    text-shadow: 0 0 10px rgba(110, 198, 185, 0.5);
}

.logo {
    text-shadow: 0 0 15px rgba(110, 198, 185, 0.6);
}

/* Header with video background */
.site-header {
    position: relative;
    height: var(--header-height);
    overflow: hidden;
    background: rgba(20, 5, 2, 0.85);
    opacity: 1;
}

body {
    background: #000;
    overscroll-behavior-y: none;
}

.main-content {
    background: rgba(20, 10, 5, 0.85);
    position: relative;
    z-index: 1;
}

.plugin-card {
    background: rgba(20, 10, 5, 0.85);
}

.plugin-card-image {
    background: transparent;
}

.btn-accent {
    background: rgba(110, 198, 185, 0.18);
    color: var(--color-accent);
    border-color: rgba(110, 198, 185, 0.45);
}

.btn-accent:hover {
    background: rgba(110, 198, 185, 0.28);
    color: var(--color-primary-super);
    border-color: rgba(159, 225, 215, 0.7);
}

.site-footer {
    background: rgba(20, 5, 2, 0.92);
    position: relative;
    z-index: 1;
    padding: var(--spacing-md) var(--spacing-xl);
    overflow: hidden;
}

.header-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#header-canvas {
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 0;
}

.header-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.header-content {
    position: relative;
    z-index: 3;
}

.footer-content {
    position: relative;
    z-index: 3;
}

.footer-content p {
    margin-bottom: 0.2rem;
    line-height: 1.35;
}