/* videograaf-header-shell 1.0.0 · 21st-port van @manuarora700/floating-dock (21st.dev, motion/react).
   Uit de bron: een afgeronde dock (rounded-2xl = 16 px, h-16 = 64 px, px-4, pb-3, items-end, gap-4 = 16 px) met ronde
   knoppen van 40 px (icoon 20 px) die onder de aanwijzer naar 80 px (icoon 40 px) groeien via een spring met
   mass 0.1, stiffness 150, damping 12 (module.js), een label in een klein kader (rounded-md, border, px-2 py-0.5,
   text-xs) dat met x -50% en y 10 naar 0 invliegt en naar y 2 vertrekt, en onder md een losse mobiele versie: een
   ronde knop van 40 px die een verticale stapel ronde knoppen van 40 px met gap 8 uitvouwt (y 10 naar 0, 0,05 s per
   item). Eigen schil: vaste balk van 72 px (--m-bg op 85% met backdrop-blur, 1 px --m-line) met merknaam links en
   omrande pill-knop rechts. Afwijkingen voor leesbaarheid: het label staat in rust als 11 px tekst onder iedere knop,
   het kader verschijnt onder de knop (boven zit de bovenrand van het scherm) en de mobiele stapel vouwt onder de knop
   uit omdat de balk bovenaan staat. */
.msm-videograaf-header-shell {
  --kl-ease: cubic-bezier(.25, .1, .25, 1);
  --kl-spring: cubic-bezier(.2, .9, .3, 1.05);
  --kl-spring-ms: 450ms;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  width: 100%;
  color: var(--m-ink, #f5f2ea);
  font-family: var(--m-font-body, 'DM Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-videograaf-header-shell *,
.msm-videograaf-header-shell *::before,
.msm-videograaf-header-shell *::after { box-sizing: border-box; }
.msm-videograaf-header-shell svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.msm-videograaf-header-shell a { color: inherit; text-decoration: none; }
.msm-videograaf-header-shell a:focus-visible,
.msm-videograaf-header-shell button:focus-visible { outline: 2px solid var(--m-primary, #e55b34); outline-offset: 3px; border-radius: 999px; }

/* De eigen balk. */
.msm-videograaf-header-shell .kl-nav {
  position: relative;
  height: 72px;
  background: color-mix(in srgb, var(--m-bg, #11130f) 85%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--m-line, #2b2e28);
}
.msm-videograaf-header-shell .kl-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
.msm-videograaf-header-shell .kl-brand {
  position: relative;
  z-index: 2;
  font-family: var(--m-font-display, 'Syne', ui-sans-serif, system-ui, sans-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  line-height: 1;
}
.msm-videograaf-header-shell .kl-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--m-primary, #e55b34);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s var(--kl-ease), color .2s var(--kl-ease);
}
.msm-videograaf-header-shell .kl-cta:hover { background: var(--m-primary, #e55b34); color: var(--m-bg, #11130f); }

/* De dock uit de bron: rounded-2xl, h-16, px-4 pb-3, items-end, gap-4. Hij hangt over de onderrand van de balk,
   zodat een knop van 80 px naar boven kan groeien zonder buiten het scherm te raken. */
.msm-videograaf-header-shell .kl-dock {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 3;
  display: none;
  align-items: flex-end;
  gap: 16px;
  height: 64px;
  padding: 0 16px 12px;
  border-radius: 16px;
  background: var(--m-surface, #1a1d18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px var(--m-line, #2b2e28);
  transform: translateX(-50%);
}
.msm-videograaf-header-shell .kl-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  flex: none;
}
.msm-videograaf-header-shell .kl-knob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--m-line, #2b2e28);
  color: var(--m-muted, #a9a596);
  transition: color .2s var(--kl-ease), background-color .2s var(--kl-ease);
}
.msm-videograaf-header-shell .kl-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.msm-videograaf-header-shell .kl-item:hover .kl-knob,
.msm-videograaf-header-shell .kl-item:focus-visible .kl-knob,
.msm-videograaf-header-shell .kl-item[aria-current] .kl-knob { color: var(--m-ink, #f5f2ea); }
.msm-videograaf-header-shell .kl-item[aria-current] .kl-knob { background: color-mix(in srgb, var(--m-primary, #e55b34) 28%, var(--m-line, #2b2e28)); }
.msm-videograaf-header-shell .kl-item:focus-visible { outline: none; }
.msm-videograaf-header-shell .kl-item:focus-visible .kl-knob { outline: 2px solid var(--m-primary, #e55b34); outline-offset: 2px; }
.msm-videograaf-header-shell .kl-label {
  display: block;
  font-size: 11px;
  line-height: 1;
  color: var(--m-muted, #a9a596);
  white-space: nowrap;
  transition: opacity .15s var(--kl-ease), color .2s var(--kl-ease);
}
.msm-videograaf-header-shell .kl-item[aria-current] .kl-label { color: var(--m-ink, #f5f2ea); }

/* Het label in een klein kader (rounded-md, border, px-2 py-0.5, text-xs, whitespace-pre). In de bron boven de knop
   (-top-8); hier onder de knop omdat de bovenrand van het scherm direct boven de dock ligt. */
.msm-videograaf-header-shell .kl-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 4;
  width: max-content;
  padding: 2px 8px;
  border: 1px solid var(--m-line, #2b2e28);
  border-radius: 6px;
  background: var(--m-surface, #1a1d18);
  color: var(--m-ink, #f5f2ea);
  font-size: 12px;
  line-height: 16px;
  white-space: pre;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s var(--kl-ease), transform var(--kl-spring-ms) var(--kl-spring), visibility 0s linear .3s;
}
.msm-videograaf-header-shell .kl-item.is-hot .kl-tip { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.msm-videograaf-header-shell .kl-item.is-leaving .kl-tip { opacity: 0; transform: translate(-50%, 2px); }
.msm-videograaf-header-shell .kl-item.is-hot .kl-label { opacity: 0; }

/* Mobiele versie: ronde knop rechts, stapel ronde knoppen eronder (in de bron erboven, bottom-full mb-2, gap-2). */
.msm-videograaf-header-shell .kl-mobile { position: relative; z-index: 3; display: flex; align-items: center; }
.msm-videograaf-header-shell .kl-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--m-surface, #1a1d18);
  color: var(--m-muted, #a9a596);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--m-line, #2b2e28);
}
.msm-videograaf-header-shell .kl-toggle svg { width: 20px; height: 20px; }
.msm-videograaf-header-shell .kl-toggle[aria-expanded="true"] { color: var(--m-ink, #f5f2ea); }
.msm-videograaf-header-shell .kl-stack {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.msm-videograaf-header-shell[data-kl-js] .kl-stack:not(.is-open) { display: none; }
.msm-videograaf-header-shell .kl-stack-item {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
}
.msm-videograaf-header-shell .kl-stack.is-in .kl-stack-item { opacity: 1; transform: none; transition: opacity .3s var(--kl-ease) var(--kl-delay, 0s), transform var(--kl-spring-ms) var(--kl-spring) var(--kl-delay, 0s); }
.msm-videograaf-header-shell .kl-stack.is-out .kl-stack-item { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--kl-ease) var(--kl-delay-out, 0s), transform var(--kl-spring-ms) var(--kl-spring) var(--kl-delay-out, 0s); }
.msm-videograaf-header-shell .kl-knob-small { width: 40px; height: 40px; background: var(--m-surface, #1a1d18); box-shadow: 0 0 0 1px var(--m-line, #2b2e28), 0 8px 20px rgba(0, 0, 0, .35); }
.msm-videograaf-header-shell .kl-knob-small svg { width: 16px; height: 16px; }
.msm-videograaf-header-shell .kl-stack-label {
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-bg, #11130f) 92%, transparent);
  box-shadow: 0 0 0 1px var(--m-line, #2b2e28);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.msm-videograaf-header-shell .kl-stack-item[aria-current] .kl-stack-label { color: var(--m-primary, #e55b34); }
.msm-videograaf-header-shell .kl-stack-cta .kl-stack-label { border: 1px solid var(--m-primary, #e55b34); box-shadow: none; }
.msm-videograaf-header-shell .kl-stack-cta .kl-knob-small { color: var(--m-primary, #e55b34); }

/* Zonder JavaScript: de stapel als gewone rij links onder de balk. */
.msm-videograaf-header-shell:not([data-kl-js]) .kl-toggle { display: none; }
.msm-videograaf-header-shell:not([data-kl-js]) .kl-stack {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 0;
}
.msm-videograaf-header-shell:not([data-kl-js]) .kl-stack-item { opacity: 1; transform: none; }
.msm-videograaf-header-shell:not([data-kl-js]) .kl-knob-small { display: none; }
.msm-videograaf-header-shell:not([data-kl-js]) .kl-mobile { position: absolute; top: 100%; right: 16px; left: 16px; z-index: 1; display: block; background: color-mix(in srgb, var(--m-bg, #11130f) 85%, transparent); }

@media (max-width: 559.98px) {
  .msm-videograaf-header-shell .kl-cta { display: none; }
}
@media (min-width: 560px) {
  .msm-videograaf-header-shell .kl-stack-cta { display: none; }
}
@media (max-width: 1023.98px) {
  .msm-videograaf-header-shell .kl-cta { min-height: 36px; padding: 0 14px; font-size: 13px; }
}
@media (min-width: 768px) {
  .msm-videograaf-header-shell .kl-dock { display: flex; }
  .msm-videograaf-header-shell .kl-mobile { display: none; }
  .msm-videograaf-header-shell .kl-bar { padding: 0 24px; }
}
@media (min-width: 1024px) {
  .msm-videograaf-header-shell .kl-bar { padding: 0 32px; }
}
@media (hover: none) {
  .msm-videograaf-header-shell .kl-tip { display: none; }
  .msm-videograaf-header-shell .kl-item.is-hot .kl-label { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-videograaf-header-shell .kl-knob,
  .msm-videograaf-header-shell .kl-icon { width: 40px !important; height: 40px !important; transition: none; }
  .msm-videograaf-header-shell .kl-icon { width: 20px !important; height: 20px !important; }
  .msm-videograaf-header-shell .kl-tip,
  .msm-videograaf-header-shell .kl-label,
  .msm-videograaf-header-shell .kl-cta { transition: none; }
  .msm-videograaf-header-shell .kl-item.is-hot .kl-tip { transform: translate(-50%, 0); }
  .msm-videograaf-header-shell .kl-item.is-hot .kl-label { opacity: 1; }
  .msm-videograaf-header-shell .kl-stack.is-in .kl-stack-item,
  .msm-videograaf-header-shell .kl-stack.is-out .kl-stack-item { transform: none; transition: opacity .2s linear; }
}