/* brasserie-avond 1.0.0 · voorbeeldreacties als tafelkaartjes onder een kop waarvan het slot per letter
   in 3D doordraait (naar ReactBits RotatingText, vanilla). Het draaiende slot en het opgetilde kaartje
   horen bij elkaar. Kleuren en fonts via --m-*-tokens. */
.msm-brasserie-avond {
  --ba-primary: var(--m-primary, #742f37);
  --ba-bg: var(--m-bg, #f2eadf);
  --ba-ink: var(--m-ink, #211d1a);
  --ba-display: var(--m-font-display, Georgia, serif);
  --ba-body: var(--m-font-body, Arial, sans-serif);
  position: relative;
  scroll-margin-top: 110px;
  overflow: hidden;
  background: var(--ba-primary);
  color: var(--ba-bg);
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 60px) clamp(56px, 7vw, 104px);
  font: 400 15px/1.6 var(--ba-body);
}
.msm-brasserie-avond *,
.msm-brasserie-avond *::before,
.msm-brasserie-avond *::after { box-sizing: border-box; }
.msm-brasserie-avond .ba-inner { max-width: 1240px; margin: 0 auto; }

.msm-brasserie-avond .ba-head { max-width: 900px; }
.msm-brasserie-avond .ba-eyebrow {
  margin: 0 0 18px;
  font: 600 9px/1.3 var(--ba-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ba-bg) 78%, transparent);
}
.msm-brasserie-avond h2 {
  margin: 0 0 22px;
  font: 400 clamp(44px, 6.4vw, 96px)/1.04 var(--ba-display);
  letter-spacing: -0.05em;
}
.msm-brasserie-avond .ba-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Het draaiende slot: een licht vlak waarvan de breedte meeveert met de tekst. */
.msm-brasserie-avond .ba-rot {
  display: inline-flex;
  vertical-align: baseline;
  overflow: hidden;
  padding: 0.02em 0.24em 0.1em;
  background: var(--ba-bg);
  color: var(--ba-ink);
  font-style: italic;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.msm-brasserie-avond .ba-rot-inner { display: inline-flex; white-space: pre; }
.msm-brasserie-avond .ba-ch {
  display: inline-block;
  transform-origin: 50% 50% -0.45em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.msm-brasserie-avond .ba-sp { white-space: pre; }

.msm-brasserie-avond .ba-intro { margin: 0; max-width: 46ch; color: color-mix(in srgb, var(--ba-bg) 86%, transparent); }

/* Tafelkaartjes. */
.msm-brasserie-avond .ba-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 36px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.msm-brasserie-avond .ba-card {
  position: relative;
  padding: 46px clamp(22px, 2.4vw, 32px) 28px;
  background: var(--ba-bg);
  color: var(--ba-ink);
  box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--ba-ink) 85%, transparent);
  transform: rotate(var(--ba-r, -1.6deg));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
  cursor: pointer;
}
.msm-brasserie-avond .ba-card:nth-child(2) { --ba-r: 1.1deg; }
.msm-brasserie-avond .ba-card:nth-child(3) { --ba-r: -0.7deg; }
/* De vouw van het kaartje. */
.msm-brasserie-avond .ba-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
  background: color-mix(in srgb, var(--ba-bg) 84%, var(--ba-ink));
  border-bottom: 1px solid color-mix(in srgb, var(--ba-ink) 16%, transparent);
}
.msm-brasserie-avond .ba-card::before { transition: background-color 0.4s ease; }
.msm-brasserie-avond .ba-card.is-active {
  transform: translateY(-12px) rotate(0deg);
  box-shadow: 0 40px 70px -32px color-mix(in srgb, var(--ba-ink) 95%, transparent);
}
/* Het kaartje van de huidige variant krijgt een wijnrode vouw. */
.msm-brasserie-avond .ba-card.is-active::before { background: color-mix(in srgb, var(--ba-primary) 82%, var(--ba-ink)); }
.msm-brasserie-avond .ba-label {
  margin: 0;
  color: var(--ba-primary);
  font: 600 9px/1.3 var(--ba-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.msm-brasserie-avond .ba-quote { margin: 14px 0 0; }
.msm-brasserie-avond .ba-quote p {
  margin: 0;
  font: italic 400 clamp(20px, 1.9vw, 26px)/1.32 var(--ba-display);
  letter-spacing: -0.01em;
}
.msm-brasserie-avond .ba-who { display: grid; gap: 2px; margin: 22px 0 0; font-size: 13px; line-height: 1.4; }
.msm-brasserie-avond .ba-who strong { font-weight: 600; }
.msm-brasserie-avond .ba-who span { color: color-mix(in srgb, var(--ba-ink) 66%, transparent); }

.msm-brasserie-avond .ba-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: clamp(40px, 5vw, 60px);
}
.msm-brasserie-avond .ba-link {
  display: inline-block;
  padding: 15px 18px;
  background: var(--ba-bg);
  color: var(--ba-primary);
  text-decoration: none;
  font: 700 11px/1 var(--ba-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.msm-brasserie-avond .ba-link::after { content: " \2193"; }
.msm-brasserie-avond .ba-link:hover { background: var(--ba-ink); color: var(--ba-bg); }
.msm-brasserie-avond .ba-pause {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ba-bg) 45%, transparent);
  background: transparent;
  color: var(--ba-bg);
  font: 600 11px/1 var(--ba-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.msm-brasserie-avond .ba-pause[hidden] { display: none; }
.msm-brasserie-avond .ba-pause:hover { border-color: var(--ba-bg); }
.msm-brasserie-avond .ba-link:focus-visible,
.msm-brasserie-avond .ba-pause:focus-visible { outline: 3px solid var(--ba-bg); outline-offset: 3px; }

@media (max-width: 860px) {
  .msm-brasserie-avond .ba-cards { grid-template-columns: 1fr; max-width: 560px; }
  .msm-brasserie-avond .ba-card { --ba-r: -0.8deg; }
  .msm-brasserie-avond .ba-card:nth-child(2) { --ba-r: 0.6deg; }
  .msm-brasserie-avond .ba-card:nth-child(3) { --ba-r: -0.4deg; }
  .msm-brasserie-avond .ba-card.is-active { transform: translateY(-6px) rotate(0deg); }
}
@media (max-width: 760px) {
  .msm-brasserie-avond { scroll-margin-top: 92px; }
  .msm-brasserie-avond h2 { font-size: clamp(40px, 11vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .msm-brasserie-avond .ba-card { transition: none; }
  .msm-brasserie-avond .ba-card.is-active { transform: rotate(0deg); }
}