/* Shared Navbar + Logo styles for web-revive
 * Imported by index.html (landing) and stage.html (particle page) to keep navigation visually identical. */

@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/quicksand/quicksand-v37-latin-500.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/quicksand/quicksand-v37-latin-700.woff2') format('woff2');}

.site-logo{position:absolute;top:30px;top:calc(30px + env(safe-area-inset-top));left:8%;z-index:20}
.site-logo a{text-decoration:none}
.logo-text{font-family:'Quicksand',sans-serif;font-weight:700;font-size:22px;letter-spacing:2px;color:#fff;text-transform:lowercase}

.floating-nav-wrap{position:fixed;top:24px;top:calc(24px + env(safe-area-inset-top));left:50%;transform:translate3d(-50%,0,0);z-index:9999;display:flex;align-items:center;gap:8px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.floating-nav{display:flex;align-items:center;gap:2px;height:40px;padding:0 6px;border-radius:100px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,.1);animation:none!important;transform:translateZ(0);isolation:isolate}
.nav-link{position:relative;font-family:'Quicksand',sans-serif;font-weight:500;font-size:12px;letter-spacing:-0.02em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:5px 12px;border-radius:100px;white-space:nowrap;transition:color .3s ease,background .3s ease;text-decoration:none;transform:translateZ(0)}
.nav-link:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.06)}
.nav-link.active{color:rgba(255,255,255,.9)}

/* === Mobile Burger-Menu (P1.3) ===
   Unter 768px: Pills + Stage-Pill hidden. Burger-Button rechts oben (mirror-Position zum Logo).
   Klick → Fullscreen-Drawer mit allen Links untereinander, klassische Mobile-Pattern. */
.burger-toggle{display:none;position:fixed;top:24px;top:calc(24px + env(safe-area-inset-top));right:24px;right:calc(24px + env(safe-area-inset-right));z-index:10000;width:44px;height:44px;border-radius:100px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,.1);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center}
.burger-toggle:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}
.burger-toggle .bar{display:block;width:18px;height:1.5px;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.burger-toggle .bar+.bar{margin-top:5px}
.burger-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.burger-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-drawer{display:none;position:fixed;inset:0;z-index:9998;background:rgba(5,4,3,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);opacity:0;pointer-events:none;transition:opacity .3s ease}
.mobile-drawer.is-open{opacity:1;pointer-events:auto}
.mobile-drawer .nav-link{font-size:18px;padding:14px 28px;letter-spacing:.05em;color:rgba(255,255,255,.85)}
.mobile-drawer .nav-link.active{color:#fff;background:rgba(255,255,255,.05)}
.mobile-drawer .nav-link:hover{color:#fff}

@media (max-width:767px){
  .floating-nav-wrap{display:none}
  .burger-toggle{display:inline-flex}
  .mobile-drawer{display:flex}
  body.mobile-drawer-open{overflow:hidden}
}