body{background:#000}section{position:relative;float:none;margin:0;transform:none}.nav-brutalist-glitch{background:#000;display:flex;border:3px solid #fff;position:relative;overflow:hidden;padding:0;gap:0}.nav-brutalist-glitch:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 4px);pointer-events:none;z-index:10}.nav-brutalist-glitch a{flex:1;padding:1.5rem;text-decoration:none;color:#fff;background:#000;border-right:2px solid #fff;font-family:Space Mono,monospace;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;text-align:center;position:relative;overflow:hidden;transition:background .05s ease}.nav-brutalist-glitch a:last-child{border-right:none}.nav-brutalist-glitch a .index{display:block;font-size:.6rem;color:#00fff2;margin-bottom:.3rem;text-shadow:0 0 10px #00fff2}.nav-brutalist-glitch a .text{position:relative;display:block}.nav-brutalist-glitch a .text:before,.nav-brutalist-glitch a .text:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;opacity:0}.nav-brutalist-glitch a .text:before{color:#ff003c}.nav-brutalist-glitch a .text:after{color:#00fff2}.nav-brutalist-glitch a:hover{background:#ff0;color:#000}.nav-brutalist-glitch a:hover .index{color:#000;text-shadow:none}.nav-brutalist-glitch a:hover .text:before{opacity:1;animation:glitch-red .2s infinite}.nav-brutalist-glitch a:hover .text:after{opacity:1;animation:glitch-cyan .2s infinite}@keyframes glitch-red{0%,to{transform:translate(-3px)}50%{transform:translate(2px,1px)}}@keyframes glitch-cyan{0%,to{transform:translate(3px)}50%{transform:translate(-2px,-1px)}}.nav-toggle{display:none;background:#000;border:none;padding:1rem;cursor:pointer;flex-direction:column;gap:5px;z-index:100}.nav-toggle span{display:block;width:25px;height:2px;background:#00fff2;transition:all .3s ease;box-shadow:0 0 10px #00fff2}.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.nav-links{display:flex;flex:1}@media(max-width:768px){.nav-brutalist-glitch{flex-wrap:wrap}.nav-toggle{display:flex;width:100%;border-bottom:2px solid #fff}.nav-links{display:none;flex-direction:column;width:100%}.nav-links.active{display:flex}.nav-brutalist-glitch a{border-right:none;border-bottom:2px solid #fff;padding:1.2rem;text-align:left}.nav-brutalist-glitch a:last-child{border-bottom:none}.nav-brutalist-glitch a .index{display:inline;margin-right:1rem}.nav-brutalist-glitch a .text{display:inline}}.page-transition{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;pointer-events:none;overflow:hidden}.page-transition.active{pointer-events:all}.page-transition .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0a0a;transform:translateY(-100%)}.page-transition.active .overlay{animation:slideDown .7s cubic-bezier(.77,0,.175,1) forwards}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.page-transition .glitch-red{position:absolute;top:0;left:0;width:100%;height:100%;background:#ff003c;transform:translateY(-100%);opacity:0}.page-transition.active .glitch-red{animation:glitchLayerRed .7s steps(1) forwards}@keyframes glitchLayerRed{0%{transform:translateY(-100%);opacity:0}20%{transform:translateY(-60%) translate(-10px);opacity:.8}25%{transform:translateY(-60%) translate(10px);opacity:.8}40%{transform:translateY(-20%) translate(-5px);opacity:.6}45%{transform:translateY(-20%) translate(5px);opacity:0}to{transform:translateY(0);opacity:0}}.page-transition .glitch-cyan{position:absolute;top:0;left:0;width:100%;height:100%;background:#00fff2;transform:translateY(-100%);opacity:0}.page-transition.active .glitch-cyan{animation:glitchLayerCyan .7s steps(1) forwards}@keyframes glitchLayerCyan{0%{transform:translateY(-100%);opacity:0}22%{transform:translateY(-55%) translate(10px);opacity:.8}27%{transform:translateY(-55%) translate(-10px);opacity:.8}42%{transform:translateY(-15%) translate(5px);opacity:.6}47%{transform:translateY(-15%) translate(-5px);opacity:0}to{transform:translateY(0);opacity:0}}.page-transition .scanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px);opacity:0;z-index:10}.page-transition.active .scanlines{animation:showScanlines .7s ease forwards}@keyframes showScanlines{0%{opacity:0}30%{opacity:1}to{opacity:1}}.page-transition .glitch-bar{position:absolute;left:0;width:100%;height:20px;background:#ff0;opacity:0;z-index:5}.page-transition.active .glitch-bar:nth-child(4){top:15%;animation:glitchBar .7s ease forwards}.page-transition.active .glitch-bar:nth-child(5){top:35%;animation:glitchBar .7s ease .05s forwards}.page-transition.active .glitch-bar:nth-child(6){top:55%;animation:glitchBar .7s ease .1s forwards}.page-transition.active .glitch-bar:nth-child(7){top:75%;animation:glitchBar .7s ease .15s forwards}.page-transition.active .glitch-bar:nth-child(8){top:90%;animation:glitchBar .7s ease .2s forwards}@keyframes glitchBar{0%{transform:translate(-100%);opacity:0}20%{transform:translate(0);opacity:1}25%{transform:translate(10px);opacity:1}30%{transform:translate(-5px);opacity:.8}35%{transform:translate(100%);opacity:0}to{opacity:0}}.page-transition .loading-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Space Mono,monospace;font-size:3rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5em;opacity:0;z-index:20}.page-transition.active .loading-text{animation:loadingText .7s ease forwards}.page-transition .loading-text:before,.page-transition .loading-text:after{content:"LOADING";position:absolute;top:0;left:0;width:100%;height:100%}.page-transition .loading-text:before{color:#ff003c;z-index:-1}.page-transition .loading-text:after{color:#00fff2;z-index:-1}.page-transition.active .loading-text:before{animation:textGlitchRed .3s steps(2) infinite}.page-transition.active .loading-text:after{animation:textGlitchCyan .3s steps(2) infinite}@keyframes loadingText{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}@keyframes textGlitchRed{0%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-2px)}to{transform:translate(0)}}@keyframes textGlitchCyan{0%{transform:translate(0)}25%{transform:translate(4px,-2px)}50%{transform:translate(-4px,2px)}75%{transform:translate(2px,2px)}to{transform:translate(0)}}