/* zonnestudio-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-31 (eclipse-hero met een tijdsverloop van de zon
   langs een boog). Tailwind-maten uit de bron: sectie relative isolate flex min-h-screen flex-col overflow-hidden
   px-4/6/8 pb-8/10 pt-6/16; podium absolute inset-0 -z-10; inhoud mx-auto max-w-[1400px] flex-1 flex-col items-center
   text-center; band h-[min(19rem,74vw)] en vanaf sm 44vh; h1 mt-4 max-w-[12ch] 2,5rem font-medium leading 1,02
   tracking -0,045em, sm: 6xl zonder max, xl: 4,75rem; intro mt-5 max-w-[38ch] text-base leading-relaxed gedempt;
   knoppen mt-8 flex-row gap-6: gevulde pill h-12 px-7 text-sm font-medium en tekstlink h-12 gap-2 text-sm met pijl
   (size-4) die bij hover opschuift; cellen mt-10 grid gap-3 text-sm, sm: mt-auto grid-cols-3 pt-10, eerste links en
   laatste rechts uitgelijnd. Entree (variants sequence en rise): staggerChildren 0,08 s na 0,2 s, per kind opacity 0,
   y 14 px en blur 6 px naar 0 in 0,9 s met ease [0.16, 1, 0.3, 1]; bij reduced motion geen entree (initial false).
   Fonts levert de site via assets/fonts.css. */
.msm-zonnestudio-hero {
  --zh-ease: cubic-bezier(.16, 1, .3, 1);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  padding: 24px 16px 32px;
  overflow: hidden;
  background: var(--m-bg, #f0ede7);
  color: var(--m-ink, #20282a);
  font-family: var(--m-font-body, 'DM Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-zonnestudio-hero *,
.msm-zonnestudio-hero *::before,
.msm-zonnestudio-hero *::after { box-sizing: border-box; }
.msm-zonnestudio-hero p,
.msm-zonnestudio-hero dl,
.msm-zonnestudio-hero dt,
.msm-zonnestudio-hero dd { margin: 0; }
.msm-zonnestudio-hero a { color: inherit; text-decoration: none; }
.msm-zonnestudio-hero a:focus-visible { outline: 2px solid var(--m-ink, #20282a); outline-offset: 2px; }
.msm-zonnestudio-hero svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Het WebGL-podium van de bron: absolute inset-0 achter de inhoud. */
.msm-zonnestudio-hero .zh-stage { position: absolute; inset: 0; z-index: -1; }
.msm-zonnestudio-hero .zh-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.msm-zonnestudio-hero .zh-inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

/* De band waarin de zon langs de boog loopt; zonder WebGL staat hier het beeld met een zachte gloed. */
.msm-zonnestudio-hero .zh-band {
  position: relative;
  flex: none;
  width: 100%;
  height: min(19rem, 74vw);
}
.msm-zonnestudio-hero .zh-fallback {
  position: absolute;
  inset: 8px 0 0;
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
.msm-zonnestudio-hero .zh-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--m-primary, #d9633d) 28%, transparent), transparent 70%);
  pointer-events: none;
}
.msm-zonnestudio-hero .zh-fallback img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.msm-zonnestudio-hero.is-stage .zh-fallback { display: none; }
/* Schaalstreepjes aan de einden van de baan: links zacht, rechts vol. */
.msm-zonnestudio-hero .zh-mark {
  position: absolute;
  bottom: -22px;
  display: none;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-muted, #666e70);
}
.msm-zonnestudio-hero .zh-mark-left { left: 0; }
.msm-zonnestudio-hero .zh-mark-right { right: 0; }
.msm-zonnestudio-hero.is-stage .zh-mark { display: block; }

.msm-zonnestudio-hero .zh-kicker {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--m-muted, #666e70);
}
.msm-zonnestudio-hero .zh-title {
  margin-top: 12px;
  max-width: 12ch;
  font-family: var(--m-font-display, 'Syne', ui-sans-serif, system-ui, sans-serif);
  font-size: 2.5rem;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.045em;
  color: var(--m-ink, #20282a);
  text-wrap: balance;
}
.msm-zonnestudio-hero .zh-intro {
  margin-top: 20px;
  max-width: 38ch;
  font-size: 16px;
  line-height: 1.625;
  color: var(--m-muted, #666e70);
  text-wrap: pretty;
}
.msm-zonnestudio-hero .zh-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.msm-zonnestudio-hero .zh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--m-primary, #d9633d);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--m-ink, #20282a);
  transition: background-color .2s linear;
}
.msm-zonnestudio-hero .zh-btn:hover { background: color-mix(in srgb, var(--m-primary, #d9633d) 86%, var(--m-ink, #20282a)); }
.msm-zonnestudio-hero .zh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--m-muted, #666e70);
  transition: color .2s linear;
}
.msm-zonnestudio-hero .zh-link:hover { color: var(--m-ink, #20282a); }
.msm-zonnestudio-hero .zh-arrow { width: 16px; height: 16px; transition: transform .2s linear; }
.msm-zonnestudio-hero .zh-link:hover .zh-arrow { transform: translateX(3px); }

/* Drie cellen onderaan op één rij (sm:grid-cols-3). */
.msm-zonnestudio-hero .zh-cells {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 40px;
  font-size: 14px;
  line-height: 20px;
}
.msm-zonnestudio-hero .zh-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.msm-zonnestudio-hero .zh-cell dt { font-weight: 600; color: var(--m-ink, #20282a); }
.msm-zonnestudio-hero .zh-cell dd { max-width: 34ch; color: var(--m-muted, #666e70); }

/* Entree van hero-31: sequence (stagger 0,08 s na 0,2 s) en rise (y 14, blur 6, 0,9 s). */
.msm-zonnestudio-hero .zh-rise { animation: zh-rise .9s var(--zh-ease) both; }
.msm-zonnestudio-hero .zh-kicker { animation-delay: .2s; }
.msm-zonnestudio-hero .zh-title { animation-delay: .28s; }
.msm-zonnestudio-hero .zh-intro { animation-delay: .36s; }
.msm-zonnestudio-hero .zh-actions { animation-delay: .44s; }
.msm-zonnestudio-hero .zh-cells { animation-delay: .52s; }
@keyframes zh-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (min-width: 640px) {
  .msm-zonnestudio-hero { padding: 24px 24px 32px; }
  .msm-zonnestudio-hero .zh-band { height: 44vh; }
  .msm-zonnestudio-hero .zh-title { max-width: none; font-size: 3.75rem; line-height: 1.02; }
  .msm-zonnestudio-hero .zh-cells { grid-template-columns: repeat(3, 1fr); margin-top: auto; padding-top: 40px; }
  .msm-zonnestudio-hero .zh-cell { align-items: center; }
  .msm-zonnestudio-hero .zh-cell:first-child { align-items: flex-start; text-align: left; }
  .msm-zonnestudio-hero .zh-cell:last-child { align-items: flex-end; text-align: right; }
}
@media (min-width: 1024px) {
  .msm-zonnestudio-hero { padding: 64px 32px 40px; }
}
@media (min-width: 1280px) {
  .msm-zonnestudio-hero .zh-title { font-size: 4.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-zonnestudio-hero .zh-rise { animation: none; }
  .msm-zonnestudio-hero .zh-btn,
  .msm-zonnestudio-hero .zh-link,
  .msm-zonnestudio-hero .zh-arrow { transition: none; }
}