/* HYBRID — Navigation (Dynamic Island) */

nav{position:fixed;top:10px;left:50%;transform:translate3d(-50%,0,0);width:min(1180px,96vw);z-index:1000;height:60px;display:flex;align-items:center;padding:0 clamp(20px,5vw,80px);background:rgba(20, 20, 20, 0.5);backdrop-filter:blur(12px) saturate(1.8) brightness(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.8) brightness(1.2);border:1px solid rgba(255, 255, 255, 0.08);will-change:transform,width,height,padding;backface-visibility:hidden;box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.1),inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);border-radius:980px}
nav.scrolled{transform:translate3d(-50%,8px,0);width:min(680px,90vw);height:48px;border-radius:980px;background:rgba(20, 20, 20, 0.65);border-color:rgba(255, 255, 255, 0.1);box-shadow:inset 0 1px 0 0 rgba(255, 255, 255, 0.05),inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);padding:0 24px}

/* GPU-accelerated transition — only animate specific properties for smoothness */
nav{transition-property:transform,width,height,padding,background,border-radius,box-shadow,border-color;transition-duration:.36s;transition-timing-function:cubic-bezier(.22,.61,.36,1)}

.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;height:100%}
.nav-links{display:flex;gap:24px;margin-left:auto;list-style:none;align-items:center}
.nav-links a{font-family:var(--fb);font-size:13px;font-weight:400;color:var(--fg2);text-decoration:none;transition:color .25s}
.nav-links a:hover{color:var(--y)}
.nav-cta{margin-left:16px;padding:7px 18px;border-radius:980px;background:rgba(245,200,0,.12);border:1px solid rgba(245,200,0,.25);color:var(--y);font-family:var(--fb);font-size:12px;font-weight:600;text-decoration:none;transition:all .3s var(--ease)}
.nav-cta:hover{background:rgba(245,200,0,.22);box-shadow:var(--bloom);color:#fff}

/* Hamburger — clean X animation */
.nav-hamburger{display:none;background:transparent;border:none;cursor:pointer;margin-left:auto;padding:10px;outline:none;-webkit-tap-highlight-color:transparent;border-radius:12px;box-shadow:none;position:relative;width:42px;height:42px}
.nav-hamburger span{display:block;width:22px;height:2px;background:linear-gradient(90deg,#fff,var(--y));border-radius:999px;position:absolute;left:50%;transform:translateX(-50%);transition:transform .3s cubic-bezier(.4,.01,.165,.99),opacity .25s ease}
.nav-hamburger span:nth-child(1){top:13px}
.nav-hamburger span:nth-child(2){top:20px}
.nav-hamburger span:nth-child(3){top:27px}
.nav-hamburger:hover span{background:linear-gradient(90deg,#fff,#ffe278)}
.nav-hamburger.is-active span:nth-child(1){top:20px;transform:translateX(-50%) rotate(45deg)}
.nav-hamburger.is-active span:nth-child(2){opacity:0;transform:translateX(-50%) scaleX(0)}
.nav-hamburger.is-active span:nth-child(3){top:20px;transform:translateX(-50%) rotate(-45deg)}

/* Mobile dropdown */
.nav-mobile{display:none;position:fixed;top:78px;left:12px;right:12px;z-index:999;border-radius:20px;background:var(--nav-bg);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--card-border);flex-direction:column;padding:12px 0;transition:top .25s var(--ease)}
.nav-mobile.is-scrolled{top:72px}
.nav-mobile.open{display:flex;animation:navSlide .3s var(--ease)}
.nav-mobile a{font-family:var(--fb);font-size:15px;color:var(--fg2);text-decoration:none;padding:14px 28px;transition:color .2s}
.nav-mobile a:hover{color:var(--y);background:rgba(245,200,0,.04)}
.nav-mobile a[href*="membership.html"]{color:var(--y);background:rgba(245,200,0,.1);border-top:1px solid rgba(245,200,0,.14);border-bottom:1px solid rgba(245,200,0,.14)}
@keyframes navSlide{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:768px){
	nav{background:rgba(16,18,22,.62);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);box-shadow:0 4px 14px rgba(0,0,0,.2)}
	.nav-mobile{background:rgba(12,14,18,.7);backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)}
}