:root{--nav-primary:orange;--nav-secondary:gold;--nav-accent:#ffa50026;--nav-text:#333;--nav-text-light:#666;--nav-border:#ffa50033;--nav-shadow:#0000000f;--nav-glass:#ffffff14;--nav-glass-hover:#ffffff1f;--nav-glass-active:#ffffff2e}nav{background:var(--nav-glass);-webkit-backdrop-filter:blur(30px)saturate(180%);z-index:1000;border:1px solid var(--nav-border);opacity:0;pointer-events:none;filter:blur(8px);border-radius:20px;justify-content:space-between;align-items:center;min-width:600px;height:60px;transition:all .96s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0000000f,0 2px 8px #ffa5000f,0 0 0 1px #ffffff1a,inset 0 1px #ffffff26;padding:0 40px!important}nav.nav-visible{opacity:1;pointer-events:all;filter:blur()}nav.scrolled{background:var(--nav-glass-hover);-webkit-backdrop-filter:blur(35px)saturate(200%);border:1px solid #ffa5004d;box-shadow:0 16px 48px #00000014,0 6px 20px #ffa5001a,0 0 0 1px #ffffff26,inset 0 1px #fff3}nav:before{content:"";pointer-events:none;z-index:-1;background:linear-gradient(135deg,#ffffff1a 0%,#ffffff0d 50%,#ffffff1a 100%);border-radius:20px;position:absolute;inset:0}nav:after{content:"";pointer-events:none;z-index:-1;background:linear-gradient(135deg,#ffa5000d 0%,#ffd70008 50%,#ffa5000d 100%);border-radius:19px;position:absolute;inset:1px}.menu-icon{cursor:pointer;border-radius:12px;flex-direction:column;gap:6px;padding:8px;transition:all .24s;display:none}.menu-icon:hover{background:var(--nav-accent)}.menu-icon span{background:linear-gradient(90deg, var(--nav-primary), var(--nav-secondary));transform-origin:50%;border-radius:4px;width:28px;height:3px;transition:all .24s cubic-bezier(.4,0,.2,1);display:block}.menu-icon.active span:first-child{transform:rotate(45deg)translate(8px,8px)}.menu-icon.active span:nth-child(2){opacity:0;transform:scale(0)}.menu-icon.active span:nth-child(3){transform:rotate(-45deg)translate(7px,-7px)}.nav-links{flex-shrink:0;align-items:center;gap:8px;display:flex}nav ul{align-items:center;margin:0;padding:0;list-style-type:none;display:flex}nav ul li{margin:0}nav ul li a{color:var(--nav-text);-webkit-backdrop-filter:blur(20px);background:0 0;border-radius:12px;align-items:center;gap:8px;padding:12px 20px;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .32s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}nav ul li a:before{content:"";background:linear-gradient(90deg,#0000,#ffa5001a,#0000);width:100%;height:100%;transition:left .48s;position:absolute;top:0;left:-100%}nav ul li a:hover:before{left:100%}nav ul li a:hover{background:var(--nav-accent);color:var(--nav-primary);-webkit-backdrop-filter:blur(25px);transform:translateY(-3px)scale(1.05);box-shadow:0 12px 30px #ffa50033,0 6px 16px #0000001a,0 0 0 1px #ffffff1a}nav ul li a.active{background:linear-gradient(135deg, var(--nav-primary), var(--nav-secondary));color:#fff;-webkit-backdrop-filter:blur(25px);animation:2s ease-in-out infinite activePulse;transform:translateY(-2px)scale(1.02);box-shadow:0 12px 35px #ffa5004d,0 6px 20px #00000026,0 0 0 1px #fff3}@keyframes activePulse{0%,to{box-shadow:0 12px 35px #ffa5004d,0 6px 20px #00000026,0 0 0 1px #fff3}50%{box-shadow:0 16px 45px #ffa50066,0 8px 25px #0003,0 0 0 1px #ffffff4d}}nav ul li a[href=\#about]:after{content:"";opacity:.7;font-family:"Font Awesome 6 Free";font-size:.8rem;font-weight:900}nav ul li a[href=\#projects]:after{content:"";opacity:.7;font-family:"Font Awesome 6 Free";font-size:.8rem;font-weight:900}nav ul li a[href=\#skills]:after{content:"";opacity:.7;font-family:"Font Awesome 6 Free";font-size:.8rem;font-weight:900}nav ul li a[href=\#experience]:after{content:"";opacity:.7;font-family:"Font Awesome 6 Free";font-size:.8rem;font-weight:900}nav ul li a[href=\#contact]:after{content:"";opacity:.7;font-family:"Font Awesome 6 Free";font-size:.8rem;font-weight:900}nav ul li a[href=\#mini-apps]:after{content:"";opacity:.7;font-family:"Font Awesome 6 Free";font-size:.8rem;font-weight:900}@media (width<=1024px){nav{box-sizing:border-box;opacity:1;pointer-events:all;filter:none;-webkit-backdrop-filter:none;background:#ffffffe0;border:1px solid #ffa5004d;align-items:center;width:auto;min-width:auto;display:flex;left:auto;right:16px;overflow:visible;transform:none;padding:0 16px!important}.nav-links{-webkit-backdrop-filter:blur(30px)saturate(180%);opacity:0;text-align:center;pointer-events:none;box-sizing:border-box;filter:blur(4px);z-index:999;background:#fffffff7;border:1px solid #ffa50033;border-radius:16px;flex-direction:column;justify-content:center;width:auto;padding:8px;transition:opacity .25s,filter .25s,transform .25s;display:flex;position:fixed;top:90px;left:16px;right:16px;overflow:visible;transform:translateY(-8px);box-shadow:0 16px 48px #0000001f,0 6px 20px #ffa5001f,0 0 0 1px #ffa50026}.nav-links.active{opacity:1;pointer-events:all;filter:blur();transform:translateY(0)}.menu-icon{display:flex}nav ul li{justify-content:center;width:100%;margin:4px 0;display:flex}nav ul li a{text-align:center;border-radius:10px;justify-content:center;width:100%;padding:14px 20px;font-size:1rem;display:flex}nav ul li a:after{display:none}nav ul li a:hover{transform:none;box-shadow:0 2px 8px #ffa50026}nav ul li a.active{animation:none;transform:none;box-shadow:0 2px 8px #ffa50033}nav.scrolled,nav:hover{background:#fffffff2;border:1px solid #ffa50066}nav.nav-visible{filter:none;-webkit-backdrop-filter:none}}@media (width<=768px){nav{top:12px;right:14px}.nav-links{top:82px;left:14px;right:14px}nav ul li a{padding:13px 16px;font-size:.95rem}}@media (width<=480px){nav{height:52px;top:10px;right:12px}.nav-links{top:72px;left:12px;right:12px}nav ul li a{padding:12px 14px;font-size:.9rem}}html{scroll-behavior:smooth}@media (width>=1025px){nav:hover{background:var(--nav-glass-hover);-webkit-backdrop-filter:blur(35px)saturate(200%);border:1px solid #ffa50059;box-shadow:0 20px 60px #00000014,0 8px 25px #ffa5001f,0 0 0 1px #fff3,inset 0 1px #ffffff40}nav.scrolled{background:var(--nav-glass-hover);-webkit-backdrop-filter:blur(35px)saturate(200%);border:1px solid #ffa5004d;box-shadow:0 16px 48px #00000014,0 6px 20px #ffa5001a,0 0 0 1px #ffffff26,inset 0 1px #fff3}}
