/* Gekopieerd uit NorthByte Lab, effect E551 (lab/effecten/E551-voor-na-slider, 04-10-2026). */
/* ==========================================================================
   E551 · Voor en na met schuifgreep
   Twee foto's van hetzelfde beeld over elkaar; met de greep schuif je de grens.
   De grens beweegt alleen met transform (een vlak dat opzij schuift en de foto
   die er tegengesteld in meeschuift), dus geen clip-path en geen layout.
   Horizontaal is de standaard; data-e551="verticaal" geeft een greep van boven
   naar onder. Werkt met muis, vinger (tik of sleep) en toetsenbord.
   Instellen op .e551:
     --e551-p        startstand van de grens       (standaard 50%)
     --e551-kleur    kleur van lijn en greep       (standaard #fff)
     --e551-ratio    verhouding van het kader      (standaard die van de foto)
   ========================================================================== */

.e551 { margin: 0; --e551-p: 50%; }
.e551-kader {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--e551-ratio, auto);
  border-radius: var(--e551-radius, 16px); background: #ddd;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.e551[data-e551="verticaal"] .e551-kader { touch-action: pan-x pan-y; }
.e551-kader img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.e551-na { position: relative; }

/* Het voor-vlak: schuift opzij, de foto erin schuift even ver terug en staat dus stil */
.e551-knip, .e551-binnen { position: absolute; inset: 0; overflow: hidden; }
.e551-knip { transform: translate3d(calc(var(--e551-p) - 100%), 0, 0); z-index: 1; }
.e551-binnen { transform: translate3d(calc(100% - var(--e551-p)), 0, 0); }
.e551[data-e551="verticaal"] .e551-knip { transform: translate3d(0, calc(var(--e551-p) - 100%), 0); }
.e551[data-e551="verticaal"] .e551-binnen { transform: translate3d(0, calc(100% - var(--e551-p)), 0); }

/* Labels */
.e551-label {
  position: absolute; z-index: 3; top: 14px; padding: 6px 11px; border-radius: 999px;
  font: 600 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .45); pointer-events: none;
}
.e551-label-voor { left: 14px; }
.e551-label-na { right: 14px; }
.e551[data-e551="verticaal"] .e551-label-na { top: auto; bottom: 14px; left: 14px; right: auto; }

/* Greep: een vlak zo groot als het kader dat met de grens meeschuift */
.e551-greep {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate3d(var(--e551-p), 0, 0);
}
.e551[data-e551="verticaal"] .e551-greep { transform: translate3d(0, var(--e551-p), 0); }
.e551-greep[hidden] { display: none; }
.e551-lijn { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--e551-kleur, #fff); }
.e551[data-e551="verticaal"] .e551-lijn { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 2px; }
.e551-bol {
  position: absolute; left: 0; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: 2px solid var(--e551-kleur, #fff); background: rgba(0, 0, 0, .35);
  display: grid; place-items: center; color: var(--e551-kleur, #fff);
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.e551[data-e551="verticaal"] .e551-bol { left: 50%; top: 0; cursor: ns-resize; }
.e551[data-e551="verticaal"] .e551-bol svg { transform: rotate(90deg); }
.e551-bol svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e551-bol:focus-visible { outline: 3px solid var(--e551-kleur, #fff); outline-offset: 4px; }

/* Zachte beweging bij een tik of de hint; bij slepen volgt alles direct */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e551-zacht .e551-knip,
  html:not([data-rm]) .e551-zacht .e551-binnen,
  html:not([data-rm]) .e551-zacht .e551-greep { transition: transform .55s cubic-bezier(.3, .7, .2, 1); }
}