/* zwemschool-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-15 met twee ongewijzigd gecompileerde componenten:
   ReactBitsPro Components/shader-waves (three) als achtergrond en ReactBitsPro Components/tessera-trail (canvas 2d)
   als lettertegelspoor. Tailwind-maten uit hero-15: min-h-screen, items-center, py-12, px-4/6/8, max-w 1400, text-center,
   pill px-5 py-2.5 rounded-lg tracking-[0.14em] uppercase 11/12 px, kop 5xl/7xl/8xl/7rem/8.5rem leading-none
   tracking-[-0.02em], regels sm/base/lg leading-relaxed max-w-2xl, knop px-8/10 py-3.5/4 rounded-xl tracking-[0.14em],
   invoerbalk max-w-2xl rounded-full p-2.5 met ronde knop 48/52 px. Entree: 0,5 s (kop 0,7 s), y 16 (kop 20),
   easeInOut van motion, vertragingen 0,1 / 0,2 / 0,4 / 0,55 / 0,7 / 0,85 s. Fonts levert de site via assets/fonts.css. */
.msm-zwemschool-hero {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: max(620px, calc(100vh - 69px));
  min-height: max(620px, calc(100svh - 69px));
  padding: 48px 16px;
  overflow: hidden;
  background: var(--m-bg, #dfeff0);
  color: var(--m-ink, #123b45);
  font-family: var(--m-font-body, 'Noto Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-zwemschool-hero *,
.msm-zwemschool-hero *::before,
.msm-zwemschool-hero *::after { box-sizing: border-box; }
.msm-zwemschool-hero p { margin: 0; }
.msm-zwemschool-hero svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msm-zwemschool-hero .wh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Water: foto onder de golven (35% zodra de golven lopen, vol zonder WebGL), golven, lettertegels. */
.msm-zwemschool-hero .wh-water { position: absolute; inset: 0; z-index: 0; }
.msm-zwemschool-hero .wh-photo,
.msm-zwemschool-hero .wh-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.msm-zwemschool-hero .wh-photo { transition: opacity .6s ease-in-out; }
.msm-zwemschool-hero .wh-haze { position: absolute; inset: 0; background: color-mix(in srgb, var(--m-bg, #dfeff0) 62%, transparent); }
.msm-zwemschool-hero .wh-waves,
.msm-zwemschool-hero .wh-trail { position: absolute; inset: 0; display: none; }
.msm-zwemschool-hero .wh-trail { pointer-events: none; }
.msm-zwemschool-hero.is-waves .wh-photo { opacity: .35; }
.msm-zwemschool-hero.is-waves .wh-haze { opacity: 0; }
.msm-zwemschool-hero.is-waves .wh-waves,
.msm-zwemschool-hero.is-trail .wh-trail { display: block; }

/* Originele component-CSS van shader-waves, gescoped. */
.msm-zwemschool-hero .shader-waves-container { position: relative; overflow: hidden; }
.msm-zwemschool-hero .shader-waves-canvas { position: absolute; inset: 0; }
.msm-zwemschool-hero .shader-waves-content { position: relative; z-index: 10; width: 100%; height: 100%; pointer-events: none; }
/* Originele component-CSS van tessera-trail, gescoped. */
.msm-zwemschool-hero .tessera-trail { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 240px; }

/* Inhoud van hero-15, gecentreerd. */
.msm-zwemschool-hero .wh-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.msm-zwemschool-hero .wh-pill {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--m-surface, #f8ffff) 65%, transparent);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-muted, #53747b);
  transition: background-color .2s ease;
}
.msm-zwemschool-hero .wh-title {
  margin: 32px 0 0;
  max-width: 11ch;
  font-family: var(--m-font-display, 'Baloo 2', ui-rounded, system-ui, sans-serif);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--m-ink, #123b45);
}
.msm-zwemschool-hero .wh-lines { margin-top: 24px; max-width: 672px; }
.msm-zwemschool-hero .wh-line { font-size: 14px; line-height: 1.625; }
.msm-zwemschool-hero .wh-line-ink { font-weight: 500; color: var(--m-ink, #123b45); }
.msm-zwemschool-hero .wh-line-muted { margin-top: 2px; font-weight: 400; color: var(--m-muted, #53747b); }
.msm-zwemschool-hero .wh-action { margin-top: 24px; width: 100%; }
.msm-zwemschool-hero .wh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 32px;
  border-radius: 12px;
  background: var(--m-primary, #ef6e4a);
  color: var(--m-surface, #f8ffff);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--m-ink, #123b45) 12%, transparent);
  transition: background-color .2s ease, transform .2s ease;
}
.msm-zwemschool-hero .wh-cta:hover { background: color-mix(in srgb, var(--m-primary, #ef6e4a) 88%, var(--m-ink, #123b45)); transform: scale(1.03); }
.msm-zwemschool-hero .wh-cta:active { transform: scale(.97); }
.msm-zwemschool-hero .wh-cta:focus-visible,
.msm-zwemschool-hero .wh-go:focus-visible { outline: 2px solid var(--m-accent2, #2f7f8c); outline-offset: 3px; }
.msm-zwemschool-hero .wh-arrow { display: inline-flex; transition: transform .2s ease; }
.msm-zwemschool-hero .wh-arrow svg { width: 16px; height: 16px; }
.msm-zwemschool-hero .wh-cta:hover .wh-arrow { transform: translateX(3px); }

/* Invoerbalk ('Ask me anything' in de bron): pill in --m-bg met getalveld en ronde knop. */
.msm-zwemschool-hero .wh-ask {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 672px;
  margin: 40px 0 0;
  padding: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-bg, #dfeff0) 92%, var(--m-surface, #f8ffff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-line, #c2dcdf) 80%, transparent);
}
.msm-zwemschool-hero .wh-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 24px;
  color: var(--m-ink, #123b45);
  -moz-appearance: textfield;
  appearance: textfield;
}
.msm-zwemschool-hero .wh-input::-webkit-outer-spin-button,
.msm-zwemschool-hero .wh-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.msm-zwemschool-hero .wh-input::placeholder { color: var(--m-muted, #53747b); opacity: 1; }
.msm-zwemschool-hero .wh-input:focus { outline: none; }
.msm-zwemschool-hero .wh-ask:focus-within { box-shadow: inset 0 0 0 2px var(--m-accent2, #2f7f8c); }
.msm-zwemschool-hero .wh-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-ink, #123b45) 14%, var(--m-bg, #dfeff0));
  color: var(--m-ink, #123b45);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.msm-zwemschool-hero .wh-go:hover { background: color-mix(in srgb, var(--m-ink, #123b45) 22%, var(--m-bg, #dfeff0)); transform: scale(1.05); }
.msm-zwemschool-hero .wh-go:active { transform: scale(.95); }
.msm-zwemschool-hero .wh-go svg { width: 20px; height: 20px; }
.msm-zwemschool-hero .wh-ask.is-invalid { box-shadow: inset 0 0 0 2px var(--m-primary, #ef6e4a); }

/* Gestaffelde entree van hero-15 (motion initial/animate, duration 0,5, kop 0,7, easeInOut). */
.msm-zwemschool-hero .wh-step { animation: wh-rise .5s ease-in-out both; }
.msm-zwemschool-hero .wh-pill { animation-delay: .1s; }
.msm-zwemschool-hero .wh-title { animation-name: wh-rise-head; animation-duration: .7s; animation-delay: .2s; }
.msm-zwemschool-hero .wh-line-ink { animation-delay: .4s; }
.msm-zwemschool-hero .wh-line-muted { animation-delay: .55s; }
.msm-zwemschool-hero .wh-action { animation-delay: .7s; }
.msm-zwemschool-hero .wh-ask { animation-delay: .85s; }
@keyframes wh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wh-rise-head { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .msm-zwemschool-hero { padding: 48px 24px; }
  .msm-zwemschool-hero .wh-pill { font-size: 12px; }
  .msm-zwemschool-hero .wh-title { margin-top: 56px; font-size: 72px; }
  .msm-zwemschool-hero .wh-lines { margin-top: 48px; }
  .msm-zwemschool-hero .wh-line { font-size: 16px; }
  .msm-zwemschool-hero .wh-action { margin-top: 40px; width: auto; }
  .msm-zwemschool-hero .wh-cta { width: auto; padding: 16px 40px; font-size: 14px; line-height: 20px; }
  .msm-zwemschool-hero .wh-ask { margin-top: 80px; }
  .msm-zwemschool-hero .wh-input { padding: 12px 20px; font-size: 16px; }
  .msm-zwemschool-hero .wh-go { width: 52px; height: 52px; }
}
@media (min-width: 768px) {
  .msm-zwemschool-hero .wh-title { font-size: 96px; }
  .msm-zwemschool-hero .wh-line { font-size: 18px; }
}
@media (min-width: 1024px) {
  .msm-zwemschool-hero { padding: 48px 32px; }
  .msm-zwemschool-hero .wh-title { font-size: 7rem; }
}
@media (min-width: 1280px) {
  .msm-zwemschool-hero .wh-title { font-size: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-zwemschool-hero .wh-step { animation: none; }
  .msm-zwemschool-hero .wh-photo { transition: none; }
  .msm-zwemschool-hero .wh-cta,
  .msm-zwemschool-hero .wh-go,
  .msm-zwemschool-hero .wh-arrow { transition: none; }
  .msm-zwemschool-hero .wh-cta:hover,
  .msm-zwemschool-hero .wh-go:hover,
  .msm-zwemschool-hero .wh-cta:hover .wh-arrow { transform: none; }
}