/* schoenmaker-footer 1.0.0 · vanilla port van 21st.dev @kedhareswer/wild-hunt-footer voor De Laatste: de werkbankfoto
   lost via een geordende dither op in het roestrode vlak, de uitsnede van schoenen en gereedschap blijft er scherp
   boven, en het woordmerk wordt in cellen opgebouwd en door een zwaai doorschreven. Regels van de bron (.whf-*)
   vertaald naar .ft-*; vlak in --m-primary, inkt wit (4,75 op 1). */
.msm-schoenmaker-footer {
  --ft-bg: var(--m-primary, #bb542f);
  --ft-ink: #fff;
  --ft-pad: clamp(18px, 3.2vw, 48px);
  --ft-ease: cubic-bezier(.65, 0, .2, 1);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: max(100svh, 720px);
  overflow: hidden;
  container-type: inline-size;
  background: var(--ft-bg);
  color: var(--ft-ink);
  font-family: var(--m-font-body, 'Libre Franklin', ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.msm-schoenmaker-footer *,
.msm-schoenmaker-footer *::before,
.msm-schoenmaker-footer *::after { box-sizing: border-box; }

.msm-schoenmaker-footer .ft-picture {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 60%;
  overflow: hidden;
}
.msm-schoenmaker-footer .ft-picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 60%;
  filter: saturate(.92) contrast(1.04);
}
/* Zonder script: een zacht verloop naar het vlak; met script neemt de dither het over. */
.msm-schoenmaker-footer .ft-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ft-bg) 0%, transparent) 38%, var(--ft-bg) 92%);
}
.msm-schoenmaker-footer.is-armed .ft-tint {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ft-bg) 0%, transparent) 30%, color-mix(in srgb, var(--ft-bg) 55%, transparent) 70%);
}
.msm-schoenmaker-footer .ft-picture .ft-cutout {
  z-index: 1;
  filter: none;
  pointer-events: none;
}
.msm-schoenmaker-footer.is-armed .ft-picture .ft-cutout {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s linear .1s;
}
.msm-schoenmaker-footer.is-armed.is-in .ft-picture .ft-cutout { clip-path: inset(0 0 0 0); }
.msm-schoenmaker-footer .ft-dither {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.msm-schoenmaker-footer .ft-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.msm-schoenmaker-footer .ft-marks {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--ft-ink);
}
.msm-schoenmaker-footer .ft-marks text {
  fill: var(--ft-ink);
  stroke: none;
  font-family: var(--m-font-body, 'Libre Franklin', ui-sans-serif, system-ui, sans-serif);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}
.msm-schoenmaker-footer .ft-marks .ft-fade {
  opacity: 0;
  transition: opacity .6s var(--ft-ease);
  transition-delay: var(--d, 0s);
}
.msm-schoenmaker-footer.is-in .ft-marks .ft-fade { opacity: 1; }
.msm-schoenmaker-footer .ft-word-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: block;
  max-width: none;
}
.msm-schoenmaker-footer .ft-swash {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.msm-schoenmaker-footer .ft-swash path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.msm-schoenmaker-footer .ft-swash .ft-cut { stroke: var(--ft-bg); stroke-width: 5.5; }
.msm-schoenmaker-footer .ft-swash .ft-pen { stroke: var(--ft-ink); stroke-width: 1.35; }
.msm-schoenmaker-footer.is-in .ft-swash path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.25s var(--ft-ease) .95s;
}

/* Het woordmerk als echte tekst: zichtbaar zonder script, voor schermlezers zodra het celraster het tekent. */
.msm-schoenmaker-footer .ft-word {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  z-index: 4;
  margin: 0;
  padding: 0 var(--ft-pad);
  color: var(--ft-ink);
  font-family: var(--m-font-display, 'Zilla Slab', ui-serif, Georgia, serif);
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}
.msm-schoenmaker-footer.is-drawn .ft-word {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.msm-schoenmaker-footer .ft-vert,
.msm-schoenmaker-footer .ft-foot {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.msm-schoenmaker-footer .ft-vert {
  position: absolute;
  top: 64%;
  z-index: 6;
  display: flex;
  gap: .7em;
  height: 22%;
  max-width: 8em;
  margin: 0;
  overflow: hidden;
  writing-mode: vertical-rl;
}
.msm-schoenmaker-footer .ft-vert.ft-l { left: var(--ft-pad); transform: rotate(180deg); }
.msm-schoenmaker-footer .ft-vert.ft-r { right: var(--ft-pad); }
.msm-schoenmaker-footer.is-armed .ft-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s var(--ft-ease);
  transition-delay: var(--d, 0s);
}
.msm-schoenmaker-footer.is-armed .ft-vert.ft-wipe { clip-path: inset(100% 0 0 0); }
.msm-schoenmaker-footer.is-armed.is-in .ft-wipe { clip-path: inset(0 0 0 0); }

.msm-schoenmaker-footer .ft-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: start;
  column-gap: 20px;
  row-gap: 0;
  padding: 0 var(--ft-pad) 20px;
}
.msm-schoenmaker-footer .ft-col h3 {
  margin: 0 0 .35em;
  font: inherit;
  font-weight: 650;
}
.msm-schoenmaker-footer .ft-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.msm-schoenmaker-footer .ft-col li { margin: 0; overflow-wrap: anywhere; }
.msm-schoenmaker-footer .ft-col a,
.msm-schoenmaker-footer .ft-up {
  padding: 0;
  border: 0;
  background: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: inherit;
  cursor: pointer;
  transition: background-size .35s var(--ft-ease);
}
.msm-schoenmaker-footer .ft-col a:hover,
.msm-schoenmaker-footer .ft-up:hover { background-size: 100% 1px; }
.msm-schoenmaker-footer .ft-col a:focus-visible,
.msm-schoenmaker-footer .ft-up:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.msm-schoenmaker-footer .ft-up { justify-self: end; white-space: nowrap; }
.msm-schoenmaker-footer .ft-up::before {
  content: "↑";
  display: inline-block;
  margin-right: .6em;
  transition: transform .35s var(--ft-ease);
}
.msm-schoenmaker-footer .ft-up:hover::before { transform: translateY(-2px); }
.msm-schoenmaker-footer .ft-legal {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: end;
  gap: 20px;
  margin-top: 18px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--ft-ink) 45%, transparent);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.55;
  text-transform: none;
}
.msm-schoenmaker-footer .ft-legal p { margin: 0; }
.msm-schoenmaker-footer .ft-legal p + p { text-align: right; }

@container (max-width: 960px) {
  .msm-schoenmaker-footer .ft-foot { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .msm-schoenmaker-footer .ft-up { grid-column: 1 / -1; justify-self: start; }
}
/* Op een telefoon een automatische hoogte: foto, woordmerk en kolommen onder elkaar; module.js zet de bovenruimte. */
@container (max-width: 719px) {
  .msm-schoenmaker-footer .ft-vert { display: none; }
  .msm-schoenmaker-footer .ft-foot {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
    padding-bottom: 16px;
  }
  .msm-schoenmaker-footer .ft-col--wide { order: 2; grid-column: 1 / -1; }
  .msm-schoenmaker-footer .ft-up { order: 1; grid-column: auto; align-self: end; }
  .msm-schoenmaker-footer .ft-legal { order: 3; }
  .msm-schoenmaker-footer .ft-legal { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
  .msm-schoenmaker-footer .ft-legal p + p { text-align: left; }
}
@media (max-width: 719px) {
  .msm-schoenmaker-footer {
    height: auto;
    padding-top: var(--ft-top, calc(80vw + 150px));
  }
  .msm-schoenmaker-footer .ft-picture { height: var(--ft-band, 80vw); }
  .msm-schoenmaker-footer .ft-picture img { object-position: 96% 60%; }
  .msm-schoenmaker-footer .ft-word { top: calc(80vw + 32px); font-size: clamp(2.6rem, 14vw, 4rem); }
  .msm-schoenmaker-footer .ft-marks .ft-tick text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-schoenmaker-footer .ft-marks .ft-fade,
  .msm-schoenmaker-footer.is-armed .ft-wipe,
  .msm-schoenmaker-footer .ft-swash path,
  .msm-schoenmaker-footer .ft-col a,
  .msm-schoenmaker-footer .ft-up,
  .msm-schoenmaker-footer .ft-up::before,
  .msm-schoenmaker-footer.is-armed .ft-picture .ft-cutout { transition: none !important; }
}