/* foodtruck-festivals 1.0.0 · ReactBits LogoLoop (reactbits.dev/animations/logo-loop) in vanilla CSS/JS.
   Behouden: oneindige band van gekloonde lijsten, periode gemeten tussen twee kopieën, offset modulo de
   periode, snelheid die exponentieel naar het doel glijdt (pauze bij hover en focus), slepen met fling en
   uitglijden, randvervaging met smootherstep-stops. Zonder script en bij reduced motion staan de badges
   stil en lopen ze door naar een volgende regel, zodat elke naam leesbaar blijft. */
.msm-foodtruck-festivals {
  --ftf-sand: var(--m-bg, #f2dfb5);
  --ftf-ink: var(--m-ink, #1f2020);
  --ftf-primary: var(--m-primary, #2f6f62);
  --ftf-gap: 18px;
  display: block;
  position: relative;
  scroll-margin-top: 116px;
  padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 72px);
  background: var(--ftf-sand);
  color: var(--ftf-ink);
  font-family: var(--m-font-body, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
.msm-foodtruck-festivals *,
.msm-foodtruck-festivals *::before,
.msm-foodtruck-festivals *::after { box-sizing: border-box; }
.msm-foodtruck-festivals [hidden] { display: none !important; }
.msm-foodtruck-festivals .ftf-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.msm-foodtruck-festivals .ftf-kop {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px clamp(24px, 4vw, 64px);
  align-items: end;
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.msm-foodtruck-festivals .ftf-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ftf-primary);
}
.msm-foodtruck-festivals h2 {
  margin: 0;
  font: 900 clamp(46px, 7.4vw, 104px) / 0.88 var(--m-font-display, Impact, sans-serif);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.msm-foodtruck-festivals .ftf-lede { margin: 0 0 6px; max-width: 42ch; opacity: 0.82; }

/* De band. */
.msm-foodtruck-festivals .ftf-loop {
  position: relative;
  padding: 14px 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.msm-foodtruck-festivals .ftf-loop:focus-visible { box-shadow: inset 0 0 0 3px var(--ftf-primary); }
.msm-foodtruck-festivals .ftf-track { display: block; }
.msm-foodtruck-festivals .ftf-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px var(--ftf-gap);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  list-style: none;
}
.msm-foodtruck-festivals .ftf-item { flex: 0 0 auto; }

/* Badge als polsbandje: afgeronde strook met een stippellijn erin. */
.msm-foodtruck-festivals .ftf-badge {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 24px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.msm-foodtruck-festivals .ftf-badge::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed currentColor;
  border-radius: inherit;
  opacity: 0.4;
  pointer-events: none;
}
.msm-foodtruck-festivals .ftf-badge b {
  font: 900 clamp(20px, 2.2vw, 28px) / 1 var(--m-font-display, Impact, sans-serif);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.msm-foodtruck-festivals .ftf-badge small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.78;
}
.msm-foodtruck-festivals .ftf-item--groen .ftf-badge { background: var(--ftf-primary); color: var(--ftf-sand); }
.msm-foodtruck-festivals .ftf-item--inkt .ftf-badge { background: var(--ftf-ink); color: var(--ftf-sand); }
.msm-foodtruck-festivals .ftf-item--papier .ftf-badge { background: transparent; color: var(--ftf-ink); box-shadow: inset 0 0 0 2px var(--ftf-ink); }
.msm-foodtruck-festivals .ftf-item:nth-child(odd) .ftf-badge { transform: rotate(-1.5deg); }
.msm-foodtruck-festivals .ftf-item:nth-child(even) .ftf-badge { transform: rotate(1.2deg); }

/* Met script en beweging: één regel, gekloonde lijsten naast elkaar, randen vervagen. */
.msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-loop {
  overflow: hidden;
  overflow: clip;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0001) 1%, rgba(0, 0, 0, 0.0047) 2%, rgba(0, 0, 0, 0.0306) 3%, rgba(0, 0, 0, 0.0972) 4%, rgba(0, 0, 0, 0.2072) 5%, rgba(0, 0, 0, 0.3555) 6%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.6445) 7%, rgba(0, 0, 0, 0.7928) 8%, rgba(0, 0, 0, 0.9028) 9%, rgba(0, 0, 0, 0.9694) 10%, rgba(0, 0, 0, 0.9953) 11%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0.9953) 89%, rgba(0, 0, 0, 0.9694) 90%, rgba(0, 0, 0, 0.9028) 91%, rgba(0, 0, 0, 0.7928) 92%, rgba(0, 0, 0, 0.6445) 93%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.3555) 94%, rgba(0, 0, 0, 0.2072) 95%, rgba(0, 0, 0, 0.0972) 96%, rgba(0, 0, 0, 0.0306) 97%, rgba(0, 0, 0, 0.0047) 98%, rgba(0, 0, 0, 0.0001) 99%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0001) 1%, rgba(0, 0, 0, 0.0047) 2%, rgba(0, 0, 0, 0.0306) 3%, rgba(0, 0, 0, 0.0972) 4%, rgba(0, 0, 0, 0.2072) 5%, rgba(0, 0, 0, 0.3555) 6%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.6445) 7%, rgba(0, 0, 0, 0.7928) 8%, rgba(0, 0, 0, 0.9028) 9%, rgba(0, 0, 0, 0.9694) 10%, rgba(0, 0, 0, 0.9953) 11%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0.9953) 89%, rgba(0, 0, 0, 0.9694) 90%, rgba(0, 0, 0, 0.9028) 91%, rgba(0, 0, 0, 0.7928) 92%, rgba(0, 0, 0, 0.6445) 93%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.3555) 94%, rgba(0, 0, 0, 0.2072) 95%, rgba(0, 0, 0, 0.0972) 96%, rgba(0, 0, 0, 0.0306) 97%, rgba(0, 0, 0, 0.0047) 98%, rgba(0, 0, 0, 0.0001) 99%, rgba(0, 0, 0, 0) 100%);
  -webkit-user-select: none;
  user-select: none;
}
.msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-loop[data-dragging],
.msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-loop[data-dragging] * { cursor: grabbing; }
.msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-track { display: flex; width: max-content; will-change: transform; }
.msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-list { flex-wrap: nowrap; max-width: none; margin: 0; padding: 0; gap: 0; }
.msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-item { margin-right: var(--ftf-gap); }
@media (hover: hover) {
  .msm-foodtruck-festivals[data-ftf-mode="loop"] .ftf-item:hover .ftf-badge { transform: rotate(0deg) scale(1.06); }
}

.msm-foodtruck-festivals .ftf-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.msm-foodtruck-festivals .ftf-noot { margin: 0; font-size: 12px; opacity: 0.7; }
.msm-foodtruck-festivals .ftf-pauze {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--ftf-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ftf-ink);
  font: 700 13px / 1 var(--m-font-body, Arial, sans-serif);
  cursor: pointer;
}
.msm-foodtruck-festivals .ftf-pauze:hover { background: var(--ftf-ink); color: var(--ftf-sand); }
.msm-foodtruck-festivals .ftf-pauze:focus-visible { outline: 3px solid var(--ftf-primary); outline-offset: 3px; }
.msm-foodtruck-festivals .ftf-ico-speel { display: none; }
.msm-foodtruck-festivals .ftf-pauze[aria-pressed="true"] .ftf-ico-pauze { display: none; }
.msm-foodtruck-festivals .ftf-pauze[aria-pressed="true"] .ftf-ico-speel { display: block; }

@media (max-width: 760px) {
  .msm-foodtruck-festivals .ftf-kop { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .msm-foodtruck-festivals { --ftf-gap: 12px; }
  .msm-foodtruck-festivals .ftf-badge { padding: 13px 18px 12px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-foodtruck-festivals .ftf-badge { transition: none; }
}