/* Voicehook x Magic UI (demo).
   Vanilla-port van Magic UI-componenten (MIT, magicui.design), in Voicehook-huisstijl:
   manila papier, drukinkt, roze briefje, carbon-blauw. Geen externe bronnen. */

/* ---------- Blur Fade (vervangt .reveal) ---------- */
.mu-blur{opacity:0; transform:translateY(-6px); filter:blur(6px);
  transition:opacity .45s ease-out, transform .45s ease-out, filter .45s ease-out;
  transition-delay:var(--mu-d,40ms)}
.mu-blur.in{opacity:1; transform:none; filter:none}
.no-js .mu-blur{opacity:1; transform:none; filter:none}

/* ---------- Shimmer Button ---------- */
.mu-shimmer{--spread:90deg; --shimmer-color:#F5D9CF; --radius:10px; --speed:3s; --cut:.06em; --bg:var(--ink);
  position:relative; z-index:0; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.1);
  padding:13px 22px; white-space:nowrap; color:var(--paper); background:var(--bg);
  font-family:var(--disp); font-weight:700; font-size:15.5px; cursor:pointer;
  transform:translateZ(0); transition:transform .3s ease-in-out}
.mu-shimmer:active{transform:translateY(1px)}
.mu-shimmer .mu-sc{position:absolute; inset:0; z-index:-30; overflow:visible; filter:blur(2px); container-type:size}
.mu-shimmer .mu-spark{position:absolute; inset:0; height:100cqh; aspect-ratio:1; animation:mu-shimmer-slide var(--speed) ease-in-out infinite alternate}
.mu-shimmer .mu-spark::before{content:""; position:absolute; inset:-100%; width:auto;
  background:conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread));
  animation:mu-spin-around calc(var(--speed) * 2) infinite linear}
.mu-shimmer .mu-hl{position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 -8px 10px #ffffff1f; transition:box-shadow .3s ease-in-out}
.mu-shimmer:hover .mu-hl{box-shadow:inset 0 -6px 10px #ffffff3f}
.mu-shimmer:active .mu-hl{box-shadow:inset 0 -10px 10px #ffffff3f}
.mu-shimmer .mu-bd{position:absolute; inset:var(--cut); z-index:-20; border-radius:var(--radius); background:var(--bg)}
.mu-shimmer > .lbl{position:relative}
@keyframes mu-shimmer-slide{to{transform:translate(calc(100cqw - 100%),0)}}
@keyframes mu-spin-around{
  0%{transform:translateZ(0) rotate(0)}
  15%,35%{transform:translateZ(0) rotate(90deg)}
  65%,85%{transform:translateZ(0) rotate(270deg)}
  100%{transform:translateZ(0) rotate(360deg)}}

/* ---------- Border Beam ---------- */
.mu-beam{--bw:2px; --size:110px; --from:var(--pink-deep); --to:var(--pink); --dur:9s;
  position:absolute; inset:0; pointer-events:none; border-radius:inherit; border:var(--bw) solid transparent; z-index:3;
  -webkit-mask:linear-gradient(transparent,transparent) padding-box, linear-gradient(#000,#000) border-box;
  -webkit-mask-composite:source-in, xor;
  mask:linear-gradient(transparent,transparent) padding-box, linear-gradient(#000,#000) border-box;
  mask-composite:exclude}
.mu-beam i{position:absolute; width:var(--size); aspect-ratio:1;
  background:linear-gradient(to left, var(--from), var(--to), transparent);
  offset-path:rect(0 auto auto 0 round var(--size)); offset-distance:0%;
  animation:mu-beam var(--dur) linear infinite; animation-delay:var(--delay,0s)}
.mu-beam.light{--from:#F5D9CF; --to:var(--pink)}
@keyframes mu-beam{to{offset-distance:100%}}
.mu-beam-clip{position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:3}
.price.mid .mu-beam-clip{border-radius:16px}

/* ---------- Marquee ---------- */
.mu-strip{padding:4px 0 22px; border-top:1px solid var(--rule2); border-bottom:1px solid var(--rule2); background:rgba(243,236,221,.6)}
.mu-strip .cap{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); text-align:center; padding:18px 18px 8px}
.mu-marquee{--gap:12px; --duration:46s; display:flex; gap:var(--gap); overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.mu-marquee .mu-track{display:flex; flex-shrink:0; justify-content:space-around; gap:var(--gap); animation:mu-marquee var(--duration) infinite linear}
.mu-marquee.reverse .mu-track{animation-direction:reverse}
.mu-marquee:hover .mu-track{animation-play-state:paused}
@keyframes mu-marquee{from{transform:translateX(0)} to{transform:translateX(calc(-100% - var(--gap)))}}
.mu-tag{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; padding:8px 15px 8px 9px; border-radius:30px;
  background:var(--slip2); border:1px solid var(--edge); font-weight:700; font-size:14.5px; color:var(--ink)}
.mu-tag .k{font-family:var(--mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; background:var(--carbon-soft); color:var(--carbon)}
.mu-tag.p .k{background:var(--pink-soft); color:var(--pink-deep)}
.mu-tag.s .k{background:var(--sage-soft); color:var(--sage)}
.mu-quote{white-space:nowrap; padding:9px 18px; border-radius:12px; background:var(--slip); border:1px solid var(--edge);
  font-family:var(--serif); font-size:16.5px; color:var(--ink2)}
.mu-quote::before{content:"\201C"; color:var(--pink-deep)} .mu-quote::after{content:"\201D"; color:var(--pink-deep)}

/* ---------- Animated List ---------- */
.mu-feedwrap{margin-top:44px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center;
  background:var(--paper2); border:1px solid var(--rule2); border-radius:20px; padding:36px 40px}
@media(max-width:880px){ .mu-feedwrap{grid-template-columns:minmax(0,1fr); gap:22px; padding:26px 18px} }
.mu-feedwrap h3{font-size:clamp(23px,3vw,30px); letter-spacing:-.025em; margin:14px 0 12px}
.mu-feedwrap .intro{font-family:var(--serif); font-size:17.5px; color:var(--ink2); line-height:1.55}
.mu-feedwrap .replay2{margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--ink3); background:none; border:none; padding:4px 0; cursor:pointer}
.mu-feedwrap .replay2:hover{color:var(--ink)}
.mu-feed{position:relative; height:392px; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:4px 2px;
  -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent)}
.mu-item{display:flex; gap:13px; align-items:center; background:var(--slip2); border:1px solid #E7DBC2; border-radius:14px; padding:12px 15px;
  box-shadow:0 12px 24px -20px rgba(43,38,32,.55); transform-origin:50% 0; flex:none}
.mu-item .ic{width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:12.5px}
.mu-item.todo .ic{background:var(--sage-soft); color:var(--sage); border:1.5px solid var(--sage)}
.mu-item.learn .ic{background:var(--carbon-soft); color:var(--carbon); border:1.5px solid var(--carbon)}
.mu-item.hook .ic{background:var(--pink-soft); color:var(--pink-deep); border:1.5px solid var(--pink-deep)}
.mu-item.mail .ic{background:var(--paper); color:var(--ink2); border:1.5px solid var(--rule2)}
.mu-item .bd{flex:1; min-width:0}
.mu-item .t{font-weight:700; font-size:15px; line-height:1.3}
.mu-item .t small{font-family:var(--mono); font-weight:400; font-size:11.5px; color:var(--ink3); margin-left:6px}
.mu-item .d{font-family:var(--serif); font-size:14.5px; color:var(--ink2); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- Number Ticker ---------- */
.mu-tick{display:inline-block; font-variant-numeric:tabular-nums}

/* ---------- Dot Pattern (ontwikkelaarsblok) ---------- */
.ai{position:relative; overflow:hidden}
.ai > .ai-grid{position:relative; z-index:1}
.mu-dots{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; color:#7f9bb4;
  -webkit-mask-image:radial-gradient(560px circle at 80% 28%, #000, transparent 72%);
  mask-image:radial-gradient(560px circle at 80% 28%, #000, transparent 72%)}
.mu-dots circle.g{transform-box:fill-box; transform-origin:center; animation:mu-glow var(--du,3s) ease-in-out var(--de,0s) infinite alternate}
@keyframes mu-glow{from{opacity:.4; transform:scale(1)} to{opacity:1; transform:scale(1.5)}}

/* ---------- demo-label ---------- */
.mu-demo-bar{background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-align:center; padding:7px 14px}
.mu-demo-bar a{color:var(--pink); text-decoration:underline}

/* ---------- minder beweging ---------- */
@media(prefers-reduced-motion:reduce){
  .mu-blur{opacity:1; transform:none; filter:none; transition:none}
  .mu-shimmer .mu-sc{display:none}
  .mu-beam-clip{display:none}
  .mu-marquee{-webkit-mask-image:none; mask-image:none; justify-content:center}
  .mu-marquee .mu-track{animation:none; flex-wrap:wrap; justify-content:center; flex-shrink:1}
  .mu-marquee .mu-track[aria-hidden="true"]{display:none}
  .mu-feed{height:auto; -webkit-mask-image:none; mask-image:none}
  .mu-dots circle.g{animation:none}
}