(() => {
/* Motion & skeleton: satu <style> global, hanya properti opacity + transform
   (dipercepat GPU, tidak memicu layout), semua elemen animasi dilepas dari DOM
   setelah selesai, dan mati total pada prefers-reduced-motion. */
if (!document.getElementById("bbmc-skeleton-css")) {
  const s = document.createElement("style");
  s.id = "bbmc-skeleton-css";
  s.textContent = [
    "@keyframes bbmcShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}",
    ".bbmc-sk{background:linear-gradient(90deg,var(--neutral-100) 25%,var(--neutral-200) 37%,var(--neutral-100) 63%);background-size:200% 100%;animation:bbmcShimmer 1.4s ease-in-out infinite;border-radius:var(--radius-sm)}",
    /* fade halaman: kontainer + tiap shape di dalamnya masuk bertahap */
    "@keyframes bbmcRise{from{opacity:0}to{opacity:1}}",
    ".bbmc-rise{animation:bbmcRise .28s ease-out}",
    /* transisi login → dashboard */
    "@keyframes bbmcVeilOut{0%,45%{opacity:1}100%{opacity:0}}",
    "@keyframes bbmcBloom{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.2)}35%{opacity:.85}100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(3.2)}}",
    "@keyframes bbmcSweep{0%{opacity:0;transform:translate3d(-60%,0,0) skewX(-12deg)}30%{opacity:.9}100%{opacity:0;transform:translate3d(160%,0,0) skewX(-12deg)}}",
    "@keyframes bbmcMark{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.82)}30%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.14)}}",
    ".bbmc-veil{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;background:var(--white);animation:bbmcVeilOut 1.15s ease-in-out both}",
    ".bbmc-veil i{position:absolute;display:block;border-radius:var(--radius-circle);will-change:transform,opacity}",
    ".bbmc-veil .b1{left:22%;top:38%;width:38vmax;height:38vmax;background:radial-gradient(circle,var(--teal-200),transparent 68%);animation:bbmcBloom 1.15s cubic-bezier(.2,.7,.3,1) both}",
    ".bbmc-veil .b2{left:74%;top:64%;width:30vmax;height:30vmax;background:radial-gradient(circle,var(--leaf-200),transparent 66%);animation:bbmcBloom 1.15s cubic-bezier(.2,.7,.3,1) .12s both}",
    ".bbmc-veil .b3{left:50%;top:16%;width:22vmax;height:22vmax;background:radial-gradient(circle,var(--gold-100,var(--gold-200)),transparent 66%);animation:bbmcBloom 1.15s cubic-bezier(.2,.7,.3,1) .2s both}",
    ".bbmc-veil .sweep{left:0;top:0;width:34%;height:100%;border-radius:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);animation:bbmcSweep .95s cubic-bezier(.3,.7,.3,1) .1s both}",
    ".bbmc-veil .mark{left:50%;top:50%;width:min(46vw,320px);height:auto;border-radius:0;animation:bbmcMark 1.15s cubic-bezier(.2,.7,.3,1) both}",
    "@media (prefers-reduced-motion:reduce){.bbmc-sk{animation:none}.bbmc-rise{animation:none}.bbmc-veil{display:none}}",
  ].join("");
  document.head.appendChild(s);
}
const Bar = ({ w = "100%", h = 12, r }) => <span className="bbmc-sk" style={{ display: "block", width: w, height: h, borderRadius: r }} />;

/* Satu lapis transisi setelah sign in: tiga shape membesar + sweep cahaya + logo. */
function LoginVeil({ logo = LOGO_URL }) {
  return (
    <div className="bbmc-veil" aria-hidden="true">
      <i className="b1" /><i className="b2" /><i className="b3" /><i className="sweep" />
      <img className="mark" src={logo} alt="" style={{ position: "absolute" }} />
    </div>
  );
}

function PageSkeleton({ rows = 4 }) {
  return (
    <div aria-busy="true" aria-live="polite" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(min(100%,180px),1fr))", gap: 12 }}>
        {[0, 1, 2, 3].map((i) => (
          <div key={i} style={{ padding: 16, background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column", gap: 10 }}>
            <Bar w="52%" h={10} /><Bar w="38%" h={22} />
          </div>
        ))}
      </div>
      <div style={{ padding: 16, background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", display: "flex", flexDirection: "column", gap: 12 }}>
        <Bar w="30%" h={14} />
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Bar w={36} h={36} r="var(--radius-circle)" />
            <span style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}><Bar w="45%" h={11} /><Bar w="24%" h={9} /></span>
            <Bar w={72} h={12} />
          </div>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { PageSkeleton, SkeletonBar: Bar, LoginVeil });
})();