/* personal-trainer-header-shell 1.0.0 · vanilla port van de 21st.dev Dither Sweep Navbar (@kedhareswer) voor
   Krachtlijn Coaching. Haarlijn-cellen, pixeldissolve van 24 bij 6 cellen, rollend label en een vaste balk die
   bij omlaag scrollen wegschuift. Kleuren alleen via --m-*; de labels staan in IBM Plex Mono uit de hero-fonts. */
.msm-personal-trainer-header-shell {
  /* Vloeiende eenheid van de bron (10 px op 1728 / 834 / 393 breed), op desktop met scale 1.2 en een ondergrens. */
  --ph-u: max(7.2px, calc(0.5787407vw * 1.2));
  --ph-b: max(1px, calc(var(--ph-u) * 0.1));
  --ph-ink: var(--m-ink, #17221c);
  --ph-paper: var(--m-surface, #f9fbf7);
  --ph-rule: var(--m-line, #cdd4cb);
  --ph-accent: var(--m-primary, #e14b32);
  --ph-dim: color-mix(in srgb, var(--m-ink, #17221c) 72%, transparent);
  --ph-cta-ink: color-mix(in srgb, var(--m-primary, #e14b32) 76%, var(--m-ink, #17221c));
  --ph-fill-color: var(--ph-ink);
  --ph-cell: 180ms;
  --ph-roll: cubic-bezier(0.625, 0.05, 0, 1);
  position: fixed;
  top: calc(var(--ph-u) * 0.8);
  left: calc(var(--ph-u) * 0.8);
  right: calc(var(--ph-u) * 0.8);
  z-index: 60;
  margin: 0;
  pointer-events: none;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}
.msm-personal-trainer-header-shell *,
.msm-personal-trainer-header-shell *::before,
.msm-personal-trainer-header-shell *::after { box-sizing: border-box; }

.msm-personal-trainer-header-shell .ph-bar {
  position: relative;
  transition: transform 0.4s ease;
  background-color: var(--ph-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: auto;
}
/* Wegschuiven: 101 procent plus de inzet boven de balk, zodat er geen strook blijft hangen. */
.msm-personal-trainer-header-shell.is-hidden .ph-bar { transform: translateY(calc(-101% - var(--ph-u) * 0.8)); }

/* Haarlijnen: één onderlijn voor de balk en één linkerlijn per cel, zodat lijnen nooit dubbel worden. */
.msm-personal-trainer-header-shell .ph-rule { position: absolute; z-index: 2; background-color: var(--ph-rule); pointer-events: none; }
.msm-personal-trainer-header-shell .ph-rule-b { left: 0; right: 0; bottom: 0; height: var(--ph-b); }
.msm-personal-trainer-header-shell .ph-rule-l { left: 0; top: 0; width: var(--ph-b); height: 100%; }

.msm-personal-trainer-header-shell .ph-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(1px, 1fr));
  column-gap: calc(var(--ph-u) * 2);
}

/* Merknaam als tekst in de displayletter; het pixelbeeldmerk van de bron vervalt. */
.msm-personal-trainer-header-shell .ph-logo {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: calc(var(--ph-u) * 1.2) 0 calc(var(--ph-u) * 1.2) calc(var(--ph-u) * 3.2);
}
.msm-personal-trainer-header-shell .ph-word {
  display: block;
  color: var(--ph-ink);
  font-family: var(--m-font-display, 'Oswald', ui-sans-serif, system-ui, sans-serif);
  font-size: calc(var(--ph-u) * 2.4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
}
.msm-personal-trainer-header-shell .ph-word:focus-visible { outline: var(--ph-b) solid var(--ph-accent); outline-offset: calc(var(--ph-u) * 0.4); }

.msm-personal-trainer-header-shell .ph-nav {
  grid-column: 4 / 13;
  display: flex;
  margin-left: calc(var(--ph-u) * -1);
}
.msm-personal-trainer-header-shell .ph-menu { display: flex; width: 100%; margin: 0; padding: 0; list-style: none; }
.msm-personal-trainer-header-shell .ph-item { position: relative; flex: 1; min-width: 0; }

/* Een cel */
.msm-personal-trainer-header-shell .ph-fill {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: calc(var(--ph-u) * 1.2);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ph-dim);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s var(--ph-roll);
}
.msm-personal-trainer-header-shell .ph-fill:hover,
.msm-personal-trainer-header-shell .ph-fill:focus-visible,
.msm-personal-trainer-header-shell .ph-item.is-active .ph-fill { color: var(--ph-paper); }
.msm-personal-trainer-header-shell .ph-fill:focus-visible { outline: var(--ph-b) solid var(--ph-accent); outline-offset: calc(var(--ph-u) * -0.4); }

/* De dissolve: 24 bij 6 vierkante cellen, groter dan de cel en afgeknipt door overflow. */
.msm-personal-trainer-header-shell .ph-px {
  position: absolute;
  z-index: 0;
  top: calc(var(--ph-b) * -1);
  left: calc(var(--ph-b) * -1);
  height: calc(100% + var(--ph-b) * 2);
  aspect-ratio: 24 / 6;
  min-width: calc(100% + var(--ph-b) * 2);
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
}
.msm-personal-trainer-header-shell .ph-px i {
  display: block;
  background-color: var(--ph-fill-color);
  opacity: 0;
  transition: opacity var(--ph-cell) linear var(--ph-d, 0ms);
}
.msm-personal-trainer-header-shell .ph-fill:hover .ph-px i,
.msm-personal-trainer-header-shell .ph-fill:focus-visible .ph-px i,
.msm-personal-trainer-header-shell .ph-item.is-active .ph-px i { opacity: 1; }
/* Zonder script (geen pixels): een gewone vulling. */
.msm-personal-trainer-header-shell:not(.is-px) .ph-fill:hover,
.msm-personal-trainer-header-shell:not(.is-px) .ph-fill:focus-visible { background-color: var(--ph-fill-color); }

/* Rollend label: de tekst staat er twee keer en rolt omhoog. */
.msm-personal-trainer-header-shell .ph-label { position: relative; z-index: 3; flex: 1; align-self: flex-start; display: grid; overflow: hidden; min-width: 0; }
.msm-personal-trainer-header-shell .ph-label span {
  grid-area: 1 / 1;
  font-size: calc(var(--ph-u) * 1.4);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.48s var(--ph-roll);
}
.msm-personal-trainer-header-shell .ph-label span + span { transform: translateY(100%); }
.msm-personal-trainer-header-shell .ph-fill:hover .ph-label span,
.msm-personal-trainer-header-shell .ph-fill:focus-visible .ph-label span,
.msm-personal-trainer-header-shell .ph-item.is-active .ph-label span { transform: translateY(-100%); }
.msm-personal-trainer-header-shell .ph-fill:hover .ph-label span + span,
.msm-personal-trainer-header-shell .ph-fill:focus-visible .ph-label span + span,
.msm-personal-trainer-header-shell .ph-item.is-active .ph-label span + span { transform: translateY(0); }

/* CTA-cel: vulling in --m-primary, pijl die meeschuift. */
.msm-personal-trainer-header-shell .ph-cta {
  flex: none;
  width: calc(var(--ph-u) * 24);
  --ph-fill-color: var(--ph-accent);
}
.msm-personal-trainer-header-shell .ph-cta .ph-fill {
  flex-direction: row;
  color: var(--ph-cta-ink);
  padding: calc(var(--ph-u) * 1.2) calc(var(--ph-u) * 0.4) calc(var(--ph-u) * 0.4) calc(var(--ph-u) * 1.2);
}
.msm-personal-trainer-header-shell .ph-cta .ph-fill:hover,
.msm-personal-trainer-header-shell .ph-cta .ph-fill:focus-visible,
.msm-personal-trainer-header-shell .ph-cta.is-active .ph-fill { color: var(--ph-paper); }
.msm-personal-trainer-header-shell .ph-arrow { position: relative; z-index: 3; align-self: flex-end; flex: none; width: calc(var(--ph-u) * 2); overflow: hidden; }
.msm-personal-trainer-header-shell .ph-arrow svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.msm-personal-trainer-header-shell .ph-arrow span { display: block; transition: transform 0.48s var(--ph-roll); }
.msm-personal-trainer-header-shell .ph-arrow span + span { position: absolute; inset: 0; transform: translateX(-100%); }
.msm-personal-trainer-header-shell .ph-fill:hover .ph-arrow span,
.msm-personal-trainer-header-shell .ph-fill:focus-visible .ph-arrow span { transform: translateX(100%); }
.msm-personal-trainer-header-shell .ph-fill:hover .ph-arrow span + span,
.msm-personal-trainer-header-shell .ph-fill:focus-visible .ph-arrow span + span { transform: translateX(0); }

/* Menuknop (alleen onder 992 px) */
.msm-personal-trainer-header-shell .ph-burger { display: none; }
.msm-personal-trainer-header-shell .ph-burger-ic { position: absolute; right: calc(var(--ph-u) * 1.6); display: flex; flex-direction: column; gap: calc(var(--ph-u) * 0.2); width: calc(var(--ph-u) * 1.5); }
.msm-personal-trainer-header-shell .ph-burger-ic b { display: block; width: 100%; height: var(--ph-b); background-color: var(--ph-ink); transform-origin: 50%; transition: transform 0.4s ease; }

@media (max-width: 991px) {
  .msm-personal-trainer-header-shell { --ph-u: calc(1.1990408vw); }
  .msm-personal-trainer-header-shell .ph-logo { grid-column: 1 / 7; padding-left: calc(var(--ph-u) * 2.4); }
  .msm-personal-trainer-header-shell .ph-nav { grid-column: 7 / 13; margin-left: calc(var(--ph-u) * -0.8); }
  .msm-personal-trainer-header-shell.is-ready .ph-burger {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 44px;
    margin: 0;
    padding: calc(var(--ph-u) * 1.2);
    border: 0;
    background: none;
    color: var(--ph-dim);
    font: inherit;
    font-size: calc(var(--ph-u) * 1.4);
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
  }
  .msm-personal-trainer-header-shell .ph-burger:focus-visible { outline: var(--ph-b) solid var(--ph-accent); outline-offset: calc(var(--ph-u) * -0.4); }
  .msm-personal-trainer-header-shell .ph-burger[aria-expanded="true"] .ph-burger-ic b:first-child,
  .msm-personal-trainer-header-shell .ph-burger[aria-expanded="true"] .ph-burger-ic b:last-child { transform: scaleX(0); }
  /* Het paneel klapt open met clip-path, over de volle breedte van de balk. */
  .msm-personal-trainer-header-shell.is-ready .ph-nav { position: static; }
  .msm-personal-trainer-header-shell.is-ready .ph-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    width: 100%;
    border-left: var(--ph-b) solid var(--ph-rule);
    border-right: var(--ph-b) solid var(--ph-rule);
    background-color: var(--ph-paper);
    clip-path: inset(0 0 100%);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 0.4s ease, visibility 0s linear 0.4s;
  }
  .msm-personal-trainer-header-shell.is-ready .ph-menu.is-open { clip-path: inset(0); visibility: visible; pointer-events: auto; transition: clip-path 0.4s ease, visibility 0s linear 0s; }
  /* Zonder script staan de links als tweede rij onder de merknaam. */
  .msm-personal-trainer-header-shell:not(.is-ready) .ph-logo { grid-column: 1 / 13; }
  .msm-personal-trainer-header-shell:not(.is-ready) .ph-nav { grid-column: 1 / 13; margin-left: 0; }
  .msm-personal-trainer-header-shell:not(.is-ready) .ph-menu { flex-wrap: wrap; }
  .msm-personal-trainer-header-shell .ph-item { flex: 0 auto; }
  .msm-personal-trainer-header-shell.is-ready .ph-item > .ph-rule-l { display: none; }
  .msm-personal-trainer-header-shell.is-ready .ph-fill { min-height: 44px; border-bottom: var(--ph-b) solid var(--ph-rule); }
  .msm-personal-trainer-header-shell .ph-cta { width: 100%; }
}

@media (max-width: 767px) {
  .msm-personal-trainer-header-shell { --ph-u: calc(2.5445293vw); }
  .msm-personal-trainer-header-shell .ph-logo { grid-column: 1 / 9; padding: var(--ph-u) 0 var(--ph-u) calc(var(--ph-u) * 1.2); }
  .msm-personal-trainer-header-shell .ph-nav { grid-column: 9 / 13; }
  .msm-personal-trainer-header-shell .ph-word { font-size: calc(var(--ph-u) * 2); }
}

@media (prefers-reduced-motion: reduce) {
  .msm-personal-trainer-header-shell .ph-px i { transition-delay: 0s; transition-duration: 0.12s; }
  .msm-personal-trainer-header-shell .ph-bar,
  .msm-personal-trainer-header-shell .ph-menu,
  .msm-personal-trainer-header-shell .ph-label span,
  .msm-personal-trainer-header-shell .ph-arrow span,
  .msm-personal-trainer-header-shell .ph-burger-ic b,
  .msm-personal-trainer-header-shell .ph-fill { transition-duration: 0.01ms; }
}