/* taartatelier-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-17 met swirl-blend (achtergrond) en
   text-scatter (kop), beide ongewijzigd gecompileerd. Tailwind-maten uit de bron vertaald: min-h-screen, py-12,
   px-4/6/8, max-w 1400, gap 40/56/80, gap-6/7, chip px-3.5 py-1.5, kop 3xl/4xl/5xl leading 1.1, knop px-7/8 py-3.5. */
.msm-taartatelier-hero {
  --th-ease: cubic-bezier(.42, 0, .58, 1);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: clip;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 48px 16px;
  background: var(--m-bg, #f7ede4);
  color: var(--m-ink, #3a2420);
  font-family: var(--m-font-body, 'Albert Sans', 'Segoe UI', sans-serif);
}
.msm-taartatelier-hero *,
.msm-taartatelier-hero *::before,
.msm-taartatelier-hero *::after { box-sizing: border-box; }
.msm-taartatelier-hero svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.msm-taartatelier-hero a { color: inherit; }
.msm-taartatelier-hero a:focus-visible { outline: 2px solid var(--m-ink, #3a2420); outline-offset: 3px; }

/* Werveling: kleurvlak zonder WebGL, daaroverheen swirl-blend (originele component-CSS hieronder) */
.msm-taartatelier-hero .th-swirl {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 70% at 18% 30%, color-mix(in srgb, var(--m-accent2, #e9a7a0) 38%, transparent), transparent 70%),
    radial-gradient(55% 60% at 85% 75%, color-mix(in srgb, var(--m-accent2, #e9a7a0) 26%, transparent), transparent 72%),
    var(--m-bg, #f7ede4);
}
.msm-taartatelier-hero .swirl-blend { position: relative; isolation: isolate; overflow: hidden; }
.msm-taartatelier-hero .swirl-blend__stage { position: absolute; inset: 0; pointer-events: none; }
.msm-taartatelier-hero .swirl-blend__content { position: relative; z-index: 10; width: 100%; height: 100%; }
.msm-taartatelier-hero .th-swirl > .swirl-blend { opacity: 0; transition: opacity .9s ease-out; }
.msm-taartatelier-hero.is-swirl .th-swirl > .swirl-blend { opacity: 1; }

.msm-taartatelier-hero .th-wrap { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.msm-taartatelier-hero .th-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.msm-taartatelier-hero .th-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.msm-taartatelier-hero .th-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--m-ink, #3a2420);
  color: var(--m-surface, #fffaf6);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.msm-taartatelier-hero .th-chip svg { width: 14px; height: 14px; }

.msm-taartatelier-hero .th-title {
  margin: 0;
  font-family: var(--m-font-display, 'Gloock', Georgia, serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--m-ink, #3a2420);
  text-wrap: balance;
}
/* Originele CSS van text-scatter, gescoped */
.msm-taartatelier-hero .text-scatter { position: relative; display: inline-block; cursor: default; user-select: none; }
.msm-taartatelier-hero .text-scatter__letter { display: inline-block; position: relative; white-space: pre; }
.msm-taartatelier-hero .text-scatter__space { display: inline-block; white-space: pre; }
.msm-taartatelier-hero .th-word { display: inline-block; white-space: nowrap; }

.msm-taartatelier-hero .th-intro {
  margin: 0;
  max-width: 24rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--m-ink, #3a2420);
}
.msm-taartatelier-hero .th-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.msm-taartatelier-hero .th-cta {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 14px 28px;
  border-radius: 9999px;
  background: var(--m-primary, #a8324f);
  color: var(--m-surface, #fffaf6);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--th-ease);
}
.msm-taartatelier-hero .th-cta:hover { background: color-mix(in srgb, var(--m-primary, #a8324f) 86%, var(--m-ink, #3a2420)); }
.msm-taartatelier-hero.is-css-press .th-cta { transition: background-color .2s var(--th-ease), scale .2s var(--th-ease); }
.msm-taartatelier-hero.is-css-press .th-cta:hover { scale: 1.02; }
.msm-taartatelier-hero.is-css-press .th-cta:active { scale: .97; }
.msm-taartatelier-hero .th-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--m-ink, #3a2420) 35%, transparent);
  text-underline-offset: 4px;
}
.msm-taartatelier-hero .th-link svg { width: 16px; height: 16px; transition: translate .2s var(--th-ease); }
.msm-taartatelier-hero .th-link:hover svg { translate: 3px 0; }

.msm-taartatelier-hero .th-media { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.msm-taartatelier-hero .th-main { margin: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--m-line, #e6d3c8); }
.msm-taartatelier-hero .th-main img,
.msm-taartatelier-hero .th-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msm-taartatelier-hero .th-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.msm-taartatelier-hero .th-tile { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--m-line, #e6d3c8); transition: scale .5s var(--th-ease); }
.msm-taartatelier-hero .th-tile a { display: block; width: 100%; height: 100%; }
.msm-taartatelier-hero .th-tile:hover { scale: 1.02; }

/* Entree uit hero-17 (motion initial/animate, standaardeasing easeInOut) */
@keyframes th-rise { from { opacity: 0; translate: 0 var(--th-y, 12px); } to { opacity: 1; translate: 0 0; } }
@keyframes th-grow { from { opacity: 0; translate: 0 10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
.msm-taartatelier-hero .th-in { animation: th-rise var(--th-dur, .5s) var(--th-ease) var(--th-delay, 0s) both; }
.msm-taartatelier-hero .th-in-chip { --th-y: -8px; --th-dur: .4s; --th-delay: .1s; }
.msm-taartatelier-hero .th-in-title { --th-y: 18px; --th-dur: .6s; --th-delay: .2s; }
.msm-taartatelier-hero .th-in-intro { --th-y: 12px; --th-dur: .5s; --th-delay: .35s; }
.msm-taartatelier-hero .th-in-actions { --th-y: 12px; --th-dur: .5s; --th-delay: .5s; }
.msm-taartatelier-hero .th-in-main { animation: th-grow .65s var(--th-ease) .25s both; }
.msm-taartatelier-hero .th-tile { animation: th-rise .5s var(--th-ease) calc(.45s + var(--i, 0) * .08s) both; --th-y: 14px; }

@media (min-width: 640px) {
  .msm-taartatelier-hero { padding: 48px 24px; }
  .msm-taartatelier-hero .th-copy { gap: 28px; }
  .msm-taartatelier-hero .th-title { font-size: 36px; }
  .msm-taartatelier-hero .th-intro { font-size: 16px; }
  .msm-taartatelier-hero .th-cta { width: auto; padding: 14px 32px; font-size: 16px; line-height: 24px; }
}
@media (min-width: 768px) {
  .msm-taartatelier-hero .th-title { font-size: 48px; }
}
@media (min-width: 1024px) {
  .msm-taartatelier-hero { align-items: center; padding: 48px 32px; }
  .msm-taartatelier-hero .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
}
@media (min-width: 1280px) {
  .msm-taartatelier-hero .th-grid { gap: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-taartatelier-hero .th-in,
  .msm-taartatelier-hero .th-in-main,
  .msm-taartatelier-hero .th-tile { animation: none; }
  .msm-taartatelier-hero .th-tile,
  .msm-taartatelier-hero .th-link svg,
  .msm-taartatelier-hero .th-swirl > .swirl-blend { transition: none; }
  .msm-taartatelier-hero .th-tile:hover,
  .msm-taartatelier-hero .th-link:hover svg { scale: 1; translate: 0 0; }
}