/* partyverhuur-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-10 met ReactBitsPro Components/star-burst
   (origineel gecompileerd, three uit de gedeelde motor) als achtergrond en ReactBitsPro Components/elastic-lettering
   (origineel gecompileerd) op de h1. Tailwind-maten uit de bron: py-12, px-4/6/8, max-w 1400, kop 3xl/5xl/6xl/7xl
   max-w-2xl, alinea base/xl max-w-xl, knop rounded-full px-6/8 py-3/4, kaarten w-28/72/80 h-28/64/72 rounded-xl/3xl,
   -space-x-6/12/16, cirkel 250%/200% top 80%/40%. Fonts levert de site via assets/fonts.css. */
.msm-partyverhuur-hero {
  --ph-ease-card: cubic-bezier(.25, .46, .45, .94);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 48px 16px;
  overflow: hidden;
  background: var(--m-bg, #fff5e6);
  color: var(--m-ink, #1f2547);
  font-family: var(--m-font-body, 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-partyverhuur-hero *,
.msm-partyverhuur-hero *::before,
.msm-partyverhuur-hero *::after { box-sizing: border-box; }

/* Achtergrond: star-burst over de hele sectie. Zonder WebGL2 blijft alleen het crèmevlak. */
.msm-partyverhuur-hero .ph-burst { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease-in-out; }
.msm-partyverhuur-hero.is-burst .ph-burst { opacity: 1; }
/* Originele component-CSS van star-burst en elastic-lettering, gescoped. */
.msm-partyverhuur-hero .star-burst-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: transparent; }
.msm-partyverhuur-hero .star-burst-container canvas { display: block; }
.msm-partyverhuur-hero .elastic-lettering { position: relative; display: inline-block; max-width: 100%; }

.msm-partyverhuur-hero .ph-inner { position: relative; z-index: 10; width: 100%; max-width: 1400px; margin: 0 auto; }
.msm-partyverhuur-hero .ph-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 48px;
  text-align: left;
}
.msm-partyverhuur-hero .ph-kicker {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  /* De gloed van star-burst ligt achter de kop: --m-muted gemengd met --m-ink houdt genoeg contrast. */
  color: color-mix(in srgb, var(--m-ink, #1f2547) 70%, var(--m-muted, #5f6480));
  animation: ph-rise .5s ease-in-out both;
  --ph-from: 20px;
}
.msm-partyverhuur-hero .ph-title {
  max-width: 42rem;
  margin: 0;
  font-family: var(--m-font-display, 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--m-ink, #1f2547);
  text-wrap: balance;
  animation: ph-rise .6s ease-in-out .1s both;
  --ph-from: 30px;
}
.msm-partyverhuur-hero .ph-intro {
  max-width: 36rem;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: color-mix(in srgb, var(--m-ink, #1f2547) 70%, var(--m-muted, #5f6480));
  animation: ph-rise .5s ease-in-out .2s both;
  --ph-from: 20px;
}
.msm-partyverhuur-hero .ph-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  animation: ph-rise .5s ease-in-out .3s both;
  --ph-from: 20px;
}
.msm-partyverhuur-hero .ph-cta,
.msm-partyverhuur-hero .ph-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  /* motion gebruikt de transition-prop (0,5 s na 0,3 s) ook voor whileHover en whileTap. */
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), transform .5s ease-in-out .3s;
  -webkit-tap-highlight-color: transparent;
}
.msm-partyverhuur-hero .ph-cta { background: var(--m-ink, #1f2547); color: var(--m-surface, #ffffff); }
.msm-partyverhuur-hero .ph-cta:hover { background: color-mix(in srgb, var(--m-ink, #1f2547) 86%, var(--m-surface, #ffffff)); }
.msm-partyverhuur-hero .ph-ghost {
  border: 1px solid color-mix(in srgb, var(--m-ink, #1f2547) 22%, transparent);
  background: color-mix(in srgb, var(--m-surface, #ffffff) 55%, transparent);
  color: var(--m-ink, #1f2547);
}
.msm-partyverhuur-hero .ph-ghost:hover { background: var(--m-surface, #ffffff); border-color: color-mix(in srgb, var(--m-ink, #1f2547) 40%, transparent); }
.msm-partyverhuur-hero .ph-cta:hover,
.msm-partyverhuur-hero .ph-ghost:hover { transform: scale(1.02); }
.msm-partyverhuur-hero .ph-cta:active,
.msm-partyverhuur-hero .ph-ghost:active { transform: scale(.98); }
.msm-partyverhuur-hero .ph-cta svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msm-partyverhuur-hero a:focus-visible { outline: 2px solid var(--m-ink, #1f2547); outline-offset: 3px; }

/* Kaarten onder de boog. */
.msm-partyverhuur-hero .ph-stage { position: relative; }
.msm-partyverhuur-hero .ph-dome {
  position: absolute;
  left: 50%;
  top: 80%;
  z-index: 10;
  width: 250%;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background: var(--m-bg, #fff5e6);
  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--m-primary, #d4421f) 50%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.msm-partyverhuur-hero .ph-cards { position: relative; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; }
.msm-partyverhuur-hero .ph-card {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--m-accent2, #ffbf2e) 22%, var(--m-bg, #fff5e6));
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--ph-y, 0px) + var(--ph-lift, 0px))) rotate(var(--ph-r, 0deg));
  animation: ph-card .7s var(--ph-ease-card) calc(.4s + var(--ph-i, 0) * .12s) both;
}
.msm-partyverhuur-hero .ph-card + .ph-card { margin-left: -24px; }
.msm-partyverhuur-hero .ph-card.is-settled { animation: none; }
.msm-partyverhuur-hero .ph-card img { display: block; width: 100%; height: 100%; object-fit: cover; }

@keyframes ph-rise { from { opacity: 0; transform: translateY(var(--ph-from, 20px)); } to { opacity: 1; transform: none; } }
@keyframes ph-card {
  from { opacity: 0; transform: translateY(80px) rotate(0deg); }
  to { opacity: 1; transform: translateY(var(--ph-y, 0px)) rotate(var(--ph-r, 0deg)); }
}

@media (min-width: 640px) {
  .msm-partyverhuur-hero { padding: 48px 24px; }
  .msm-partyverhuur-hero .ph-copy { align-items: center; margin-bottom: 80px; text-align: center; }
  .msm-partyverhuur-hero .ph-title { font-size: 48px; line-height: 1; }
  .msm-partyverhuur-hero .ph-intro { margin-top: 24px; font-size: 20px; line-height: 28px; }
  .msm-partyverhuur-hero .ph-actions { justify-content: center; margin-top: 32px; }
  .msm-partyverhuur-hero .ph-cta,
  .msm-partyverhuur-hero .ph-ghost { padding: 16px 32px; font-size: 16px; line-height: 24px; }
  .msm-partyverhuur-hero .ph-dome { top: 40%; width: 200%; }
  .msm-partyverhuur-hero .ph-card { width: 288px; height: 256px; border-radius: 24px; }
  .msm-partyverhuur-hero .ph-card + .ph-card { margin-left: -48px; }
}
@media (min-width: 768px) {
  .msm-partyverhuur-hero .ph-title { font-size: 60px; }
}
@media (min-width: 1024px) {
  .msm-partyverhuur-hero { padding: 48px 32px; }
  .msm-partyverhuur-hero .ph-copy { margin-bottom: 96px; }
  .msm-partyverhuur-hero .ph-title { font-size: 72px; }
  .msm-partyverhuur-hero .ph-card { width: 320px; height: 288px; }
  .msm-partyverhuur-hero .ph-card + .ph-card { margin-left: -64px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-partyverhuur-hero .ph-kicker,
  .msm-partyverhuur-hero .ph-title,
  .msm-partyverhuur-hero .ph-intro,
  .msm-partyverhuur-hero .ph-actions,
  .msm-partyverhuur-hero .ph-card { animation: none; }
  .msm-partyverhuur-hero .ph-burst { transition: none; }
  .msm-partyverhuur-hero .ph-cta,
  .msm-partyverhuur-hero .ph-ghost { transition: background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1); }
  .msm-partyverhuur-hero .ph-cta:hover,
  .msm-partyverhuur-hero .ph-ghost:hover,
  .msm-partyverhuur-hero .ph-cta:active,
  .msm-partyverhuur-hero .ph-ghost:active { transform: none; }
}