/* manege-footer 1.0.0 · eigen vanilla nabouw van 21st.dev @kedhareswer/dune-haul-footer (DHF_CSS).
   Behouden: grid met een kaartrij en een scènerij van minimaal 300 px, scène absolute inset-0 met lagen die van achter
   naar voor oprijzen (110 ms per laag, 1,6 s cubic-bezier(.16,1,.3,1)), struiken die opspringen (0,9 s overshoot vanaf
   700 ms), de zwevende kaart (0,2 s later, 1,2 s) en tekst die gestaffeld landt (450 ms plus 70 ms per stap).
   Kleuren uit de --m-*-tokens. De verborgen beginstand geldt alleen met script (.mf-js). */
.msm-manege-footer {
  --mf-max: 1040px;
  --mf-scene-min: 300px;
  --mf-sky0: var(--m-surface, #faf7ef);
  --mf-sky1: var(--m-bg, #e9e3d7);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(var(--mf-scene-min), 1fr);
  width: 100%;
  min-height: 780px;
  overflow: hidden;
  isolation: isolate;
  color: var(--m-ink, #293126);
  font-family: var(--m-font-body, 'Source Sans 3', ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, var(--mf-sky0) 0%, var(--mf-sky0) 22%, var(--mf-sky1) 62%);
}
.msm-manege-footer *,
.msm-manege-footer *::before,
.msm-manege-footer *::after { box-sizing: border-box; }

.msm-manege-footer .mf-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.msm-manege-footer .mf-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 120%;
  height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-accent2, #b99b6b) 34%, var(--m-surface, #faf7ef)), transparent);
  opacity: .9;
  transition: opacity 2.4s ease;
}
.msm-manege-footer .mf-layer {
  position: absolute;
  inset: 0;
  transition: opacity .9s ease calc(var(--mf-i) * 110ms), transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--mf-i) * 110ms);
}
.msm-manege-footer .mf-layer-near { filter: drop-shadow(0 -8px 22px color-mix(in srgb, var(--m-accent2, #b99b6b) 30%, transparent)); }
.msm-manege-footer .mf-layer-front { filter: drop-shadow(0 -6px 18px color-mix(in srgb, var(--m-accent2, #b99b6b) 24%, transparent)); }
.msm-manege-footer .mf-drift { position: absolute; inset: 0; will-change: transform; }
.msm-manege-footer .mf-drift svg,
.msm-manege-footer .mf-grain {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
.msm-manege-footer .mf-grain { opacity: .07; mix-blend-mode: multiply; overflow: hidden; }
.msm-manege-footer .mf-shrub {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) calc(700ms + var(--mf-sd) * 160ms);
}

/* Duinkleuren per laag (licht, midden, schaduw), van ver naar dichtbij. */
.msm-manege-footer .mf-c0a { stop-color: color-mix(in srgb, var(--m-muted, #667061) 22%, var(--m-surface, #faf7ef)); }
.msm-manege-footer .mf-c0b { stop-color: color-mix(in srgb, var(--m-muted, #667061) 35%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c0c { stop-color: color-mix(in srgb, var(--m-muted, #667061) 46%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c1a { stop-color: var(--m-line, #d5cdbd); }
.msm-manege-footer .mf-c1b { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 42%, var(--m-line, #d5cdbd)); }
.msm-manege-footer .mf-c1c { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 78%, var(--m-line, #d5cdbd)); }
.msm-manege-footer .mf-c2a { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 34%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c2b { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 62%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c2c { stop-color: var(--m-accent2, #b99b6b); }
.msm-manege-footer .mf-c3a { stop-color: var(--m-bg, #e9e3d7); }
.msm-manege-footer .mf-c3b { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 22%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c3c { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 58%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c4a { stop-color: color-mix(in srgb, var(--m-surface, #faf7ef) 55%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-c4b { stop-color: var(--m-bg, #e9e3d7); }
.msm-manege-footer .mf-c4c { stop-color: color-mix(in srgb, var(--m-accent2, #b99b6b) 42%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-crest { fill: none; stroke-linecap: round; }
.msm-manege-footer .mf-crest0 { stroke: color-mix(in srgb, var(--m-muted, #667061) 22%, var(--m-surface, #faf7ef)); }
.msm-manege-footer .mf-crest1 { stroke: var(--m-line, #d5cdbd); }
.msm-manege-footer .mf-crest2 { stroke: color-mix(in srgb, var(--m-accent2, #b99b6b) 34%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-crest3 { stroke: var(--m-bg, #e9e3d7); }
.msm-manege-footer .mf-crest4 { stroke: color-mix(in srgb, var(--m-surface, #faf7ef) 55%, var(--m-bg, #e9e3d7)); }
.msm-manege-footer .mf-haze { stop-color: var(--m-bg, #e9e3d7); }
.msm-manege-footer .mf-shrub-a { stop-color: color-mix(in srgb, var(--m-ink, #293126) 72%, var(--m-muted, #667061)); }
.msm-manege-footer .mf-shrub-b { stop-color: var(--m-ink, #293126); }
.msm-manege-footer .mf-trunk { fill: var(--m-ink, #293126); }
.msm-manege-footer .mf-tufts { fill: var(--m-primary, #a55436); opacity: .4; }
.msm-manege-footer .mf-road { stop-color: var(--m-surface, #faf7ef); }
.msm-manege-footer .mf-road-shade { fill: var(--m-accent2, #b99b6b); opacity: .32; }
.msm-manege-footer .mf-road-edge { fill: var(--m-accent2, #b99b6b); opacity: .75; }
.msm-manege-footer .mf-road-hi { fill: var(--m-surface, #faf7ef); opacity: .5; }
.msm-manege-footer .mf-print {
  fill: none;
  stroke: var(--m-ink, #293126);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* Kaart */
.msm-manege-footer .mf-wrap { position: relative; z-index: 2; padding: clamp(28px, 6vw, 76px) 16px 0; }
.msm-manege-footer .mf-card {
  position: relative;
  width: 100%;
  max-width: var(--mf-max);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 30px) clamp(18px, 2.4vw, 22px);
  background: var(--m-surface, #faf7ef);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-ink, #293126) 6%, transparent),
    0 30px 60px -32px color-mix(in srgb, var(--m-accent2, #b99b6b) 70%, var(--m-ink, #293126)),
    0 12px 24px -18px color-mix(in srgb, var(--m-ink, #293126) 30%, transparent);
  transition: opacity .9s ease .2s, transform 1.2s cubic-bezier(.16, 1, .3, 1) .2s;
}
.msm-manege-footer .mf-r {
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1), filter .7s ease;
  transition-delay: calc(450ms + var(--d, 0) * 70ms);
}
.msm-manege-footer .mf-top { display: flex; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.msm-manege-footer .mf-brandcol { display: grid; align-content: start; gap: 8px; max-width: 300px; }
.msm-manege-footer .mf-brand {
  justify-self: start;
  font-family: var(--m-font-display, 'Fraunces', Georgia, serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--m-ink, #293126);
  text-decoration: none;
  border-radius: 8px;
}
.msm-manege-footer .mf-about,
.msm-manege-footer .mf-address { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--m-muted, #667061); }
.msm-manege-footer .mf-address { color: var(--m-ink, #293126); }
.msm-manege-footer .mf-cols { display: grid; grid-template-columns: auto auto minmax(0, 250px); gap: 24px clamp(28px, 4vw, 56px); }
.msm-manege-footer .mf-coltitle {
  margin: 0 0 8px;
  font-family: var(--m-font-display, 'Fraunces', Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--m-ink, #293126);
}
.msm-manege-footer .mf-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.msm-manege-footer .mf-link {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--m-muted, #667061);
  text-decoration: none;
  border-radius: 4px;
  transition: color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.msm-manege-footer .mf-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--m-primary, #a55436);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.msm-manege-footer .mf-link:hover { color: var(--m-ink, #293126); transform: translateX(2px); }
.msm-manege-footer .mf-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.msm-manege-footer .mf-link--all,
.msm-manege-footer .mf-link--strong { color: var(--m-primary, #a55436); font-weight: 600; }
.msm-manege-footer .mf-rule {
  height: 1px;
  margin: clamp(24px, 3.4vw, 34px) 0 clamp(16px, 2vw, 18px);
  background: var(--m-line, #d5cdbd);
  transform-origin: 0 50%;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .7s;
}
.msm-manege-footer .mf-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.msm-manege-footer .mf-legal,
.msm-manege-footer .mf-contact { display: grid; gap: 4px; }
.msm-manege-footer .mf-contact { text-align: right; justify-items: end; }
.msm-manege-footer .mf-bar p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--m-muted, #667061); }
.msm-manege-footer .mf-bar .mf-link { font-size: 13.5px; }
.msm-manege-footer .mf-spacer { position: relative; z-index: 1; pointer-events: none; }
.msm-manege-footer a:focus-visible {
  outline: 2px solid var(--m-primary, #a55436);
  outline-offset: 3px;
}

/* Beginstand alleen met script: lagen 90 px plus 40 px per laag omlaag, kaart en tekst onzichtbaar. */
.msm-manege-footer.mf-js:not(.mf-in) .mf-glow { opacity: 0; }
.msm-manege-footer.mf-js:not(.mf-in) .mf-layer { opacity: 0; transform: translate3d(0, calc(90px + var(--mf-i) * 40px), 0); }
.msm-manege-footer.mf-js:not(.mf-in) .mf-shrub { transform: scale(0); }
.msm-manege-footer.mf-js:not(.mf-in) .mf-card { opacity: 0; transform: translateY(28px) scale(.985); }
.msm-manege-footer.mf-js:not(.mf-in) .mf-r { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.msm-manege-footer.mf-js:not(.mf-in) .mf-rule { transform: scaleX(0); }

@media (max-width: 860px) {
  .msm-manege-footer .mf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .msm-manege-footer .mf-col--wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .msm-manege-footer .mf-top { flex-direction: column; }
  .msm-manege-footer .mf-bar { flex-direction: column-reverse; align-items: flex-start; }
  .msm-manege-footer .mf-contact { text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-manege-footer .mf-layer,
  .msm-manege-footer .mf-card,
  .msm-manege-footer .mf-r,
  .msm-manege-footer .mf-rule,
  .msm-manege-footer .mf-shrub,
  .msm-manege-footer .mf-glow,
  .msm-manege-footer .mf-link,
  .msm-manege-footer .mf-link::after { transition: none !important; }
}