// Prism Translate — shared animated brand mark (inline SVG prism refracting light).
// Fable-5 style: procedural, self-contained, choreographed motion, top-lit prism.

export const PRISM_SVG = `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Prism">
  <defs>
    <linearGradient id="pl-bg" x1="2" y1="2" x2="46" y2="46" gradientUnits="userSpaceOnUse">
      <stop stop-color="#6366f1"/><stop offset="1" stop-color="#ec4899"/>
    </linearGradient>
    <linearGradient id="pl-tri" x1="22" y1="12" x2="22" y2="34" gradientUnits="userSpaceOnUse">
      <stop stop-color="#ffffff" stop-opacity="0.96"/><stop offset="1" stop-color="#ffffff" stop-opacity="0.66"/>
    </linearGradient>
  </defs>
  <rect width="48" height="48" rx="11" fill="url(#pl-bg)"/>
  <rect width="48" height="24" rx="11" fill="#ffffff" opacity="0.08"/>
  <rect class="pl-beam" x="3" y="22.4" width="15" height="2.6" rx="1.3" fill="#ffffff" opacity="0.92"/>
  <path d="M22.2 12 L33.4 33 L11 33 Z" fill="url(#pl-tri)" stroke="#ffffff" stroke-opacity="0.55" stroke-width="1"/>
  <g class="pl-spectrum" stroke-width="2.1" stroke-linecap="round">
    <path d="M27 25.4 L45.5 20.5" stroke="#fb3a5d"/>
    <path d="M27.5 26.4 L45.5 24.5" stroke="#fb923c"/>
    <path d="M28 27.4 L45.5 28.6" stroke="#facc15"/>
    <path d="M28.4 28.4 L45.5 32.6" stroke="#34d399"/>
    <path d="M28.8 29.4 L45.5 36.5" stroke="#38bdf8"/>
  </g>
</svg>`;

const BRAND_CSS = `
.logo{ background:none !important; box-shadow:none !important; overflow:visible; display:inline-block; }
.logo svg{ width:100%; height:100%; display:block; border-radius:inherit;
  filter: drop-shadow(0 4px 14px rgba(99,102,241,0.42)); }
.pl-spectrum path{ animation: pl-shine 3.4s cubic-bezier(0.16,1,0.3,1) infinite; }
.pl-spectrum path:nth-child(2){ animation-delay:.12s } .pl-spectrum path:nth-child(3){ animation-delay:.24s }
.pl-spectrum path:nth-child(4){ animation-delay:.36s } .pl-spectrum path:nth-child(5){ animation-delay:.48s }
.pl-beam{ animation: pl-beam 3.4s cubic-bezier(0.16,1,0.3,1) infinite; transform-origin:left center; }
@keyframes pl-shine{ 0%,100%{ opacity:.55 } 45%{ opacity:1 } }
@keyframes pl-beam{ 0%,100%{ opacity:.55 } 45%{ opacity:1; transform:scaleX(1.04) } }
@media (prefers-reduced-motion: reduce){ .pl-spectrum path,.pl-beam{ animation:none } }
`;

export function mountBrand() {
  if (!document.getElementById("prism-brand-style")) {
    const s = document.createElement("style");
    s.id = "prism-brand-style";
    s.textContent = BRAND_CSS;
    document.head.appendChild(s);
  }
  document.querySelectorAll(".logo").forEach((el) => {
    if (!el.querySelector("svg")) el.innerHTML = PRISM_SVG;
  });
}
