/* Menubalk en menulade, gelijk op elke pagina.
   De homepage heeft een uitgebreidere lade met eigen effecten; de balk
   en de opmaak van de lade komen voor alle pagina's uit dit bestand. */

:root{
  --nav-ink:#0F0E0C; --nav-page:#fff; --nav-rule:#E8E6E1;
  --nav-sp1:8px; --nav-sp2:16px; --nav-sp3:24px; --nav-sp4:32px; --nav-sp6:48px;
}

/* ---------- Balk ---------- */
nav.nav{display:flex;align-items:center;justify-content:space-between;
  padding:var(--nav-sp2) var(--nav-sp2) 2px;background:var(--nav-page);
  position:static;height:auto;border-bottom:none;backdrop-filter:none;}
.nav-logo{display:flex;align-items:center;gap:var(--nav-sp1);}
.nav-mark{width:80px;height:80px;display:flex;align-items:center;justify-content:center;
  background:transparent;overflow:visible;flex-shrink:0;margin-left:-20px;}
.nav-mark img{width:auto;height:56px;display:block;margin-left:-16px;}
.nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;
  padding:var(--nav-sp1) 4px;background:none;border:none;}
.nav-burger span{display:block;height:1.5px;background:var(--nav-ink);border-radius:2px;
  transition:width .18s ease;}
.nav-burger span:first-child{width:22px;}
.nav-burger span:last-child{width:16px;}
.nav-burger:hover span:last-child{width:22px;}
.nav-burger:focus-visible{outline:2px solid #E8294A;outline-offset:3px;border-radius:4px;}

/* ---------- Lade ---------- */
.nav-menu{position:fixed;inset:0;background:#010d01;z-index:9000;display:flex;
  flex-direction:column;align-items:flex-start;justify-content:center;
  padding:var(--nav-sp6) var(--nav-sp4);opacity:0;pointer-events:none;
  transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease;overflow:hidden;}
.nav-menu.open{opacity:1;pointer-events:all;transform:translateY(0);}
.nav-menu-inner{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;width:100%;height:100%;}
.nav-menu-links{display:flex;flex-direction:column;gap:2px;}
.nav-menu-link{font-family:var(--ff-mono,monospace);font-size:clamp(22px,7vw,36px);
  font-weight:400;color:rgba(255,255,255,.9);text-decoration:none;letter-spacing:.04em;
  padding:6px 0;transition:color .15s,letter-spacing .15s;}
.nav-menu-link:hover{color:#fff;letter-spacing:.08em;}
.nav-menu-close{position:absolute;top:var(--nav-sp3);right:var(--nav-sp3);z-index:10;
  background:none;border:none;font-size:24px;color:rgba(255,255,255,.35);cursor:pointer;
  padding:8px;font-family:var(--ff-mono,monospace);transition:color .15s;}
.nav-menu-close:hover{color:#fff;}

.nav-loop-card{display:flex;align-items:center;gap:12px;margin-top:28px;padding:12px 16px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.25);border-radius:12px;
  text-decoration:none;transition:background .2s,border-color .2s;max-width:280px;}
.nav-loop-card:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 20px rgba(0,0,0,.18);}
.nav-loop-text{display:flex;flex-direction:column;gap:3px;}
.nav-loop-name{font-family:var(--ff-disp,sans-serif);font-size:14px;font-weight:700;
  color:#fff;letter-spacing:-.2px;}
.nav-loop-desc{font-size:12px;color:rgba(255,255,255,.45);font-family:var(--ff-body,sans-serif);}
.nav-menu .loopmark{display:inline-flex;align-items:center;flex:none;}
.nav-menu .loopmark-svg{width:32px;height:32px;display:block;overflow:visible;}
.nav-menu .lm-rot{transform-box:view-box;transform-origin:50px 50px;animation:lmSpin 18s linear infinite;}
.nav-menu .lm-rot2{transform-box:view-box;transform-origin:50px 50px;animation:lmSpin 28s linear infinite reverse;}
@keyframes lmSpin{to{transform-origin:50px 50px;transform:rotate(360deg);}}

body.nav-open{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .nav-menu,.nav-burger span,.nav-loop-card{transition:none;}
  .nav-menu .lm-rot,.nav-menu .lm-rot2{animation:none;}
}