/* jachthaven-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-25 met ReactBitsPro Components/contour-tide
   (r3f-port, assets/contour-tide.port.js) en ReactBitsPro Components/vapor-type (origineel, assets/vapor-type.bundle.js).
   Tailwind vertaald naar gescopete CSS; kleuren via --m-*. */
.msm-jachthaven-hero {
  --jh-ink: var(--m-ink, #0f1b2a);
  --jh-bg: var(--m-bg, #eef1f3);
  --jh-primary: var(--m-primary, #1e3a5a);
  --jh-surface: var(--m-surface, #ffffff);
  --jh-muted: var(--m-muted, #5a6675);
  --jh-ease: cubic-bezier(.16, 1, .3, 1);
  --jh-bar: 73px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - var(--jh-bar));
  min-height: calc(100svh - var(--jh-bar));
  overflow: hidden;
  touch-action: pan-y;
  background: var(--jh-bg);
  color: var(--jh-ink);
  font-family: var(--m-font-body, 'Public Sans', ui-sans-serif, system-ui, sans-serif);
  padding: 24px 16px 32px;
  scroll-margin-top: 0;
}
.msm-jachthaven-hero *,
.msm-jachthaven-hero *::before,
.msm-jachthaven-hero *::after { box-sizing: border-box; }
.msm-jachthaven-hero a { text-decoration: none; }
.msm-jachthaven-hero svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Achtergrond: beeld als terugval, daarboven de deeltjeszee (pointer-events-none absolute inset-0). */
.msm-jachthaven-hero .jh-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.msm-jachthaven-hero .jh-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transition: opacity .8s ease;
}
.msm-jachthaven-hero .jh-tide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--jh-ease); }
.msm-jachthaven-hero.is-tide .jh-tide { opacity: 1; }
.msm-jachthaven-hero.is-tide .jh-fallback { opacity: 0; }
.msm-jachthaven-hero .jh-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--jh-bg) 72%, transparent) 0%, transparent 46%),
    linear-gradient(to top, color-mix(in srgb, var(--jh-bg) 82%, transparent) 0%, transparent 34%);
}
.msm-jachthaven-hero.is-tide .jh-shade {
  background: linear-gradient(to top, color-mix(in srgb, var(--jh-bg) 76%, transparent) 0%, transparent 30%);
}

/* Originele contour-tide.css, gescoped; het element vult hier de hele hero. */
.msm-jachthaven-hero .contour-tide { position: relative; isolation: isolate; overflow: hidden; }
.msm-jachthaven-hero .jh-tide .contour-tide { position: absolute; inset: 0; }
.msm-jachthaven-hero .contour-tide__canvas { position: absolute; inset: 0; }
.msm-jachthaven-hero .contour-tide__content { position: relative; z-index: 10; width: 100%; height: 100%; }

/* Originele vapor-type.css, gescoped. */
.msm-jachthaven-hero .vapor-type { position: relative; display: inline-block; }

/* relative z-10 mx-auto flex w-full max-w-[1400px] flex-1 flex-col */
.msm-jachthaven-hero .jh-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.msm-jachthaven-hero .jh-top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Pil-link: rounded-full bg ink/4 py-1.5 pl-3.5 pr-3 text-[13px] */
.msm-jachthaven-hero .jh-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jh-ink) 4%, transparent);
  padding: 6px 12px 6px 14px;
  font-size: 13px;
  line-height: 18px;
  color: color-mix(in srgb, var(--jh-ink) 70%, var(--jh-muted));
  transition: background-color .2s, color .2s;
}
.msm-jachthaven-hero .jh-pill:hover { background: color-mix(in srgb, var(--jh-ink) 7%, transparent); color: var(--jh-ink); }
.msm-jachthaven-hero .jh-pill svg { width: 14px; height: 14px; transition: transform .2s; }
.msm-jachthaven-hero .jh-pill:hover svg { transform: translateX(2px); }
.msm-jachthaven-hero :is(.jh-pill, .jh-primary, .jh-secondary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--jh-bg), 0 0 0 4px color-mix(in srgb, var(--jh-primary) 70%, var(--jh-muted));
}

/* h1: mt-10 sm:mt-14 flex flex-col items-center */
.msm-jachthaven-hero .jh-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0 0;
  font-weight: 400;
}
.msm-jachthaven-hero .jh-small {
  max-width: 22rem;
  text-wrap: balance;
  font-size: 1.0625rem;
  line-height: 1.375;
  letter-spacing: -0.01em;
  color: var(--jh-muted);
}
.msm-jachthaven-hero .jh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Reuzenfrase: mt-2 sm:mt-3 text-balance text-[clamp(3.25rem,10.5vw,10rem)] font-medium leading-[0.92] tracking-[-0.055em] */
.msm-jachthaven-hero .jh-phrase,
.msm-jachthaven-hero .jh-mirror {
  font-family: var(--m-font-display, 'Newsreader', ui-serif, Georgia, serif);
  font-size: clamp(3.25rem, 10.5vw, 10rem);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.msm-jachthaven-hero .jh-phrase { display: block; margin-top: 8px; color: var(--jh-ink); }

/* Spiegeling in het water: omgekeerde, vervaagde kopie onder de horizon die met de deining meebeweegt. */
.msm-jachthaven-hero .jh-mirror {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2 * max(.5em, 36px) - .22em);
  display: flex;
  justify-content: center;
  color: var(--jh-ink);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  filter: blur(1.4px);
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 82%), repeating-linear-gradient(to bottom, #000 0 3px, rgba(0, 0, 0, .35) 3px 5px);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 82%), repeating-linear-gradient(to bottom, #000 0 3px, rgba(0, 0, 0, .35) 3px 5px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: opacity 1.4s var(--jh-ease) .3s;
}
.msm-jachthaven-hero.is-tide .jh-mirror { opacity: .2; }
.msm-jachthaven-hero .jh-mirror-words { display: inline-grid; }
.msm-jachthaven-hero .jh-mirror-words > span { grid-area: 1 / 1; justify-self: center; opacity: 0; transition: opacity .8s ease-in-out; }
.msm-jachthaven-hero .jh-mirror-words > span.is-current { opacity: 1; transition-duration: 1.8s; }

/* min-h-[16rem] flex-1 sm:min-h-[18rem] */
.msm-jachthaven-hero .jh-water { flex: 1; min-height: 16rem; }

/* Onderrij: flex-col gap-7 sm:gap-8 lg:flex-row lg:items-end lg:justify-between */
.msm-jachthaven-hero .jh-foot { display: flex; flex-direction: column; gap: 28px; }
.msm-jachthaven-hero .jh-intro {
  max-width: 25rem;
  margin: 0;
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.625;
  color: color-mix(in srgb, var(--jh-ink) 62%, var(--jh-muted));
}
.msm-jachthaven-hero .jh-actions { display: flex; flex-direction: column; gap: 12px; }
.msm-jachthaven-hero .jh-primary,
.msm-jachthaven-hero .jh-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s;
}
.msm-jachthaven-hero .jh-primary { background: var(--jh-primary); color: var(--jh-surface); }
.msm-jachthaven-hero .jh-primary:hover { background: color-mix(in srgb, var(--jh-primary) 84%, var(--jh-ink)); }
.msm-jachthaven-hero .jh-primary svg { width: 16px; height: 16px; transition: transform .2s; }
.msm-jachthaven-hero .jh-primary:hover svg { transform: translateX(2px); }
.msm-jachthaven-hero .jh-secondary {
  background: color-mix(in srgb, var(--jh-ink) 5%, transparent);
  color: var(--jh-ink);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.msm-jachthaven-hero .jh-secondary:hover { background: color-mix(in srgb, var(--jh-ink) 9%, transparent); }

/* Entree van hero-25: staggerChildren 0,1 s na 0,1 s; rise 0,9 s (y 12, blur 6), surface 1,4 s (blur 18). */
@media (prefers-reduced-motion: no-preference) {
  .msm-jachthaven-hero .jh-pill { animation: jh-rise .9s var(--jh-ease) .1s backwards; }
  .msm-jachthaven-hero .jh-small { animation: jh-rise .9s var(--jh-ease) .2s backwards; }
  .msm-jachthaven-hero .jh-phrase { animation: jh-surface 1.4s var(--jh-ease) .3s backwards; }
  .msm-jachthaven-hero .jh-foot { animation: jh-rise .9s var(--jh-ease) .4s backwards; }
  .msm-jachthaven-hero.is-tide .jh-mirror { animation: jh-swell 7s ease-in-out infinite alternate; }
  .msm-jachthaven-hero.is-paused .jh-mirror { animation-play-state: paused; }
}
@keyframes jh-rise {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes jh-surface {
  from { opacity: 0; filter: blur(18px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes jh-swell {
  0% { transform: scaleY(-1) translate(0, 0) skewX(0deg); }
  35% { transform: scaleY(-1.04) translate(-2px, 2px) skewX(.7deg); }
  70% { transform: scaleY(-.97) translate(2px, -1px) skewX(-.5deg); }
  100% { transform: scaleY(-1.02) translate(0, 3px) skewX(.3deg); }
}

@media (min-width: 640px) {
  .msm-jachthaven-hero { padding: 24px 24px 40px; }
  .msm-jachthaven-hero .jh-title { margin-top: 56px; }
  .msm-jachthaven-hero .jh-small { max-width: none; font-size: 1.25rem; }
  .msm-jachthaven-hero .jh-phrase { margin-top: 12px; }
  .msm-jachthaven-hero .jh-water { min-height: 18rem; }
  .msm-jachthaven-hero .jh-foot { gap: 32px; }
  .msm-jachthaven-hero .jh-actions { flex-direction: row; align-items: center; }
}
@media (min-width: 1024px) {
  .msm-jachthaven-hero { padding: 40px 32px; }
  .msm-jachthaven-hero .jh-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-jachthaven-hero .jh-fallback,
  .msm-jachthaven-hero .jh-tide,
  .msm-jachthaven-hero .jh-mirror,
  .msm-jachthaven-hero .jh-mirror-words > span { transition: none; }
  .msm-jachthaven-hero .jh-mirror { animation: none; }
}