.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;opacity:1;transition:opacity .5s ease;}
.background.hidden{opacity:0;pointer-events:none}
.grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(74,144,226,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(74,144,226,.05) 1px,transparent 1px);background-size:40px 40px;perspective:1000px}
.node{position:absolute;border-radius:50%;background:rgba(74,144,226,.15);box-shadow:0 0 30px rgba(74,144,226,.2);animation:float 15s infinite ease-in-out}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(20px,15px) scale(1.05)}50%{transform:translate(-10px,20px) scale(.95)}75%{transform:translate(-15px,-10px) scale(1.03)}}
.line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(74,144,226,.3),rgba(74,144,226,.1),rgba(74,144,226,.3));transform-origin:0 0;animation:pulse 8s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.7}}
.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(100,200,255,.4);animation:particleFloat 20s infinite linear}
@keyframes particleFloat{from{transform:translateY(100vh) rotate(0deg)}to{transform:translateY(-100px) rotate(360deg)}}
.hexagon{position:absolute;width:60px;height:34.64px;background:rgba(30,100,200,.1);margin:17.32px 0;border-left:1px solid rgba(74,144,226,.3);border-right:1px solid rgba(74,144,226,.3);animation:hexRotate 40s infinite linear}
.hexagon:before,.hexagon:after{content:"";position:absolute;width:0;border-left:30px solid transparent;border-right:30px solid transparent}
.hexagon:before{bottom:100%;border-bottom:17.32px solid rgba(30,100,200,.1)}
.hexagon:after{top:100%;border-top:17.32px solid rgba(30,100,200,.1)}
@keyframes hexRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

#projects-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#0a0e1a 0%,#141b2d 25%,#1a2332 50%,#0f1620 75%,#0a0e1a 100%);transition:opacity .6s}
#projects-bg.active{opacity:1}

.project-wave{position:absolute;top:50%;left:50%;width:100px;height:100px;border:2px solid rgba(100,200,255,.3);border-radius:50%;transform:translate(-50%,-50%);animation:wave-pulse 8s infinite ease-out;opacity:0}
@keyframes wave-pulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:.8}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}

.project-spectrum{position:absolute;bottom:0;width:4px;background:linear-gradient(to top,rgba(100,200,255,.8),rgba(100,200,255,.2));border-radius:2px 2px 0 0;animation:spectrum-bounce 1.5s infinite ease-in-out}
@keyframes spectrum-bounce{0%,100%{height:20px;opacity:.6}50%{height:80px;opacity:1}}

.project-packet{position:absolute;width:12px;height:8px;background:rgba(100,220,255,.7);border-radius:2px;box-shadow:0 0 10px rgba(100,220,255,.5);animation:packet-flow 6s infinite linear}
@keyframes packet-flow{0%{transform:translateX(-50px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(calc(100vw + 50px));opacity:0}}

.project-node{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(100,200,255,.9);box-shadow:0 0 15px rgba(100,200,255,.7),0 0 25px rgba(100,200,255,.3);animation:node-pulse 4s infinite ease-in-out}
@keyframes node-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.8);opacity:1}}

.project-connection{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(100,200,255,.4),transparent);transform-origin:0 0;animation:connection-glow 5s infinite ease-in-out}
@keyframes connection-glow{0%,100%{opacity:.3}50%{opacity:.8}}

.project-antenna{position:absolute;width:3px;height:40px;background:linear-gradient(to top,rgba(100,200,255,.8),rgba(100,200,255,.2));border-radius:2px;animation:antenna-transmit 3s infinite ease-in-out}
@keyframes antenna-transmit{0%,100%{opacity:.5;box-shadow:0 0 5px rgba(100,200,255,.3)}50%{opacity:1;box-shadow:0 0 20px rgba(100,200,255,.8),0 0 40px rgba(100,200,255,.4)}}

.project-hex-grid{position:absolute;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,rgba(100,200,255,.02) 0px,transparent 1px,transparent 40px),repeating-linear-gradient(60deg,rgba(100,200,255,.02) 0px,transparent 1px,transparent 40px),repeating-linear-gradient(120deg,rgba(100,200,255,.02) 0px,transparent 1px,transparent 40px);opacity:.6;animation:hex-drift 30s infinite linear}
@keyframes hex-drift{0%{transform:translate(0,0)}100%{transform:translate(40px,40px)}}

.project-shield{position:absolute;width:60px;height:70px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(135deg,rgba(100,200,255,.15),rgba(100,200,255,.05));border:1px solid rgba(100,200,255,.3);animation:shield-pulse 6s infinite ease-in-out}
@keyframes shield-pulse{0%,100%{transform:scale(1);opacity:.5;border-color:rgba(100,200,255,.3)}50%{transform:scale(1.1);opacity:.8;border-color:rgba(100,200,255,.6)}}

.project-bracket{position:absolute;font-family:'Roboto Mono',monospace;font-size:32px;font-weight:bold;color:rgba(100,200,255,.4);text-shadow:0 0 10px rgba(100,200,255,.3);animation:bracket-float 8s infinite ease-in-out}
@keyframes bracket-float{0%,100%{transform:translateY(0) rotate(0deg);opacity:.3}50%{transform:translateY(-30px) rotate(5deg);opacity:.7}}

.project-binary{position:absolute;font-family:'Roboto Mono',monospace;font-size:14px;font-weight:600;color:rgba(100,220,255,.5);text-shadow:0 0 8px rgba(100,220,255,.4);animation:binary-flow 10s infinite linear;opacity:0}
@keyframes binary-flow{0%{transform:translateY(100vh) translateX(0);opacity:0}5%{opacity:.8}95%{opacity:.8}100%{transform:translateY(-100px) translateX(50px);opacity:0}}

.project-cursor{position:absolute;width:12px;height:20px;background:rgba(100,255,200,.8);box-shadow:0 0 15px rgba(100,255,200,.6);animation:cursor-blink 1.2s infinite step-end}
@keyframes cursor-blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.project-commit{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,180,100,.8);border:2px solid rgba(255,180,100,.6);box-shadow:0 0 12px rgba(255,180,100,.5);animation:commit-pulse 5s infinite ease-in-out}
@keyframes commit-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.4);opacity:1}}

.project-branch{position:absolute;height:2px;background:linear-gradient(90deg,rgba(255,180,100,.5),rgba(100,200,255,.5));transform-origin:0 0;animation:branch-glow 6s infinite ease-in-out}
@keyframes branch-glow{0%,100%{opacity:.4}50%{opacity:.9}}

.project-compile{position:absolute;height:4px;background:rgba(100,255,150,.3);border-radius:2px;overflow:hidden}
.project-compile:after{content:"";position:absolute;left:0;top:0;height:100%;width:30%;background:linear-gradient(90deg,transparent,rgba(100,255,150,.9),rgba(100,255,150,.9),transparent);box-shadow:0 0 15px rgba(100,255,150,.8);animation:compile-progress 4s infinite ease-in-out}
@keyframes compile-progress{0%{left:-30%;opacity:.5}50%{opacity:1}100%{left:100%;opacity:.5}}

.project-syntax{position:absolute;width:80px;height:16px;border-radius:8px;animation:syntax-glow 7s infinite ease-in-out}
@keyframes syntax-glow{0%,100%{opacity:.3;box-shadow:0 0 8px currentColor}50%{opacity:.8;box-shadow:0 0 20px currentColor,0 0 30px currentColor}}

.project-paren{position:absolute;font-family:'Roboto Mono',monospace;font-size:28px;font-weight:bold;color:rgba(255,200,100,.5);text-shadow:0 0 12px rgba(255,200,100,.4);animation:paren-pulse 6s infinite ease-in-out}
@keyframes paren-pulse{0%,100%{transform:scale(1) rotate(0deg);opacity:.4}50%{transform:scale(1.15) rotate(-3deg);opacity:.8}}

.project-variable{position:absolute;font-family:'Roboto Mono',monospace;font-size:12px;color:rgba(150,100,255,.6);text-shadow:0 0 10px rgba(150,100,255,.4);animation:variable-fade 9s infinite ease-in-out}
@keyframes variable-fade{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:.7;transform:translateX(10px)}}

#pcbs-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:#0d1117;transition:opacity .6s}
#pcbs-bg.active{opacity:1}

.pcb-substrate{position:absolute;width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(10,30,50,.3),transparent 50%),radial-gradient(circle at 70% 60%,rgba(10,30,50,.3),transparent 50%),#0d1117;opacity:.6}

.pcb-grid{position:absolute;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,rgba(0,180,255,.02) 0px,transparent 1px,transparent 10px),repeating-linear-gradient(90deg,rgba(0,180,255,.02) 0px,transparent 1px,transparent 10px);opacity:.5}

.pcb-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}

.pcb-trace-l{position:absolute;width:3px;background:rgba(0,220,255,.7);box-shadow:0 0 10px rgba(0,220,255,.5),inset 0 0 2px rgba(255,255,255,.3);transform-origin:top left}

.pcb-trace-diag{position:absolute;width:2px;height:120px;background:linear-gradient(to bottom,transparent,rgba(0,220,255,.8) 10%,rgba(0,220,255,.8) 90%,transparent);box-shadow:0 0 8px rgba(0,220,255,.6);transform-origin:top center;animation:trace-glow 4s infinite ease-in-out}

.pcb-trace-power{position:absolute;height:4px;background:rgba(255,180,0,.6);box-shadow:0 0 12px rgba(255,180,0,.5),inset 0 0 2px rgba(255,255,255,.2);animation:power-flow 3s infinite ease-in-out}

.pcb-trace-signal{position:absolute;height:2px;background:rgba(0,220,255,.5);box-shadow:0 0 6px rgba(0,220,255,.4)}
.pcb-trace-signal:after{content:"";position:absolute;width:20px;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,255,1),transparent);box-shadow:0 0 15px rgba(0,255,255,.9);animation:signal-travel 4s infinite ease-in-out}

.pcb-chip{position:absolute;width:60px;height:60px;background:linear-gradient(135deg,rgba(20,20,25,.9),rgba(30,30,40,.9));border:1px solid rgba(0,220,255,.4);border-radius:2px;box-shadow:0 0 20px rgba(0,220,255,.3),inset 0 0 10px rgba(0,100,150,.2);animation:chip-float 8s infinite ease-in-out}
.pcb-chip:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:1px solid rgba(0,220,255,.3);border-radius:50%;background:radial-gradient(circle,rgba(0,220,255,.1),transparent)}
.pcb-chip:after{content:"";position:absolute;width:8px;height:8px;background:rgba(0,220,255,.6);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(0,220,255,.8);animation:chip-process 3s infinite ease-in-out}

.pcb-pin{position:absolute;width:3px;height:8px;background:linear-gradient(to bottom,rgba(200,200,200,.8),rgba(150,150,150,.8));border-radius:1px}

.pcb-resistor{position:absolute;width:25px;height:10px;background:linear-gradient(90deg,rgba(80,80,80,.8) 0%,rgba(40,40,40,.9) 20%,rgba(40,40,40,.9) 80%,rgba(80,80,80,.8) 100%);border-radius:1px;box-shadow:0 2px 4px rgba(0,0,0,.5);animation:resistor-shift 5s infinite ease-in-out}
.pcb-resistor:before,.pcb-resistor:after{content:"";position:absolute;width:20%;height:100%;background:rgba(200,200,200,.7);top:0;animation:terminal-glow 3s infinite ease-in-out}
.pcb-resistor:before{left:0}
.pcb-resistor:after{right:0;animation-delay:1.5s}

.pcb-capacitor{position:absolute;width:20px;height:15px;background:linear-gradient(to bottom,rgba(100,80,60,.8),rgba(80,60,40,.9));border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.5);border:1px solid rgba(150,130,110,.5);animation:capacitor-charge 4s infinite ease-in-out}
.pcb-capacitor:before,.pcb-capacitor:after{content:"";position:absolute;width:30%;height:3px;background:rgba(200,200,200,.8);top:50%;transform:translateY(-50%);animation:terminal-glow 3s infinite ease-in-out}
.pcb-capacitor:before{left:-2px}
.pcb-capacitor:after{right:-2px;animation-delay:1.5s}

.pcb-pad{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,rgba(220,200,180,.9),rgba(180,160,140,.8));box-shadow:0 0 8px rgba(255,200,100,.4),inset 0 1px 2px rgba(255,255,255,.3);animation:pad-shimmer 4s infinite ease-in-out}

.pcb-via{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,rgba(20,20,30,.9) 30%,transparent 30%,transparent 50%,rgba(200,180,160,.8) 50%);box-shadow:0 0 6px rgba(0,220,255,.3),inset 0 0 3px rgba(0,0,0,.8);animation:via-pulse 6s infinite ease-in-out}

.pcb-node{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,180,1),rgba(220,180,140,.9));box-shadow:0 0 12px rgba(255,200,100,.6),inset 0 1px 1px rgba(255,255,255,.5);animation:node-pulse 5s infinite ease-in-out}

.pcb-signal{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(0,255,255,1);box-shadow:0 0 15px rgba(0,255,255,1),0 0 25px rgba(0,200,255,.6);opacity:0}

.pcb-electron{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(100,200,255,.9);box-shadow:0 0 8px rgba(100,200,255,.8)}

.pcb-pour{position:absolute;background:rgba(0,180,220,.08);border:1px solid rgba(0,180,220,.15);border-radius:8px;box-shadow:inset 0 0 20px rgba(0,180,220,.05);animation:pour-shimmer 8s infinite ease-in-out}

.pcb-label{position:absolute;font-size:8px;color:rgba(200,200,200,.4);font-family:monospace;font-weight:bold;text-shadow:0 0 3px rgba(200,200,200,.3);pointer-events:none}

.pcb-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(100,220,255,.9);box-shadow:0 0 8px rgba(100,220,255,.9),0 0 15px rgba(0,200,255,.6);animation:spark-rise 6s infinite linear;opacity:0}

.pcb-lightning{position:absolute;width:2px;height:40px;background:linear-gradient(to bottom,rgba(100,220,255,1),rgba(100,220,255,.3),transparent);box-shadow:0 0 10px rgba(100,220,255,1),0 0 20px rgba(0,200,255,.8);animation:lightning-strike 3s infinite ease-in-out;opacity:0;transform-origin:top center}

.pcb-arc{position:absolute;width:2px;height:30px;background:linear-gradient(135deg,transparent,rgba(100,220,255,.9) 20%,rgba(100,220,255,.9) 80%,transparent);box-shadow:0 0 8px rgba(100,220,255,.8);animation:arc-flash 4s infinite ease-in-out;opacity:0;transform-origin:center}

@keyframes signal-travel{0%{left:-20px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes chip-process{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes node-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}
@keyframes chip-float{0%,100%{transform:translateY(0px) rotate(0deg)}25%{transform:translateY(-2px) rotate(0.5deg)}75%{transform:translateY(-1px) rotate(-0.5deg)}}
@keyframes resistor-shift{0%,100%{transform:translateX(0px) translateY(0px) scale(1)}33%{transform:translateX(1px) translateY(-1px) scale(1.03)}66%{transform:translateX(-1px) translateY(1px) scale(0.98)}}
@keyframes capacitor-charge{0%,100%{transform:scale(1);box-shadow:0 2px 4px rgba(0,0,0,.5)}50%{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,220,255,.3),0 0 12px rgba(0,220,255,.2)}}
@keyframes terminal-glow{0%,100%{opacity:.7;box-shadow:none}50%{opacity:1;box-shadow:0 0 6px rgba(0,220,255,.6)}}
@keyframes pad-shimmer{0%,100%{box-shadow:0 0 8px rgba(255,200,100,.4),inset 0 1px 2px rgba(255,255,255,.3)}50%{box-shadow:0 0 15px rgba(255,200,100,.7),inset 0 1px 3px rgba(255,255,255,.5)}}
@keyframes via-pulse{0%,100%{transform:scale(1);box-shadow:0 0 6px rgba(0,220,255,.3),inset 0 0 3px rgba(0,0,0,.8)}50%{transform:scale(1.1);box-shadow:0 0 12px rgba(0,220,255,.6),inset 0 0 5px rgba(0,0,0,.9)}}
@keyframes trace-glow{0%,100%{opacity:.8;box-shadow:0 0 8px rgba(0,220,255,.6)}50%{opacity:1;box-shadow:0 0 15px rgba(0,220,255,.9)}}
@keyframes power-flow{0%,100%{opacity:.6;box-shadow:0 0 12px rgba(255,180,0,.5)}50%{opacity:.9;box-shadow:0 0 20px rgba(255,180,0,.8),0 0 30px rgba(255,180,0,.4)}}
@keyframes pour-shimmer{0%,100%{opacity:.8;border-color:rgba(0,180,220,.15)}50%{opacity:1;border-color:rgba(0,180,220,.3)}}
@keyframes spark-rise{0%{transform:translateY(0);opacity:0}5%{opacity:.9}15%{opacity:.7}85%{opacity:.5}100%{transform:translateY(-100vh);opacity:0}}
@keyframes lightning-strike{0%,90%{opacity:0;transform:scaleY(0)}92%{opacity:1;transform:scaleY(1)}94%{opacity:0}96%{opacity:.8;transform:scaleY(1)}98%,100%{opacity:0;transform:scaleY(0)}}
@keyframes arc-flash{0%,85%{opacity:0;transform:scale(0)}87%{opacity:.9;transform:scale(1)}89%{opacity:0;transform:scale(1)}91%{opacity:.7;transform:scale(1)}93%,100%{opacity:0;transform:scale(0)}}

#community-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#1e1f3a 0%,#2c2f48 25%,#36395a 50%,#23263a 75%,#1e1f3a 100%);transition:opacity .5s}
#community-bg.active{opacity:1}

.discord-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:400px;color:rgba(88,101,242,.03);font-family:'Font Awesome 6 Brands';pointer-events:none}
.discord-watermark:before{content:"\f392"}

.discord-message{position:absolute;background:rgba(88,101,242,.15);border-left:4px solid rgba(88,101,242,.6);border-radius:8px;padding:8px 12px;min-width:120px;max-width:200px;animation:message-float 12s infinite ease-in-out;box-shadow:0 4px 15px rgba(88,101,242,.2)}
@keyframes message-float{0%,100%{transform:translateY(0) translateX(0);opacity:.4}50%{transform:translateY(-30px) translateX(20px);opacity:.8}}

.discord-avatar{position:absolute;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(88,101,242,.7),rgba(114,137,218,.7));border:3px solid rgba(88,101,242,.4);box-shadow:0 0 20px rgba(88,101,242,.5);animation:avatar-pulse 6s infinite ease-in-out}
@keyframes avatar-pulse{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(88,101,242,.5)}50%{transform:scale(1.15);box-shadow:0 0 30px rgba(88,101,242,.8),0 0 50px rgba(88,101,242,.4)}}

.discord-voice-wave{position:absolute;width:3px;background:linear-gradient(to top,transparent,rgba(67,181,129,.8),transparent);border-radius:2px;animation:voice-wave 1.5s infinite ease-in-out}
@keyframes voice-wave{0%,100%{height:20px;opacity:.5}50%{height:60px;opacity:1}}

.discord-connection{position:absolute;height:2px;background:linear-gradient(90deg,rgba(88,101,242,.3),rgba(114,137,218,.6),rgba(88,101,242,.3));transform-origin:0 0;animation:connection-glow 5s infinite ease-in-out}
@keyframes connection-glow{0%,100%{opacity:.3}50%{opacity:.8}}

.discord-notification{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(237,66,69,.9);box-shadow:0 0 15px rgba(237,66,69,.8);animation:notification-ping 3s infinite ease-in-out}
@keyframes notification-ping{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:1}}

.discord-emoji{position:absolute;font-size:24px;animation:emoji-float 10s infinite ease-in-out;opacity:0}
@keyframes emoji-float{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(-100px) rotate(360deg);opacity:0}}

.discord-sparkle{position:absolute;width:8px;height:8px;background:rgba(255,115,250,.8);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:sparkle-twinkle 4s infinite ease-in-out;box-shadow:0 0 10px rgba(255,115,250,.6)}
@keyframes sparkle-twinkle{0%,100%{transform:scale(0) rotate(0deg);opacity:0}50%{transform:scale(1.5) rotate(180deg);opacity:1}}

.discord-typing{position:absolute;display:flex;gap:4px;animation:typing-bounce 8s infinite ease-in-out}
.discord-typing:before,.discord-typing:after{content:'';width:6px;height:6px;border-radius:50%;background:rgba(114,137,218,.7);animation:dot-bounce 1.4s infinite ease-in-out}
.discord-typing:before{animation-delay:0s}
.discord-typing:after{animation-delay:0.2s}
@keyframes dot-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
@keyframes typing-bounce{0%,100%{opacity:.3}50%{opacity:.8}}

.discord-mention{position:absolute;background:rgba(88,101,242,.2);border-radius:4px;padding:4px 8px;font-family:'Roboto Mono',monospace;font-size:12px;color:rgba(88,101,242,.9);animation:mention-glow 6s infinite ease-in-out}
@keyframes mention-glow{0%,100%{box-shadow:0 0 5px rgba(88,101,242,.3)}50%{box-shadow:0 0 15px rgba(88,101,242,.6),0 0 25px rgba(88,101,242,.3)}}

.discord-status{position:absolute;width:10px;height:10px;border-radius:50%;animation:status-pulse 4s infinite ease-in-out}
.discord-status.online{background:rgba(67,181,129,.9);box-shadow:0 0 10px rgba(67,181,129,.7)}
.discord-status.idle{background:rgba(250,166,26,.9);box-shadow:0 0 10px rgba(250,166,26,.7)}
.discord-status.dnd{background:rgba(240,71,71,.9);box-shadow:0 0 10px rgba(240,71,71,.7)}
@keyframes status-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.3);opacity:1}}

#arsenal-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#0a0e1a 0%,#1a1520 25%,#0f1419 50%,#1a1a2e 75%,#0a0e1a 100%);transition:opacity .6s}
#arsenal-bg.active{opacity:1}

.arsenal-bg-grid{position:absolute;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,rgba(100,200,255,.03) 0px,transparent 1px,transparent 20px),repeating-linear-gradient(90deg,rgba(100,200,255,.03) 0px,transparent 1px,transparent 20px);opacity:.6}

.arsenal-waveform{position:absolute;width:300px;height:80px;opacity:.5}
.arsenal-waveform svg{width:100%;height:100%}
.arsenal-waveform path{fill:none;stroke:rgba(0,255,200,.6);stroke-width:2;filter:drop-shadow(0 0 8px rgba(0,255,200,.5));animation:waveform-draw 4s infinite ease-in-out}
@keyframes waveform-draw{0%,100%{stroke-dashoffset:0;opacity:.6}50%{stroke-dashoffset:50;opacity:1}}

.arsenal-rf-wave{position:absolute;width:150px;height:150px;border:2px solid rgba(255,100,150,.3);border-radius:50%;animation:rf-pulse 6s infinite ease-out;opacity:0}
@keyframes rf-pulse{0%{transform:scale(.3);opacity:.8}100%{transform:scale(2);opacity:0}}

.arsenal-solder-tip{position:absolute;width:8px;height:40px;background:linear-gradient(to bottom,rgba(150,150,150,.7),rgba(255,150,50,.9));border-radius:2px 2px 0 0;animation:solder-heat 3s infinite ease-in-out}
.arsenal-solder-tip:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:15px;height:15px;background:radial-gradient(circle,rgba(255,180,50,.8),transparent);filter:blur(5px);animation:heat-glow 3s infinite ease-in-out}
@keyframes solder-heat{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
@keyframes heat-glow{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.3)}}

.arsenal-spectrum{position:absolute;bottom:0;width:5px;background:linear-gradient(to top,rgba(0,255,200,.8),rgba(100,200,255,.4));border-radius:2px 2px 0 0;animation:spectrum-bounce 1.2s infinite ease-in-out}
@keyframes spectrum-bounce{0%,100%{height:30px;opacity:.5}50%{height:100px;opacity:1}}

.arsenal-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,220,100,1);box-shadow:0 0 15px rgba(255,220,100,.9),0 0 30px rgba(255,200,50,.6);animation:spark-pop 2s infinite ease-out}
@keyframes spark-pop{0%{transform:scale(0);opacity:0}10%{transform:scale(1.5);opacity:1}100%{transform:scale(0) translate(30px,-30px);opacity:0}}

.arsenal-trace{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(0,220,255,.5),rgba(0,220,255,.5),transparent);animation:trace-pulse 5s infinite ease-in-out}
@keyframes trace-pulse{0%,100%{opacity:.3}50%{opacity:.8;box-shadow:0 0 10px rgba(0,220,255,.6)}}

.arsenal-tool-screwdriver{position:absolute;width:6px;height:60px;background:linear-gradient(to bottom,rgba(200,50,50,.5) 0%,rgba(200,50,50,.5) 30%,rgba(150,150,150,.6) 30%,rgba(150,150,150,.6) 100%);border-radius:3px;animation:tool-rotate 15s infinite linear}
@keyframes tool-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.arsenal-tool-pliers{position:absolute;width:40px;height:20px;clip-path:polygon(0% 40%,30% 40%,30% 0%,35% 0%,35% 40%,65% 40%,65% 0%,70% 0%,70% 40%,100% 40%,90% 50%,100% 60%,70% 60%,70% 100%,65% 100%,65% 60%,35% 60%,35% 100%,30% 100%,30% 60%,0% 60%,10% 50%);background:rgba(150,150,150,.5);animation:pliers-open 4s infinite ease-in-out}
@keyframes pliers-open{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.2)}}

.arsenal-multimeter{position:absolute;width:80px;height:50px;background:rgba(30,30,40,.6);border:2px solid rgba(100,200,255,.4);border-radius:4px;animation:multimeter-pulse 6s infinite ease-in-out}
.arsenal-multimeter:after{content:"3.3V";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Roboto Mono',monospace;font-size:14px;color:rgba(0,255,200,.9);text-shadow:0 0 10px rgba(0,255,200,.7);animation:voltage-change 3s infinite step-end}
@keyframes multimeter-pulse{0%,100%{border-color:rgba(100,200,255,.4)}50%{border-color:rgba(0,255,200,.7);box-shadow:0 0 20px rgba(0,255,200,.4)}}
@keyframes voltage-change{0%,33%{content:"3.3V"}34%,66%{content:"5.0V"}67%,100%{content:"12V"}}

.arsenal-logic{position:absolute;width:200px;height:40px;opacity:.6}
.arsenal-logic:before,.arsenal-logic:after{content:"";position:absolute;left:0;width:100%;height:2px;background:rgba(100,255,200,.6);box-shadow:0 0 5px rgba(100,255,200,.5)}
.arsenal-logic:before{top:10px;animation:logic-pulse-1 2s infinite steps(8)}
.arsenal-logic:after{top:30px;animation:logic-pulse-2 2s infinite steps(8)}
@keyframes logic-pulse-1{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes logic-pulse-2{0%,100%{opacity:1}50%{opacity:.3}}

.arsenal-resistor{position:absolute;width:30px;height:12px;background:linear-gradient(90deg,rgba(200,200,200,.6) 0%,rgba(200,200,200,.6) 20%,rgba(139,69,19,.7) 20%,rgba(139,69,19,.7) 80%,rgba(200,200,200,.6) 80%);border-radius:2px;animation:component-float 8s infinite ease-in-out}
@keyframes component-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}

.arsenal-capacitor{position:absolute;width:20px;height:25px;background:linear-gradient(to bottom,rgba(100,100,200,.6),rgba(80,80,150,.7));border-radius:3px;border:1px solid rgba(150,150,200,.5);animation:capacitor-charge 5s infinite ease-in-out}
.arsenal-capacitor:before,.arsenal-capacitor:after{content:"";position:absolute;width:25px;height:2px;background:rgba(200,200,200,.7);left:-2px}
.arsenal-capacitor:before{top:-3px}
.arsenal-capacitor:after{bottom:-3px}
@keyframes capacitor-charge{0%,100%{opacity:.5;box-shadow:0 0 5px rgba(100,100,200,.3)}50%{opacity:1;box-shadow:0 0 15px rgba(100,150,255,.6)}}

.arsenal-chip{position:absolute;width:50px;height:50px;background:linear-gradient(135deg,rgba(40,40,50,.8),rgba(60,60,70,.8));border:1px solid rgba(100,200,255,.5);border-radius:3px;animation:chip-process 4s infinite ease-in-out}
.arsenal-chip:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border:1px solid rgba(0,255,200,.4);border-radius:50%}
.arsenal-chip:after{content:"IC";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Roboto Mono',monospace;font-size:10px;color:rgba(100,200,255,.8)}
@keyframes chip-process{0%,100%{box-shadow:0 0 10px rgba(100,200,255,.3)}50%{box-shadow:0 0 25px rgba(0,255,200,.6)}}

.arsenal-scope-grid{position:absolute;width:250px;height:150px;border:1px solid rgba(0,255,200,.3);background-image:repeating-linear-gradient(0deg,rgba(0,255,200,.1) 0px,transparent 1px,transparent 30px),repeating-linear-gradient(90deg,rgba(0,255,200,.1) 0px,transparent 1px,transparent 50px);animation:scope-scan 8s infinite ease-in-out}
@keyframes scope-scan{0%,100%{opacity:.4}50%{opacity:.7;border-color:rgba(0,255,200,.6)}}

.arsenal-antenna{position:absolute;width:4px;height:50px;background:linear-gradient(to top,rgba(255,100,150,.7),rgba(255,100,150,.3));border-radius:2px;animation:antenna-transmit 4s infinite ease-in-out}
.arsenal-antenna:before,.arsenal-antenna:after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:30px;border:2px solid rgba(255,100,150,.4);border-radius:50%;animation:signal-emit 4s infinite ease-out}
.arsenal-antenna:after{animation-delay:2s}
@keyframes antenna-transmit{0%,100%{opacity:.6}50%{opacity:1;box-shadow:0 0 20px rgba(255,100,150,.8)}}
@keyframes signal-emit{0%{transform:translateX(-50%) scale(.5);opacity:.8}100%{transform:translateX(-50%) scale(2);opacity:0}}

.arsenal-hex-nut{position:absolute;width:25px;height:25px;clip-path:polygon(30% 0%,70% 0%,100% 50%,70% 100%,30% 100%,0% 50%);background:rgba(150,150,150,.5);border:1px solid rgba(180,180,180,.6);animation:nut-spin 10s infinite linear}
@keyframes nut-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

#workshop-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#1a1410 0%,#2a2218 25%,#1f1a14 50%,#2d2520 75%,#1a1410 100%);transition:opacity .8s ease}
#workshop-bg.active{opacity:1}

.workshop-bg-grid{position:absolute;width:100%;height:100%;background-image:linear-gradient(rgba(150,100,50,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(150,100,50,.08) 1px,transparent 1px);background-size:50px 50px;animation:grid-move 20s infinite linear}
@keyframes grid-move{0%{background-position:0 0}100%{background-position:50px 50px}}

.workshop-gear{position:absolute;width:80px;height:80px;background:repeating-radial-gradient(circle at center,rgba(150,100,50,.3) 0,rgba(150,100,50,.3) 4px,rgba(100,70,40,.3) 4px,rgba(100,70,40,.3) 8px);border-radius:50%;animation:gear-rotate 20s infinite linear;box-shadow:0 0 20px rgba(150,100,50,.2)}
.workshop-gear:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:rgba(80,50,30,.6);border-radius:50%;border:2px solid rgba(150,100,50,.4)}
@keyframes gear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.workshop-spark{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,transparent,rgba(255,200,50,.9),transparent);border-radius:2px;animation:spark-fly 2s infinite linear;box-shadow:0 0 8px rgba(255,200,50,.7)}
@keyframes spark-fly{0%{transform:translate(0,0) rotate(45deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(100px,-100px) rotate(45deg);opacity:0}}

.workshop-nozzle{position:absolute;width:15px;height:30px;background:linear-gradient(to bottom,rgba(150,150,150,.7),rgba(200,200,200,.8));border-radius:2px 2px 0 0;animation:nozzle-print 8s infinite ease-in-out}
.workshop-nozzle:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:3px;height:10px;background:rgba(255,100,50,.8);filter:blur(1px);animation:filament-extrude 8s infinite ease-in-out}
@keyframes nozzle-print{0%,100%{transform:translateX(0)}25%{transform:translateX(30px)}50%{transform:translateX(30px) translateY(5px)}75%{transform:translateX(0) translateY(5px)}}
@keyframes filament-extrude{0%,100%{opacity:.3;height:5px}50%{opacity:1;height:15px}}

.workshop-laser{position:absolute;width:2px;height:80px;background:linear-gradient(to bottom,rgba(255,50,50,.9),rgba(255,100,100,.7),transparent);box-shadow:0 0 15px rgba(255,50,50,.8),0 0 30px rgba(255,50,50,.4);animation:laser-cut 6s infinite ease-in-out}
@keyframes laser-cut{0%,100%{opacity:.3;height:60px}50%{opacity:1;height:100px}}

.workshop-spindle{position:absolute;width:25px;height:50px;background:linear-gradient(to bottom,rgba(180,180,180,.7),rgba(120,120,120,.8));border-radius:3px;animation:spindle-move 10s infinite ease-in-out}
.workshop-spindle:before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:8px;height:15px;background:rgba(200,200,200,.9);clip-path:polygon(50% 0%,100% 100%,0% 100%);animation:spindle-spin 0.3s infinite linear}
@keyframes spindle-move{0%,100%{transform:translateX(0)}50%{transform:translateX(40px)}}
@keyframes spindle-spin{0%{transform:translateX(-50%) rotate(0deg)}100%{transform:translateX(-50%) rotate(360deg)}}

.workshop-solder{position:absolute;width:8px;height:40px;background:linear-gradient(to bottom,rgba(150,150,150,.7),rgba(255,150,50,.9));border-radius:2px 2px 0 0;animation:solder-work 4s infinite ease-in-out}
.workshop-solder:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:15px;height:15px;background:radial-gradient(circle,rgba(255,180,50,.8),transparent);filter:blur(5px);animation:solder-heat 4s infinite ease-in-out}
@keyframes solder-work{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(10px);filter:brightness(1.5)}}
@keyframes solder-heat{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.4)}}

.workshop-saw{position:absolute;width:60px;height:60px;border-radius:50%;background:conic-gradient(from 0deg,rgba(180,180,180,.6) 0deg,rgba(200,200,200,.7) 45deg,rgba(180,180,180,.6) 90deg,rgba(200,200,200,.7) 135deg,rgba(180,180,180,.6) 180deg,rgba(200,200,200,.7) 225deg,rgba(180,180,180,.6) 270deg,rgba(200,200,200,.7) 315deg);border:2px solid rgba(150,150,150,.8);animation:saw-spin 2s infinite linear}
.workshop-saw:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;background:rgba(100,100,100,.8);border-radius:50%;border:2px solid rgba(150,150,150,.6)}
@keyframes saw-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.workshop-chip{position:absolute;width:8px;height:3px;background:rgba(180,180,180,.7);border-radius:1px;animation:chip-fall 5s infinite linear;opacity:0}
@keyframes chip-fall{0%{transform:translateY(0) rotate(0deg);opacity:0}10%{opacity:.8}90%{opacity:.8}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

.workshop-caliper{position:absolute;width:80px;height:8px;background:linear-gradient(90deg,rgba(150,150,150,.6),rgba(180,180,180,.7));border-radius:2px;animation:caliper-measure 7s infinite ease-in-out}
.workshop-caliper:before,.workshop-caliper:after{content:"";position:absolute;width:3px;height:20px;background:rgba(180,180,180,.8);top:-6px}
.workshop-caliper:before{left:10px;animation:jaw-close 7s infinite ease-in-out}
.workshop-caliper:after{right:10px}
@keyframes caliper-measure{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.2)}}
@keyframes jaw-close{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}

.workshop-blueprint{position:absolute;width:150px;height:100px;border:1px dashed rgba(100,150,255,.4);background:rgba(100,150,255,.03);animation:blueprint-pulse 5s infinite alternate}
.workshop-blueprint:before{content:"";position:absolute;top:20%;left:20%;width:60%;height:2px;background:rgba(100,150,255,.3)}
.workshop-blueprint:after{content:"";position:absolute;top:40%;left:20%;width:40%;height:2px;background:rgba(100,150,255,.3)}
@keyframes blueprint-pulse{0%{opacity:.3;transform:scale(1) rotate(0deg)}100%{opacity:.6;transform:scale(1.05) rotate(2deg)}}

.workshop-drill{position:absolute;width:6px;height:50px;background:linear-gradient(to bottom,rgba(150,150,150,.7),rgba(180,180,180,.8),rgba(120,120,120,.9));border-radius:1px;animation:drill-work 5s infinite ease-in-out}
.workshop-drill:before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:8px solid rgba(180,180,180,.9);animation:drill-spin 0.2s infinite linear}
@keyframes drill-work{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}}
@keyframes drill-spin{0%{transform:translateX(-50%) rotate(0deg)}100%{transform:translateX(-50%) rotate(360deg)}}

.workshop-wrench{position:absolute;width:50px;height:15px;background:linear-gradient(90deg,rgba(150,150,150,.6),rgba(180,180,180,.7));border-radius:3px;animation:wrench-turn 8s infinite ease-in-out}
.workshop-wrench:before{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:3px solid rgba(180,180,180,.7);border-radius:50%}
@keyframes wrench-turn{0%,100%{transform:rotate(0deg)}50%{transform:rotate(45deg)}}

.workshop-anvil{position:absolute;width:60px;height:30px;background:linear-gradient(to bottom,rgba(100,100,100,.7),rgba(80,80,80,.8));border-radius:5px 5px 0 0;animation:anvil-impact 3s infinite ease-in-out}
.workshop-anvil:after{content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:20px;height:15px;background:rgba(150,150,150,.7);border-radius:3px;animation:hammer-strike 3s infinite ease-in-out}
@keyframes anvil-impact{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes hammer-strike{0%,40%{transform:translateX(-50%) translateY(-20px)}50%{transform:translateX(-50%) translateY(0)}60%,100%{transform:translateX(-50%) translateY(-20px)}}

#partners-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#0f2f1a,#1a4a2b,#216536,#2d7d46);transition:opacity .6s}
#partners-bg.active{opacity:1}

.partner-network{position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 20% 30%,rgba(76,175,80,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(139,195,74,0.1) 0%,transparent 50%);}

.partner-handshake{position:absolute;font-size:40px;text-shadow:0 0 20px rgba(139,195,74,0.7);animation:partner-handshake-float 8s infinite ease-in-out}
@keyframes partner-handshake-float{0%,100%{transform:translateY(0px) rotate(0deg);opacity:0.6}25%{transform:translateY(-20px) rotate(5deg);opacity:0.8}50%{transform:translateY(-40px) rotate(-3deg);opacity:1}75%{transform:translateY(-20px) rotate(2deg);opacity:0.8}}

.partner-bridge{position:absolute;height:4px;background:linear-gradient(90deg,transparent,#4caf50,#8bc34a,transparent);animation:partner-bridge-glow 6s infinite ease-in-out}
@keyframes partner-bridge-glow{0%,100%{opacity:0.4;box-shadow:0 0 10px rgba(76,175,80,0.3)}50%{opacity:0.9;box-shadow:0 0 25px rgba(76,175,80,0.7)}}

.partner-team{position:absolute;width:80px;height:80px;border:3px solid rgba(76,175,80,0.6);border-radius:50%;animation:partner-team-pulse 5s infinite ease-in-out}
.partner-team:before{content:"👥";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px}
@keyframes partner-team-pulse{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(76,175,80,0.3)}50%{transform:scale(1.1);box-shadow:0 0 40px rgba(76,175,80,0.6)}}

.partner-doc{position:absolute;width:60px;height:80px;background:linear-gradient(135deg,#f8fdf8,#e8f5e9);border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,0.2);animation:partner-doc-float 12s infinite ease-in-out}
.partner-doc:before{content:"";position:absolute;top:12px;left:8px;right:8px;height:3px;background:#4caf50;border-radius:2px}
.partner-doc:after{content:"";position:absolute;top:20px;left:8px;right:15px;height:2px;background:#8bc34a;border-radius:1px}
@keyframes partner-doc-float{0%,100%{transform:rotate(-2deg) translateY(0px);opacity:0.5}33%{transform:rotate(3deg) translateY(-25px);opacity:0.8}66%{transform:rotate(-1deg) translateY(-15px);opacity:0.7}}

.partner-growth{position:absolute;bottom:0;width:20px;background:linear-gradient(to top,transparent,#4caf50,#66bb6a,#81c784);border-radius:3px 3px 0 0;animation:partner-growth-rise 4s infinite ease-in-out}
@keyframes partner-growth-rise{0%,100%{height:60px;opacity:0.6}50%{height:150px;opacity:1}}

.partner-node{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#66bb6a,#4caf50);border-radius:50%;box-shadow:0 0 15px #4caf50;animation:partner-node-glow 3s infinite alternate}
@keyframes partner-node-glow{0%{transform:scale(1);box-shadow:0 0 15px #4caf50}100%{transform:scale(1.2);box-shadow:0 0 30px #4caf50}}

.partner-synergy{position:absolute;width:120px;height:120px;border:2px solid rgba(76,175,80,0.4);border-radius:50%;animation:partner-synergy-expand 8s infinite ease-out;opacity:0}
@keyframes partner-synergy-expand{0%{transform:scale(0.3);opacity:0.7}100%{transform:scale(2);opacity:0}}

#contact-bg{position:fixed;inset:0;z-index:1;opacity:0;pointer-events:none;overflow:hidden;background:linear-gradient(135deg,#1a237e,#283593,#303f9f);transition:opacity .6s}
#contact-bg.active{opacity:1}

.contact-phone{position:absolute;top:50%;left:50%;width:180px;height:320px;background:linear-gradient(135deg,#2c387e,#3f51b5);border-radius:30px;transform:translate(-50%,-50%);box-shadow:0 20px 50px rgba(0,0,0,0.6)}
.contact-phone:before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:60px;height:6px;background:#5c6bc0;border-radius:3px}
.contact-phone:after{content:"";position:absolute;bottom:15px;left:50%;transform:translateX(-50%);width:60px;height:60px;background:#7986cb;border-radius:50%;box-shadow:inset 0 0 10px rgba(0,0,0,0.3)}

.contact-bubble{position:absolute;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:20px;padding:15px 20px;max-width:200px;animation:contact-bubble-float 8s infinite ease-in-out;box-shadow:0 5px 15px rgba(33,150,243,0.3);color:#333333 !important;font-weight:600;font-size:14px;text-shadow:none}
.contact-bubble:before{content:"";position:absolute;bottom:-8px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #bbdefb}

.contact-envelope{position:absolute;width:100px;height:70px;background:linear-gradient(135deg,#ffebee,#ffcdd2);animation:contact-envelope-fly 12s infinite ease-in-out}
.contact-envelope:before{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:linear-gradient(135deg,#f44336,#e57373);clip-path:polygon(0% 0%,50% 50%,100% 0%);border-radius:5px 5px 0 0}
.contact-envelope:after{content:"✉";position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);font-size:20px;color:#d32f2f}
@keyframes contact-envelope-fly{0%,100%{transform:translate(0,0) rotate(0deg);opacity:0.6}25%{transform:translate(100px,-50px) rotate(10deg);opacity:0.8}50%{transform:translate(50px,-100px) rotate(-5deg);opacity:1}75%{transform:translate(-80px,-60px) rotate(5deg);opacity:0.8}}

.contact-social{position:absolute;width:50px;height:50px;border-radius:50%;font-size:24px;display:flex;align-items:center;justify-content:center;animation:contact-social-pulse 6s infinite ease-in-out}
.contact-social.discord{background:linear-gradient(135deg,#7289da,#5865f2)}
.contact-social.github{background:linear-gradient(135deg,#333,#6e5494)}
.contact-social.twitter{background:linear-gradient(135deg,#1da1f2,#1a91da)}
@keyframes contact-social-pulse{0%,100%{transform:scale(1);box-shadow:0 0 20px currentColor}50%{transform:scale(1.2);box-shadow:0 0 40px currentColor}}

.contact-signal{position:absolute;width:8px;height:8px;background:#4fc3f7;border-radius:50%;box-shadow:0 0 20px #4fc3f7;animation:contact-signal-ping 2s infinite ease-in-out}
@keyframes contact-signal-ping{0%,100%{transform:scale(1);opacity:0.7}50%{transform:scale(2);opacity:0}}

.contact-typing{position:absolute;display:flex;gap:4px;animation:contact-typing-bounce 3s infinite ease-in-out}
.contact-typing:before,.contact-typing:after{content:'';width:8px;height:8px;border-radius:50%;background:#64b5f6;animation:contact-dot-bounce 1.4s infinite ease-in-out}
.contact-typing:before{animation-delay:0s}
.contact-typing:after{animation-delay:0.2s}
@keyframes contact-dot-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}
@keyframes contact-typing-bounce{0%,100%{opacity:0.5}50%{opacity:1}}

.contact-location{position:absolute;width:40px;height:40px;color:#f44336;font-size:30px;animation:contact-location-pulse 4s infinite ease-in-out;text-shadow:0 0 20px #f44336}
@keyframes contact-location-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}