/* ================================
   25 CRAZY THEMES - Everything Changes!
   Click the PROMPTR logo to switch
   ================================ */

/* Theme 1: Default Navy (The Cinematic One) */
html[data-theme="t01"] {
    --bg-primary: #0a1628;
    --bg-secondary: #0d1d35;
    --bg-tertiary: #132744;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.5);
    
    /* Blue Accents for headlines */
    --accent-blue: #3b82f6;
    --accent-light: #60a5fa;
    
    /* Orange for Nav */
    --nav-accent: #ff4d00;
    
    --grain-opacity: 0.08;
    --logo-filter: none;
    --glow-color: rgba(59, 130, 246, 0.2);
}

/* Theme 2: BRUTALIST RAW (Radical Change) */
html[data-theme="t02"] {
    --bg-primary: #ffff00;
    --bg-secondary: #000000;
    --bg-tertiary: #111111;
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #333333;
    --accent-blue: #000000;
    --accent-light: #000000;
    --grain-opacity: 0.4;
    --logo-filter: invert(1);
    --glow-color: rgba(0, 0, 0, 0);
}
html[data-theme="t02"] * { 
    font-family: 'Courier New', Courier, monospace !important; 
    text-transform: uppercase !important;
    border-radius: 0 !important;
}
html[data-theme="t02"] .container { border: 2px solid #000; }
html[data-theme="t02"] .btn-primary { background: #000 !important; color: #ffff00 !important; }

/* Theme 3: ELEGANT WHITE (Pure Light) */
html[data-theme="t03"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eeeeee;
    --text-primary: #111111;
    --text-secondary: #333333;
    --text-muted: #777777;
    --accent-blue: #c5a059;
    --accent-light: #d4af37;
    --grain-opacity: 0.02;
    --logo-filter: brightness(0);
    --glow-color: rgba(197, 160, 89, 0.2);
}
html[data-theme="t03"] body { background-color: #ffffff; }
html[data-theme="t03"] h1, html[data-theme="t03"] h2 { font-weight: 300 !important; letter-spacing: 0.2em !important; }
html[data-theme="t03"] .hero-overlay, html[data-theme="t03"] .gear-preview-overlay { 
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), #ffffff) !important; 
}

/* Theme 4: ACID TRIP (Psychedelic) */
html[data-theme="t04"] {
    --bg-primary: #00ff00;
    --bg-secondary: #ff00ff;
    --bg-tertiary: #0000ff;
    --text-primary: #ffffff;
    --text-secondary: #ffff00;
    --text-muted: #00ffff;
    --accent-blue: #ffffff;
    --accent-light: #ffffff;
    --grain-opacity: 0.5;
    --logo-filter: hue-rotate(90deg) invert(1);
    --glow-color: rgba(255, 255, 255, 0.8);
}
html[data-theme="t04"] body { filter: contrast(1.5) saturate(2); }
html[data-theme="t04"] .hero-video, html[data-theme="t04"] .reel-item video { filter: invert(1) hue-rotate(180deg); }
html[data-theme="t04"] * { cursor: crosshair !important; }

/* Theme 5: NOIR RED (High Contrast Cinema) */
html[data-theme="t05"] {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --bg-tertiary: #222222;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #ff0000;
    --accent-blue: #ff0000;
    --accent-light: #ff0000;
    --grain-opacity: 0.25;
    --logo-filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(6932%) hue-rotate(359deg) brightness(100%) contrast(115%);
    --glow-color: rgba(255, 0, 0, 0.6);
}
html[data-theme="t05"] .hero-video, html[data-theme="t05"] .reel-item video { filter: grayscale(1) contrast(1.2); }
html[data-theme="t05"] .btn-primary { border: 1px solid #ff0000; background: transparent !important; color: #ff0000 !important; }

/* Theme 6: CRT MONITOR (80s Hacker) */
html[data-theme="t06"] {
    --bg-primary: #051105;
    --bg-secondary: #0a1a0a;
    --bg-tertiary: #000000;
    --text-primary: #00ff41;
    --text-secondary: #00cc33;
    --text-muted: #00661a;
    --accent-blue: #00ff41;
    --accent-light: #00ff41;
    --grain-opacity: 0.2;
    --logo-filter: sepia(1) saturate(5) hue-rotate(90deg) brightness(1.2);
    --glow-color: rgba(0, 255, 65, 0.4);
}
html[data-theme="t06"] body::after {
    content: " ";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 3px, 3px 100%;
    z-index: 10000;
    pointer-events: none;
}
html[data-theme="t06"] * { font-family: 'Courier New', Courier, monospace !important; text-shadow: 0 0 8px #00ff41; }
html[data-theme="t06"] .hero-video, html[data-theme="t06"] .reel-item video { filter: grayscale(1) brightness(0.5) contrast(1.5) sepia(1) hue-rotate(90deg); opacity: 0.6; }

/* Theme 7: BAUHAUS MODERNE */
html[data-theme="t07"] {
    --bg-primary: #ffffff;
    --bg-secondary: #ff3333;
    --bg-tertiary: #3333ff;
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #666666;
    --accent-blue: #ffcc00;
    --accent-light: #3333ff;
    --grain-opacity: 0.02;
    --logo-filter: brightness(0);
    --glow-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="t07"] * { font-family: 'Inter', sans-serif !important; font-weight: 900 !important; border-radius: 0 !important; }
html[data-theme="t07"] .btn-primary { background: #000 !important; border: 4px solid #ffcc00 !important; }
html[data-theme="t07"] .hero-video { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 100%); }

/* Theme 8: NEUMORPHIC SOFT (Soft Clay) */
html[data-theme="t08"] {
    --bg-primary: #dde1e7;
    --bg-secondary: #dde1e7;
    --bg-tertiary: #d0d5dc;
    --text-primary: #31344b;
    --text-secondary: #5a5d6e;
    --text-muted: #7f8494;
    --accent-blue: #6d5dfc;
    --accent-light: #8b7fff;
    --grain-opacity: 0.03;
    --logo-filter: grayscale(1) brightness(0.3);
    --glow-color: rgba(109, 93, 252, 0.3);
}
html[data-theme="t08"] body { background: #dde1e7; }
html[data-theme="t08"] .container, html[data-theme="t08"] .btn-primary, html[data-theme="t08"] .reel-item { 
    border-radius: 20px !important; 
    box-shadow: 8px 8px 16px #b8bcc2, -8px -8px 16px #ffffff !important;
}
html[data-theme="t08"] .hero-video, html[data-theme="t08"] .reel-item video { border-radius: 20px !important; filter: saturate(0.7) brightness(1.05); box-shadow: none !important; }
html[data-theme="t08"] .hero-overlay { background: linear-gradient(to bottom, rgba(221,225,231,0.3), rgba(221,225,231,0.95)) !important; }

/* Theme 9: DIGITAL GLITCH (Cyber Chaos) */
html[data-theme="t09"] {
    --bg-primary: #000000;
    --bg-secondary: #1a0033;
    --bg-tertiary: #ff00ff;
    --text-primary: #00ffff;
    --text-secondary: #ff00ff;
    --text-muted: #ffffff;
    --accent-blue: #00ffff;
    --accent-light: #ff00ff;
    --grain-opacity: 0.3;
}
html[data-theme="t09"] h1, html[data-theme="t09"] h2, html[data-theme="t09"] img { animation: jitter 0.1s infinite; filter: hue-rotate(90deg); }
@keyframes jitter { 
    0% { transform: translate(0,0); } 
    25% { transform: translate(2px, -2px); } 
    50% { transform: translate(-2px, 2px); } 
    75% { transform: translate(1px, 1px); } 
}

/* Theme 10: ROYAL GOLD (Luxury Marble) */
html[data-theme="t10"] {
    --bg-primary: #0a0a00;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --text-primary: #d4af37;
    --text-secondary: #c5a059;
    --text-muted: #8c7853;
    --accent-blue: #d4af37;
    --accent-light: #fff;
    --grain-opacity: 0.05;
    --logo-filter: sepia(1) saturate(5) brightness(0.8);
    --glow-color: rgba(212, 175, 55, 0.4);
}
html[data-theme="t10"] body { background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); }
html[data-theme="t10"] h1, html[data-theme="t10"] h2 { font-family: 'Cormorant Garamond', serif !important; text-transform: uppercase !important; letter-spacing: 0.3em !important; }

/* Theme 11: CYBERPUNK YELLOW (2077 Style) */
html[data-theme="t11"] {
    --bg-primary: #fcee0a;
    --bg-secondary: #000000;
    --bg-tertiary: #333333;
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #333333;
    --accent-blue: #00ebeb;
    --accent-light: #000000;
    --grain-opacity: 0.15;
    --logo-filter: brightness(0);
}
html[data-theme="t11"] * { font-family: 'Bebas Neue', sans-serif !important; border-radius: 0 !important; }
html[data-theme="t11"] .btn-primary { background: #000 !important; color: #fcee0a !important; clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%); }

/* Theme 12: PAPER SKETCH (Old Journal) */
html[data-theme="t12"] {
    --bg-primary: #f4f1ea;
    --bg-secondary: #e0ddd5;
    --bg-tertiary: #2b2b2b;
    --text-primary: #2b2b2b;
    --text-secondary: #4a4a4a;
    --text-muted: #8c8c8c;
    --grain-opacity: 0.4;
}
html[data-theme="t12"] * { 
    font-family: 'Cormorant Garamond', serif !important; 
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; 
    border: 2px solid #2b2b2b !important;
}
html[data-theme="t12"] .hero-video { filter: sepia(1) contrast(1.2) brightness(0.9) grayscale(0.5); }

/* Theme 13: INFRARED (Heat Map) */
html[data-theme="t13"] {
    --bg-primary: #000033;
    --bg-secondary: #ff0000;
    --bg-tertiary: #ffff00;
    --text-primary: #ffff00;
    --text-secondary: #00ffff;
    --text-muted: #ffffff;
    --grain-opacity: 0.3;
}
html[data-theme="t13"] body { filter: saturate(5) contrast(2); }
html[data-theme="t13"] .hero-video, html[data-theme="t13"] .reel-item video { filter: hue-rotate(-50deg) invert(0.2) blur(1px); }

/* Theme 14: MINIMALIST ZEN (Soft Gray) */
html[data-theme="t14"] {
    --bg-primary: #f0f0f0;
    --bg-secondary: #e0e0e0;
    --bg-tertiary: #d0d0d0;
    --text-primary: #111111;
    --text-secondary: #333333;
    --text-muted: #666666;
    --accent-blue: #000000;
    --accent-light: #555555;
    --grain-opacity: 0.02;
}
html[data-theme="t14"] * { letter-spacing: 0.2em !important; text-transform: lowercase !important; font-weight: 300 !important; border: none !important; }
html[data-theme="t14"] .hero-video, html[data-theme="t14"] .reel-item video { opacity: 0.4; filter: grayscale(1) contrast(0.8); }

/* Theme 15: RETRO FUTURE (80s Synth) */
html[data-theme="t15"] {
    --bg-primary: #2b1055;
    --bg-secondary: #ff00de;
    --bg-tertiary: #00f6ff;
    --text-primary: #00f6ff;
    --text-secondary: #ff00de;
    --text-muted: #ffffff;
    --accent-blue: #00f6ff;
    --accent-light: #ff00de;
    --grain-opacity: 0.1;
    --logo-filter: hue-rotate(300deg) saturate(2);
}
html[data-theme="t15"] body { background: linear-gradient(180deg, #2b1055 0%, #000000 100%); }
html[data-theme="t15"] h1, html[data-theme="t15"] h2 { text-shadow: 0 0 20px #ff00de, 0 0 40px #00f6ff; }

/* Theme 16: Noir */
html[data-theme="t16"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.5);
    --text-muted: rgba(255, 255, 255, 0.25);
    --accent-blue: #888888;
    --accent-light: #cccccc;
    --grain-opacity: 0.25;
    --logo-filter: grayscale(1) brightness(1.2);
    --glow-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="t16"] img, html[data-theme="t16"] video { filter: grayscale(1); }

/* Theme 17: Retrowave */
html[data-theme="t17"] {
    --bg-primary: #0c0032;
    --bg-secondary: #190061;
    --bg-tertiary: #240090;
    --text-primary: #ff00a0;
    --text-secondary: rgba(255, 0, 160, 0.7);
    --text-muted: rgba(0, 255, 255, 0.5);
    --accent-blue: #00fff9;
    --accent-light: #ff00a0;
    --grain-opacity: 0.12;
    --logo-filter: drop-shadow(0 0 10px #ff00a0) drop-shadow(0 0 20px #00fff9);
    --glow-color: rgba(255, 0, 160, 0.5);
}

/* Theme 18: Autumn */
html[data-theme="t18"] {
    --bg-primary: #1a0f05;
    --bg-secondary: #2d1a0a;
    --bg-tertiary: #4a2810;
    --text-primary: #daa520;
    --text-secondary: rgba(218, 165, 32, 0.7);
    --text-muted: rgba(205, 92, 0, 0.5);
    --accent-blue: #cd5c00;
    --accent-light: #ff8c00;
    --grain-opacity: 0.1;
    --logo-filter: sepia(0.8) saturate(2);
    --glow-color: rgba(205, 92, 0, 0.4);
}

/* Theme 19: Ocean Depths */
html[data-theme="t19"] {
    --bg-primary: #000a14;
    --bg-secondary: #001428;
    --bg-tertiary: #001e3c;
    --text-primary: #00ced1;
    --text-secondary: rgba(0, 206, 209, 0.7);
    --text-muted: rgba(72, 209, 204, 0.5);
    --accent-blue: #008b8b;
    --accent-light: #40e0d0;
    --grain-opacity: 0.08;
    --logo-filter: hue-rotate(160deg) saturate(1.5);
    --glow-color: rgba(0, 139, 139, 0.4);
}

/* Theme 20: Volcano */
html[data-theme="t20"] {
    --bg-primary: #0a0000;
    --bg-secondary: #1a0500;
    --bg-tertiary: #2a0a00;
    --text-primary: #ff4500;
    --text-secondary: rgba(255, 69, 0, 0.7);
    --text-muted: rgba(255, 140, 0, 0.5);
    --accent-blue: #ff6347;
    --accent-light: #ffa500;
    --grain-opacity: 0.15;
    --logo-filter: hue-rotate(0deg) saturate(3) brightness(1.5);
    --glow-color: rgba(255, 69, 0, 0.5);
}

/* Theme 21: Mint Fresh */
html[data-theme="t21"] {
    --bg-primary: #f0fff0;
    --bg-secondary: #e0ffe0;
    --bg-tertiary: #ccffcc;
    --text-primary: #006400;
    --text-secondary: rgba(0, 100, 0, 0.7);
    --text-muted: rgba(46, 139, 87, 0.5);
    --accent-blue: #2e8b57;
    --accent-light: #3cb371;
    --grain-opacity: 0.03;
    --logo-filter: invert(1) hue-rotate(90deg) brightness(0.5);
    --glow-color: rgba(46, 139, 87, 0.3);
}

/* Theme 22: Synthwave */
html[data-theme="t22"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --text-primary: #e94560;
    --text-secondary: rgba(233, 69, 96, 0.7);
    --text-muted: rgba(233, 69, 96, 0.4);
    --accent-blue: #e94560;
    --accent-light: #ff6b6b;
    --grain-opacity: 0.1;
    --logo-filter: hue-rotate(340deg) saturate(2) brightness(1.2);
    --glow-color: rgba(233, 69, 96, 0.5);
}

/* Theme 23: Holographic */
html[data-theme="t23"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #2a2a4e;
    --bg-tertiary: #3a3a6e;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.4);
    --accent-blue: #ff00ff;
    --accent-light: #00ffff;
    --grain-opacity: 0.12;
    --logo-filter: drop-shadow(2px 0 #ff0000) drop-shadow(-2px 0 #00ffff);
    --glow-color: rgba(255, 0, 255, 0.4);
}
html[data-theme="t23"] .hero-title { animation: holographic 3s ease-in-out infinite; }

/* Theme 24: Warm Cream */
html[data-theme="t24"] {
    --bg-primary: #fdf5e6;
    --bg-secondary: #faebd7;
    --bg-tertiary: #ffe4c4;
    --text-primary: #8b4513;
    --text-secondary: rgba(139, 69, 19, 0.7);
    --text-muted: rgba(210, 105, 30, 0.5);
    --accent-blue: #d2691e;
    --accent-light: #cd853f;
    --grain-opacity: 0.04;
    --logo-filter: invert(1) sepia(1) saturate(2) hue-rotate(340deg) brightness(0.6);
    --glow-color: rgba(210, 105, 30, 0.3);
}

/* Theme 25: Electric Storm */
html[data-theme="t25"] {
    --bg-primary: #05050a;
    --bg-secondary: #0a0a14;
    --bg-tertiary: #0f0f1e;
    --text-primary: #00bfff;
    --text-secondary: rgba(0, 191, 255, 0.7);
    --text-muted: rgba(138, 43, 226, 0.5);
    --accent-blue: #8a2be2;
    --accent-light: #00bfff;
    --grain-opacity: 0.18;
    --logo-filter: drop-shadow(0 0 5px #00bfff) drop-shadow(0 0 15px #8a2be2) brightness(1.3);
    --glow-color: rgba(138, 43, 226, 0.5);
}
html[data-theme="t25"] .hero-title { animation: electricPulse 0.5s infinite; }

/* ================================
   Special Animations
   ================================ */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 10px var(--accent-light), 0 0 20px var(--accent-light), 0 0 30px var(--accent-light); }
    20%, 24%, 55% { text-shadow: none; }
}

@keyframes holographic {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
}

@keyframes electricPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ================================
   Apply Variables Everywhere
   ================================ */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Backgrounds */
.logos, .gear-faq, .products {
    background: var(--bg-primary) !important;
}

/* Light backgrounds */
.showreels {
    background: var(--bg-light) !important;
}

.about {
    background: var(--bg-secondary) !important;
}

.team {
    background: var(--bg-light) !important;
}

.hero-overlay {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg-primary) 50%, transparent) 0%,
        color-mix(in srgb, var(--bg-primary) 20%, transparent) 40%,
        color-mix(in srgb, var(--bg-primary) 40%, transparent) 80%,
        color-mix(in srgb, var(--bg-primary) 90%, transparent) 100%
    ) !important;
}

.contact, .gear-intro-section, .gear-testimonials {
    background: var(--bg-secondary) !important;
}


.gear-preview, .gear-cta {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
}

.nav.scrolled {
    /* Removed background: none !important override to allow on-light background to work */
}

/* Text Colors */
h1, h2, h3, h4, .hero-title .line-1, 
.intro-title .line1, .logos-title .line1, .faq-title .line1,
.contact-title, .gear-title, .product-name, .member-name {
    color: var(--text-primary) !important;
}

/* Light background sections - dark text */
.showreels-title .line1 {
    color: var(--bg-primary) !important;
}

.about-title .line1 {
    color: var(--text-primary) !important;
}

.team-title .line1 {
    color: var(--bg-primary) !important;
}

p, .gear-intro, .product-description, .logos-text, .intro-text, .intro-tagline {
    color: var(--text-secondary) !important;
}

.team .team-quote p {
    color: rgba(10, 22, 40, 0.7) !important;
}

.about .about-text, .about .about-text p {
    color: var(--text-secondary) !important;
}

.showreels .intro-text {
    color: rgba(10, 22, 40, 0.7) !important;
}

.intro-label, .gear-label, .logos-label, .faq-label,
.product-category, .scroll-text, .services-strip span {
    color: var(--text-muted) !important;
}

/* Light background sections - dark muted text */
.showreels-label {
    color: rgba(10, 22, 40, 0.5) !important;
}

.about-label {
    color: var(--text-muted) !important;
}

.team-label {
    color: rgba(10, 22, 40, 0.5) !important;
}

.team .member-name {
    color: var(--bg-primary) !important;
}

.team .member-role {
    color: rgba(10, 22, 40, 0.5) !important;
}

/* Accent Colors - All section title .line2 elements get orange */
.intro-title .line2,
.about-title .line2, 
.showreels-title .line2,
.logos-title .line2,
.team-title .line2,
.faq-title .line2,
.hero-title .line-2 em, 
.gear-title .italic, 
.stat-number, 
.intro-stat-number {
    color: var(--accent-light) !important;
}

.contact-email {
    color: var(--text-primary) !important; /* Make email white/primary for better visibility */
}

.product-cta:not(.disabled) {
    background: transparent !important;
    border: 1px solid var(--nav-accent, #ff4d00) !important;
    color: var(--nav-accent, #ff4d00) !important;
}

.product-cta:not(.disabled):hover {
    background: var(--nav-accent, #ff4d00) !important;
    color: #fff !important;
}

.btn-outline {
    border-color: var(--text-muted) !important;
    color: var(--text-primary) !important;
}

.btn-outline:hover {
    background: var(--text-primary) !important;
    color: var(--bg-primary) !important;
}

.services-strip .dot {
    color: var(--accent-light) !important;
}

/* Logo Filter - nur für hero/contact/loader, NICHT für nav-logo (soll immer weiß bleiben) */
.hero-icon, .contact-icon, .loader-icon {
    filter: var(--logo-filter) !important;
    transition: filter 0.5s ease !important;
}

/* Nav Icon bleibt immer weiß/unverändert auf dunklem Hintergrund */
.nav-icon {
    filter: none !important;
    transition: filter 0.5s ease !important;
}

/* Nav Logo Text bleibt weiß auf dunklem Hintergrund */
.nav-logo-text {
    color: #ffffff !important;
}

.nav-logo.on-light .nav-logo-text {
    color: #0a1628 !important;
}

.nav-logo.on-light .nav-icon {
    filter: brightness(0) !important;
}

/* Grain - Overlay mit hohem Kontrast, nicht milchig */
.grain-video {
    opacity: 0.12 !important;
    mix-blend-mode: overlay !important;
    filter: contrast(2) brightness(1.2) !important;
}

/* Cards & Sections */
.product-card, .gear-preview-card {
    background: var(--bg-secondary) !important;
}

.faq-item {
    background: transparent !important;
}

.footer {
    background: var(--bg-primary) !important;
    border-color: color-mix(in srgb, var(--text-primary) 6%, transparent) !important;
}

/* Glow Effects - nur für hero-logo, NICHT für nav-logo */
.hero-logo img {
    filter: var(--logo-filter) drop-shadow(0 0 20px var(--glow-color)) !important;
}

/* Video Logo - Force transparency and blend mode on ALL containers */
.hero-logo, .nav-logo, .hero-logo video, .nav-logo video, .hero-logo a, .nav-logo a, .contact-logo, .contact-logo video {
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Ensure the video itself blends - EXCEPT contact logo which uses container blending */
.hero-logo video, .nav-logo video {
    mix-blend-mode: screen !important;
}

/* Explicitly reset contact-logo container to prevent conflicts */
.contact-logo {
    mix-blend-mode: screen !important;
    isolation: isolate !important;
}

.contact-logo video {
    mix-blend-mode: normal !important;
}

/* Selection */
::selection {
    background: var(--accent-blue) !important;
    color: var(--bg-primary) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--accent-blue) !important;
}

/* Theme indicator */
body::after {
    content: attr(data-theme-name);
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    animation: showThemeName 2s ease forwards;
    pointer-events: none;
    z-index: 10000;
}

@keyframes showThemeName {
    0% { opacity: 0; transform: translateY(10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ================================
   Minimalistic Animations
   ================================ */

/* Smooth fade-in for all sections */
.about, .showreels, .team, .contact, .gear-preview, .logos,
.products, .gear-intro-section, .gear-explain, .gear-testimonials, .gear-faq, .gear-cta {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.about.animate-in, .showreels.animate-in, .team.animate-in, .contact.animate-in, 
.gear-preview.animate-in, .logos.animate-in, .products.animate-in, 
.gear-intro-section.animate-in, .gear-explain.animate-in, 
.gear-testimonials.animate-in, .gear-faq.animate-in, .gear-cta.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered list items */
.product-features li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-card:hover .product-features li {
    opacity: 1;
    transform: translateX(0);
}

/* FAQ items animation */
.faq-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.faq-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.product-features li:nth-child(1) { transition-delay: 0.05s; }
.product-features li:nth-child(2) { transition-delay: 0.1s; }
.product-features li:nth-child(3) { transition-delay: 0.15s; }
.product-features li:nth-child(4) { transition-delay: 0.2s; }
.product-features li:nth-child(5) { transition-delay: 0.25s; }
.product-features li:nth-child(6) { transition-delay: 0.3s; }

/* Hover micro-interactions */
.product-card {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.btn-outline, .product-cta {
    position: relative;
    overflow: hidden;
}

.btn-outline::before, .product-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-outline:hover::before, .product-cta:hover::before {
    width: 300px;
    height: 300px;
}

/* Smooth text reveal */
.hero-title .line-1, .hero-title .line-2, .gear-title .title-line {
    opacity: 0;
    transform: translateY(20px);
    animation: textReveal 0.8s ease forwards;
}

.hero-title .line-2, .gear-title .title-line:nth-child(2) {
    animation-delay: 0.2s;
}

@keyframes textReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Parallax effect for images on hover */
.reel-item video, .product-image {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reel-item:hover video {
    transform: scale(1.05);
}

/* Subtle breathing animation for accent elements */
.hero-logo img, .hero-logo video, .loader-icon {
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Smooth underline animation for links */
.nav-links a, .footer-link {
    position: relative;
}

.nav-links a::after, .footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-light);
    transition: width 0.3s ease;
}

.nav-links a:hover::after, .footer-link:hover::after {
    width: 100%;
}

/* Stats counter animation */
.intro-stat-number, .stat-number {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.intro-stat.animate-in .intro-stat-number, .stat.animate-in .stat-number {
    opacity: 1;
    transform: scale(1);
}

/* Testimonial quote animation */
.testimonial-quote {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.gear-testimonials.animate-in .testimonial-quote {
    opacity: 1;
    transform: translateY(0);
}

/* Logo banderole smooth fade */
.logos-track img {
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logos-track img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Cursor trail effect hint */
body {
    cursor: default;
}

a, button, .product-card, .reel-item, .nav-logo {
    cursor: pointer;
}

/* Page load animation */
html {
    animation: pageLoad 0.6s ease;
}

@keyframes pageLoad {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scroll indicator bounce */
.scroll-line {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}