/* ------------------------------------------------------------------
   Manna QR — front-end landing page (link-in-bio card list)
   --mp-bg / --mp-line arrive from MQR_Frontend::css_vars(). Every item
   node can set --c inline on .mp-link; when it has no colour of its
   own the template falls back to var(--mp-line).
   No CDN fonts — Fraunces/Karla degrade to the system stack below.
------------------------------------------------------------------- */
.mp-svc{
  --mp-bg:#FBF6EF;
  --mp-line:#E39A33;
  --mp-ink:#3D262E;
  --mp-ink-soft:rgba(61,38,46,.66);
  --mp-sand:#F3E9DB;

  --mp-display:"Fraunces",Georgia,"Times New Roman",serif;
  --mp-body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  position:relative;
  font-family:var(--mp-body);
  color:var(--mp-ink);
  background:var(--mp-bg);
  -webkit-font-smoothing:antialiased;
  padding-bottom:40px;
  overflow:hidden;
}
.mp-svc *,.mp-svc *::before,.mp-svc *::after{box-sizing:border-box;}
.mp-svc__inner{max-width:460px;margin:0 auto;padding:0 18px;position:relative;}

/* ---------- glaze wash banner ---------- */
.mp-banner{position:relative;height:150px;overflow:hidden;}
.mp-banner svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ---------- avatar on a turning wheel ---------- */
.mp-avatar{position:relative;width:120px;height:120px;margin:-64px auto 0;}
.mp-avatar__wheel{position:absolute;inset:-8px;animation:mp-spin 44s linear infinite;}
.mp-avatar__wheel circle{
  fill:none;stroke:var(--mp-line);stroke-width:1.6;
  stroke-dasharray:3 9;stroke-linecap:round;opacity:.85;
}
@keyframes mp-spin{to{transform:rotate(360deg);}}
.mp-avatar__disc{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--mp-sand);
  border:5px solid var(--mp-bg);box-shadow:0 10px 24px rgba(61,38,46,.2);
  display:flex;align-items:center;justify-content:center;
}
.mp-avatar__disc img{width:100%;height:100%;object-fit:cover;display:block;}
.mp-avatar__disc span{font-family:var(--mp-display);font-size:40px;font-weight:600;color:var(--mp-ink);}

/* ---------- identity ---------- */
.mp-id{text-align:center;margin:14px 0 0;}
.mp-id__name{
  font-family:var(--mp-display);font-size:30px;font-weight:600;letter-spacing:-.02em;
  line-height:1.1;margin:0 0 6px;color:var(--mp-ink);
}
.mp-id__desc{font-size:15px;line-height:1.55;color:var(--mp-ink-soft);margin:0 auto;max-width:34ch;}

/* ---------- the channel rows ---------- */
.mp-links{margin:26px 0 0;display:flex;flex-direction:column;gap:12px;}
.mp-link,
.mp-link *{text-decoration:none !important;}
.mp-link{
  position:relative;display:flex;align-items:center;gap:14px;overflow:hidden;
  padding:9px 14px 9px 9px;border-radius:16px;color:var(--mp-ink);
  background:#fff;border:1px solid rgba(61,38,46,.12);
  box-shadow:0 2px 6px rgba(61,38,46,.07);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease, transform .45s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease, border-color .22s ease;
}
.mp-link.is-in{opacity:1;transform:none;}
.mp-link::after{ /* a drip of glaze in the channel's own colour */
  content:"";position:absolute;left:26%;bottom:0;width:12px;height:0;
  background:var(--c);border-radius:0 0 8px 8px;
  transition:height .3s cubic-bezier(.3,.8,.4,1);
}
.mp-link:hover,.mp-link:focus-visible{
  transform:translateY(-3px);outline:none;
  border-color:var(--c);
  box-shadow:0 12px 24px rgba(61,38,46,.16);
}
.mp-link:hover::after,.mp-link:focus-visible::after{height:9px;}

.mp-link__swatch{
  flex:0 0 56px;width:56px;height:56px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--c);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.mp-link__swatch img{width:100%;height:100%;object-fit:cover;display:block;}
.mp-link__swatch svg{
  width:27px;height:27px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.mp-link:hover .mp-link__swatch{transform:rotate(-4deg) scale(1.05);}

.mp-link__text{flex:1 1 auto;min-width:0;text-align:center;padding-left:6px;}
.mp-link__title{
  display:block;font-family:var(--mp-display);font-size:17px;font-weight:600;
  letter-spacing:-.01em;line-height:1.25;
}
.mp-link__note{display:block;font-size:12.5px;font-weight:500;color:var(--mp-ink-soft);margin-top:2px;}

.mp-link__go{
  flex:0 0 auto;width:22px;height:22px;color:var(--c);opacity:.55;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
.mp-link__go svg{width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mp-link:hover .mp-link__go{transform:translateX(3px);opacity:1;}

@media (max-width:380px){
  .mp-id__name{font-size:26px;}
  .mp-link__swatch{flex-basis:48px;width:48px;height:48px;}
  .mp-link__title{font-size:15.5px;}
}
@media (prefers-reduced-motion:reduce){
  .mp-avatar__wheel{animation:none;}
  .mp-link{opacity:1;transform:none;transition:none;}
  .mp-link:hover{transform:none;}
  .mp-link:hover .mp-link__swatch,.mp-link:hover .mp-link__go{transform:none;}
}