/* Rouby 3.0 kinetisch fullscreen-menu. Consumeert tokens uit tokens.css.
   Progressive enhancement: werkt zonder JS/GSAP via [data-state], GSAP laagt
   de stagger eroverheen. Geen blobs, geen gradients: paars/zwart + Geomini. */

/* Sr-only helper (nog niet in base) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Menu-knop in de nav */
.menu-toggle {
  --mt-h: 2px;
  position: relative; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.55rem 0.55rem 0.95rem;
  border: 1px solid rgba(246, 244, 249, 0.22); border-radius: var(--radius-pill);
  background: transparent; color: var(--paper); cursor: pointer;
  font: 600 0.95rem/1 var(--font-text);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--accent-lila); color: var(--accent-lila); }

.menu-toggle-label { position: relative; display: block; height: 1em; overflow: hidden; }
.menu-toggle-word { display: block; height: 1em; transition: transform var(--dur) var(--ease-out); }
.menu-toggle-word + .menu-toggle-word { position: absolute; top: 100%; left: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-word { transform: translateY(-100%); }

.menu-toggle-icon { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.menu-toggle-icon span { position: absolute; width: 15px; height: var(--mt-h); border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.menu-toggle-icon span:first-child { transform: rotate(0deg); }
.menu-toggle-icon span:last-child { transform: rotate(90deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: rotate(135deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: rotate(45deg); }

/* Overlay-container. Dekkende nacht-achtergrond als vangnet: ook zonder GSAP
   (of als rAF pauzeert) blijft de overlay ondoorzichtig en leesbaar. */
.site-menu {
  position: fixed; inset: 0; z-index: 80;
  visibility: hidden; pointer-events: none;
  background: var(--canvas-nacht); color: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
}
.site-menu[data-state="open"] { visibility: visible; pointer-events: auto; }
/* Verberg de vaste mobiele CTA-balk zolang het menu open is */
body.menu-open .cta-bar, body.menu-open .chat-float { display: none; }

/* Paars getinte panelen die inschuiven (nacht als basis, geen vierde canvas) */
.site-menu-panels { position: absolute; inset: 0; z-index: 0; }
.site-menu-panel { position: absolute; inset: 0; transform: translateX(101%); }
.site-menu-panel:nth-child(1) { background: #150e29; }
.site-menu-panel:nth-child(2) { background: #1d1338; }
.site-menu-panel:nth-child(3) {
  background:
    linear-gradient(90deg, rgba(11, 10, 16, 0.5), rgba(11, 10, 16, 0.74)),
    var(--canvas-nacht) url("../img/menu-bg.jpg") center / cover no-repeat;
  /* Rode accenten uit de referentie naar Rouby-lila trekken (color consistency) */
  filter: hue-rotate(255deg) saturate(0.85);
}
/* Vangnet: zodra het menu open is staan de panelen op hun plek (dus de
   achtergrond is altijd zichtbaar); GSAP legt de slide-in hier bovenop. */
.site-menu[data-state="open"] .site-menu-panel { transform: translateX(0); }
.no-gsap .site-menu[data-state="open"] .site-menu-panel { transition: transform var(--dur-slow) var(--ease-out); }

/* Abstracte vormen die bij hover van een link verschijnen (component-signatuur) */
.menu-shapes {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  overflow: hidden; pointer-events: none;
}
.menu-shape {
  position: absolute; width: min(74vh, 600px); max-width: 92vw; aspect-ratio: 1;
  opacity: 0; visibility: hidden;
}
.menu-shape.active { opacity: 1; visibility: visible; }
.menu-shape svg { width: 100%; height: 100%; display: block; overflow: visible; }
.menu-shape-el { opacity: 0; transform-box: fill-box; transform-origin: center; }
/* Vangnet: actieve vormen zijn zichtbaar ook als GSAP niet draait; GSAP legt de
   stagger-animatie hier bovenop wanneer beweging is toegestaan. */
.menu-shape.active .menu-shape-el { opacity: 1; }

/* Inhoud */
.site-menu-inner {
  position: relative; z-index: 2; min-height: 100%;
  display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--space-inner);
  padding-block: clamp(5rem, 12vh, 8rem);
}

.site-menu-list { list-style: none; margin: 0; padding: 0; }
.site-menu-item { overflow: hidden; }
.site-menu-link {
  display: flex; align-items: baseline; gap: clamp(0.8rem, 2vw, 1.6rem);
  padding-block: clamp(0.3rem, 1.1vh, 0.7rem);
  color: var(--paper); text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.site-menu-word { font-family: var(--font-display); font-weight: 620; letter-spacing: -0.02em; font-size: clamp(2.6rem, 1rem + 6.5vw, 5.4rem); line-height: 1; }
.site-menu-link:hover, .site-menu-link:focus-visible { color: var(--accent-lila); }
.site-menu-link:hover .site-menu-word, .site-menu-link:focus-visible .site-menu-word { font-style: italic; }

/* Zijkolom: directe contactroutes */
.site-menu-aside { align-self: center; max-width: 34ch; justify-self: end; width: 100%; }
.site-menu-kicker { font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 1rem; }
.site-menu-routes { display: grid; gap: 0.6rem; }
.site-menu-route {
  display: grid; gap: 0.15rem; padding: 0.85rem 1rem;
  border: 1px solid rgba(246, 244, 249, 0.16); border-radius: var(--radius);
  /* Frosted backdrop zodat tekst leesbaar blijft over het beeld */
  background: rgba(15, 12, 26, 0.42);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(246, 244, 249, 0.06);
  color: var(--paper); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}
@media (prefers-reduced-transparency: reduce) {
  .site-menu-route { background: rgba(15, 12, 26, 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.site-menu-route:hover, .site-menu-route:focus-visible { border-color: var(--accent-lila); translate: 0 -2px; }
.site-menu-route strong { font-weight: 600; }
.site-menu-route span { color: var(--paper-dim); font-size: 0.85rem; }
.site-menu-meta { margin: 1.4rem 0 0; color: var(--paper-dim); font-size: 0.82rem; line-height: 1.5; }
.site-menu-meta a { color: var(--accent-lila); text-decoration: none; }

@media (max-width: 860px) {
  .site-menu-inner { grid-template-columns: 1fr; align-content: center; gap: clamp(2rem, 6vh, 3.4rem); }
  .site-menu-aside { justify-self: stretch; max-width: none; }
  .menu-shape { width: min(60vh, 480px); }
}

/* Reduced motion: geen slide/stagger, vormen tonen direct bij hover */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle-word, .menu-toggle-icon span { transition: none; }
  .site-menu-panel { transform: translateX(0); }
  .site-menu[data-state="closed"] .site-menu-panel { transform: translateX(101%); }
  .menu-shape.active .menu-shape-el { opacity: 1; }
}