/* HetWerkt.net — Manifest: veel zwart, één zin, trage onthulling */

.mf{background:#000}

/* ───── De zin ───── */
.mf-kop{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 0 110px}
.mf-kop::before{background:radial-gradient(ellipse 60% 38% at 50% 108%,rgba(74,31,184,.55),transparent 70%);opacity:0;animation:mfLicht 7s 2.6s var(--zacht) forwards}
@keyframes mfLicht{to{opacity:1}}
.mf-kruimel{justify-content:center;margin-bottom:clamp(30px,6vh,70px)}
.pkop h1.mf-zin{max-width:none;margin:0 auto;font-size:clamp(3.9rem,18.5vw,16.5rem);line-height:.9;letter-spacing:-.068em;white-space:nowrap;padding:.05em 0 .12em}
.mf-zin .mf-l{display:inline-block;white-space:pre;
  background:linear-gradient(180deg,#fff 22%,var(--lila) 74%,#7a5be0 118%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mf-punt{font-style:normal;display:inline-block;color:var(--oranje);text-shadow:0 0 .18em var(--oranje-gloed),0 0 .55em var(--oranje-gloed)}

/* trage onthulling: alleen als het script de letters heeft klaargezet */
.mf-wacht .mf-l{opacity:0;filter:blur(26px);transform:translateY(.12em) scale(1.06)}
.mf-wacht .mf-punt{opacity:0;transform:scale(0)}
.mf-wacht .mf-onder,.mf-wacht .mf-kruimel,.mf-wacht .mf-scroll{opacity:0}
.mf-l{transition:opacity 2.4s var(--zacht),filter 2.8s var(--zacht),transform 3s var(--zacht);transition-delay:calc(var(--i)*340ms + .9s)}
.mf-punt{transition:opacity .6s 5.2s,transform 1s 5.2s cubic-bezier(.3,1.7,.5,1)}
.mf-onder,.mf-kruimel,.mf-scroll{transition:opacity 2.4s 6.4s}
.pkop .lead.mf-onder{margin:clamp(26px,5vh,54px) auto 0;font:500 .78rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--tekst-dof)}
.mf-scroll{bottom:30px}

/* ───── De uitleg: drie zinnen, elk met eigen ruimte ───── */
.mf-uitleg{padding:clamp(40px,10vh,120px) 0}
.mf-regel{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:26px;border-top:1px solid rgba(255,255,255,.07)}
.mf-regel[data-onthul]{transition-duration:2s,2.2s,2s}
.mf-nr{font:500 .76rem var(--mono);letter-spacing:.2em;color:var(--paars-licht)}
.mf-regel p{font-size:clamp(2.2rem,7.4vw,6.4rem);font-weight:800;letter-spacing:-.055em;line-height:.98;max-width:13ch;text-wrap:balance}
.mf-regel:nth-child(2){align-items:flex-end;text-align:right}
.mf-regel:nth-child(2) p{margin-left:auto}

/* ───── Eén droge zin, en de ondertekening ───── */
.mf-slot{padding:clamp(60px,12vh,150px) 0 clamp(70px,10vh,120px);border-top:1px solid rgba(255,255,255,.07);text-align:center}
.mf-droog{max-width:44ch;margin:0 auto;color:var(--tekst-zacht);font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.6;text-wrap:balance}
.mf-teken{margin:clamp(80px,14vh,170px) auto 0;display:flex;flex-direction:column;align-items:center}
.mf-krabbel{width:clamp(86px,12vw,128px);height:auto;overflow:visible;transform:rotate(-6deg)}
.mf-krabbel path{fill:none;stroke:var(--tekst);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--zacht) .7s}
.mf-lamp,.mf-lamp-gloed{fill:var(--oranje);opacity:0;transition:opacity .5s 2.9s}
.mf-teken.is-zichtbaar .mf-krabbel path{stroke-dashoffset:0}
.mf-teken.is-zichtbaar .mf-lamp{opacity:1}
.mf-teken.is-zichtbaar .mf-lamp-gloed{opacity:.24}
.mf-streep{display:block;width:min(300px,70vw);height:1px;margin-top:10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 15%,rgba(255,255,255,.4) 85%,transparent)}
.mf-naam{margin-top:16px;font-weight:800;font-size:1.35rem;letter-spacing:-.035em}
.mf-datum{margin-top:6px;font:500 .74rem var(--mono);letter-spacing:.06em;color:var(--tekst-dof)}

.mf-voet{margin-top:clamp(90px,16vh,190px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 28px;font-size:.85rem;color:var(--tekst-dof)}
.mf-link{transition:color .3s}
.mf-link:hover{color:var(--tekst)}
.mf-druk{font:500 .72rem var(--mono);letter-spacing:.06em;color:var(--tekst-dof);padding:.45em .9em;border-radius:99px;border:1px solid rgba(255,255,255,.09);transition:color .3s,border-color .3s}
.mf-druk:hover{color:var(--tekst);border-color:rgba(255,255,255,.3)}

@media (max-width:640px){
  .mf-regel{min-height:52vh}
  .mf-regel:nth-child(2){align-items:flex-start;text-align:left}
  .mf-regel:nth-child(2) p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .mf-kop::before{animation:none;opacity:1}
}