"use client";

import { useEffect, useId, useRef } from "react";

// ─── shared gesture hook ──────────────────────────────────────────────────────
function useIconGesture<T extends HTMLElement>(enabled = true) {
  const ref = useRef<T>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !enabled) return;
    const DWELL = 130,
      EXIT = 2.2;
    let timer: number | undefined;
    const ours = (a: Animation) =>
      (a as Animation & { animationName?: string }).animationName?.startsWith(
        "lg-"
      );
    const over = () => {
      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
      if (el.hasAttribute("data-go") || timer !== undefined) return;
      timer = window.setTimeout(() => {
        timer = undefined;
        el.setAttribute("data-go", "");
        const running = el.getAnimations({ subtree: true }).filter(ours);
        if (!running.length) return el.removeAttribute("data-go");
        void Promise.allSettled(running.map((a) => a.finished)).then(() =>
          el.removeAttribute("data-go")
        );
      }, DWELL);
    };
    const enter = (event: PointerEvent) => {
      if (event.pointerType === "mouse") over();
    };
    const click = () => over();
    const out = () => {
      if (timer !== undefined) {
        clearTimeout(timer);
        timer = undefined;
        return;
      }
      for (const a of el.getAnimations({ subtree: true })) {
        if (ours(a)) a.updatePlaybackRate(EXIT);
      }
    };
    el.addEventListener("pointerenter", enter);
    el.addEventListener("pointerleave", out);
    el.addEventListener("click", click);
    return () => {
      el.removeEventListener("pointerenter", enter);
      el.removeEventListener("pointerleave", out);
      el.removeEventListener("click", click);
      if (timer !== undefined) clearTimeout(timer);
    };
  }, [enabled]);
  return ref;
}

// ─── combined CSS for the icon gestures ─────────────────────────────────────
const ALL_CSS = `
.icon-gesture { cursor: pointer; touch-action: manipulation; }
.icon-gesture > span { pointer-events: none; }
.icon-gesture:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.dt-hat { transform-box: view-box; transform-origin: 36px 120px; transform: rotate(0deg); }
@keyframes lg-detective-tip {
  0%,100% { transform: rotate(0deg); }
  34%,48% { transform: rotate(-8deg); }
}
.cs-bolt { stroke: currentColor; stroke-width: 0; stroke-linejoin: round; }
.cs-current { stroke-dasharray: 0.09 1.2; stroke-dashoffset: 0.1; }
@keyframes lg-charging-flow {
  0%,100% { stroke-width: 0; }
  18%,32% { stroke-width: 8; }
  48% { stroke-width: 0; }
}
@keyframes lg-charging-current {
  0%,24% { stroke-dashoffset: 0.1; }
  88%,100% { stroke-dashoffset: -1.02; }
}
.dr-rotor { transform-box: view-box; transform: rotate(0deg); }
@keyframes lg-drone-rotor { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.eg-rest { visibility: visible; }
.eg-shell { visibility: hidden; transform-box: view-box; transform-origin: 128px 232px; transform: rotate(0deg); }
.eg-left { --egg-open: -6deg; }
.eg-right { --egg-open: 6deg; }
@keyframes lg-egg-rest {
  0%,100% { visibility: visible; }
  0.01%,99.99% { visibility: hidden; }
}
@keyframes lg-egg-shell {
  0%,100% { visibility: hidden; }
  0.01%,99.99% { visibility: visible; }
}
@keyframes lg-egg-open {
  0%,100% { transform: rotate(0deg); }
  16% { transform: rotate(calc(var(--egg-open) * -0.12)); }
  42%,58% { transform: rotate(var(--egg-open)); }
  84% { transform: rotate(calc(var(--egg-open) * -0.06)); }
}
.eq-segment,.fp-ridge { opacity: 1; }
@keyframes lg-equalizer-level {
  0%,100% { opacity: 1; }
  24%,42% { opacity: 0; }
  62%,76% { opacity: 1; }
}
@keyframes lg-fingerprint-read {
  0%,100% { opacity: 1; }
  24% { opacity: 0.2; }
  58% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .icon-gesture[data-go] .lg-detective .dt-hat { animation: lg-detective-tip 0.86s cubic-bezier(0.215,0.61,0.355,1) both; }
  .icon-gesture[data-go] .lg-charging-station .cs-bolt { animation: lg-charging-flow 1.04s cubic-bezier(0.4,0,0.2,1) both; }
  .icon-gesture[data-go] .lg-charging-station .cs-current { animation: lg-charging-current 1.04s cubic-bezier(0.4,0,0.2,1) both; }
  .icon-gesture[data-go] .lg-drone .dr-rotor { animation: lg-drone-rotor 1.1s cubic-bezier(0.455,0.03,0.515,0.955) both; }
  .icon-gesture[data-go] .lg-drone .dr-counter { animation-direction: reverse; }
  .icon-gesture[data-go] .lg-egg .eg-rest { animation: lg-egg-rest 1.04s steps(1,end) both; }
  .icon-gesture[data-go] .lg-egg .eg-shell { animation: lg-egg-open 1.04s cubic-bezier(0.4,0,0.2,1) both, lg-egg-shell 1.04s steps(1,end) both; }
  .icon-gesture[data-go] .lg-equalizer .eq-segment { animation: lg-equalizer-level 0.74s ease both; }
  .icon-gesture[data-go] .lg-fingerprint .fp-ridge { animation: lg-fingerprint-read 0.72s ease both; }
}
/* ── Aperture: iris stops down 30° (half the 60° blade pitch) and reopens.
   Blades rotate rigidly about the lens center; the outer ring holds still
   as the fixed frame. Return landing: snap shut (ease-out), settle open. */
.ap-blade { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(0deg); }
@keyframes lg-aperture-iris {
  0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.215,0.61,0.355,1); }
  40%  { transform: rotate(30deg); animation-timing-function: cubic-bezier(0.645,0.045,0.355,1); }
  100% { transform: rotate(0deg); }
}

/* ── Pie Slice ── */
.lg-pie .pi-e1, .lg-pie .pi-orbit { transform-box: view-box; transform-origin: 128px 128px; }
.lg-pie .pi-slice { transform-box: view-box; transform-origin: 128px 128px; }
@keyframes lg-pie-fan {
  0% { d: path("M128,128L128,32L160.777,37.769L189.614,54.382L211.047,79.842L222.499,111.09L222.594,144.371L211.32,175.684L190.033,201.266L161.291,218.043L128.547,223.998L95.738,218.417L66.806,201.969L45.229,176.631Z"); }
  28.333% { d: path("M128,128L128,32L160.777,37.769L189.614,54.382L211.047,79.842L222.499,111.09L222.594,144.371L211.32,175.684L190.033,201.266L161.291,218.043L128.547,223.998L95.738,218.417L66.806,201.969L45.229,176.631Z"); }
  43.333% { d: path("M128,128L128,32L176,44.862L211.138,80L224,128L211.138,176L176,211.138L128,224L80,211.138L44.862,176L32,128L44.862,80L80,44.862L128,32Z"); }
  50% { d: path("M128,128L128,32L176,44.862L211.138,80L224,128L211.138,176L176,211.138L128,224L80,211.138L44.862,176L32,128L44.862,80L80,44.862L128,32Z"); }
  65% { d: path("M128,128L128,32L160.777,37.769L189.614,54.382L211.047,79.842L222.499,111.09L222.594,144.371L211.32,175.684L190.033,201.266L161.291,218.043L128.547,223.998L95.738,218.417L66.806,201.969L45.229,176.631Z"); }
  100% { d: path("M128,128L128,32L160.777,37.769L189.614,54.382L211.047,79.842L222.499,111.09L222.594,144.371L211.32,175.684L190.033,201.266L161.291,218.043L128.547,223.998L95.738,218.417L66.806,201.969L45.229,176.631Z"); }
}
@keyframes lg-pie-rim {
  0% { stroke-dasharray: 0.665 0.335; }
  28.333% { stroke-dasharray: 0.665 0.335; }
  43.333% { stroke-dasharray: 1.02 0; }
  50% { stroke-dasharray: 1.02 0; }
  65% { stroke-dasharray: 0.665 0.335; }
  100% { stroke-dasharray: 0.665 0.335; }
}
@keyframes lg-pie-edge {
  0% { transform: rotate(0deg); }
  28.333% { transform: rotate(0deg); }
  43.333% { transform: rotate(120.436deg); }
  50% { transform: rotate(120.436deg); }
  65% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes lg-pie-out {
  0% { transform: translate(0px,0px); animation-timing-function: cubic-bezier(0.2,0.8,0.35,0.95); }
  12.5% { transform: translate(-13.856px,-8px); }
  21.667% { transform: translate(-13.856px,-8px); animation-timing-function: cubic-bezier(0.45,0,0.9,0.35); }
  36.667% { transform: translate(-152.42px,-88px); }
  51.667% { transform: translate(-152.42px,-88px); animation-timing-function: cubic-bezier(0.15,0.8,0.45,0.9); }
  66.667% { transform: translate(-13.856px,-8px); }
  86.667% { transform: translate(-13.856px,-8px); animation-timing-function: cubic-bezier(0.2,0.8,0.45,0.9); }
  100% { transform: translate(0px,0px); }
}
@keyframes lg-pie-orbit {
  0% { transform: rotate(0deg); }
  46.667% { transform: rotate(0deg); }
  46.668% { transform: rotate(-120deg); }
  68.333% { transform: rotate(-120deg); animation-timing-function: cubic-bezier(0.35,0.25,0.4,0.9); }
  93.333% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ── Pulse ── */
.lg-pulse .pu-dot { transform-box: view-box; transform-origin: 0 0; }
.lg-pulse .pu-wire { stroke-dashoffset: 0; }
.lg-pulse .pu-dot { transform: translate(48px,128px); opacity: 0; }
.lg-pulse .pu-f0 { stroke-opacity: 0.1429; stroke-dashoffset: 0.12; }
.lg-pulse .pu-f1 { stroke-opacity: 0.2857; stroke-dashoffset: 0.1; }
.lg-pulse .pu-f2 { stroke-opacity: 0.4286; stroke-dashoffset: 0.08; }
.lg-pulse .pu-f3 { stroke-opacity: 0.5714; stroke-dashoffset: 0.06; }
.lg-pulse .pu-f4 { stroke-opacity: 0.7143; stroke-dashoffset: 0.04; }
.lg-pulse .pu-f5 { stroke-opacity: 0.8571; stroke-dashoffset: 0.02; }
@keyframes lg-pulse-draw { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1.42; } }
@keyframes lg-pulse-f0 { 0% { stroke-dashoffset: 0.12; } 100% { stroke-dashoffset: -1.3; } }
@keyframes lg-pulse-f1 { 0% { stroke-dashoffset: 0.1; } 100% { stroke-dashoffset: -1.32; } }
@keyframes lg-pulse-f2 { 0% { stroke-dashoffset: 0.08; } 100% { stroke-dashoffset: -1.34; } }
@keyframes lg-pulse-f3 { 0% { stroke-dashoffset: 0.06; } 100% { stroke-dashoffset: -1.36; } }
@keyframes lg-pulse-f4 { 0% { stroke-dashoffset: 0.04; } 100% { stroke-dashoffset: -1.38; } }
@keyframes lg-pulse-f5 { 0% { stroke-dashoffset: 0.02; } 100% { stroke-dashoffset: -1.4; } }
@keyframes lg-pulse-head {
  0% { transform: translate(48px,128px); }
  29.5775% { transform: translate(48px,128px); }
  35.233% { transform: translate(72px,128px); }
  50.4317% { transform: translate(104px,72px); }
  79.1458% { transform: translate(152px,184px); }
  94.3445% { transform: translate(184px,128px); }
  100% { transform: translate(208px,128px); }
}
@keyframes lg-pulse-lit {
  0% { opacity: 0; } 29.5775% { opacity: 0; } 31.5775% { opacity: 1; } 97.8% { opacity: 1; } 100% { opacity: 0; }
}

/* ── Line Up ── */
.lg-trendline .lu-trend, .lg-trendline .lu-arrow { stroke-dashoffset: 0; }
@keyframes lg-trend-line {
  0%     { stroke-dashoffset: 0; }
  9.302% { stroke-dashoffset: 0;    animation-timing-function: cubic-bezier(0.45,0,0.9,0.35); }
  30.814%{ stroke-dashoffset: 1.12; }
  33.721%{ stroke-dashoffset: 1.12; animation-timing-function: cubic-bezier(0.3,0.35,0.4,0.9); }
  79.07% { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 0; }
}
@keyframes lg-trend-arrow {
  0%     { stroke-dashoffset: 0;    animation-timing-function: cubic-bezier(0.45,0,0.9,0.35); }
  9.302% { stroke-dashoffset: 1.12; }
  79.07% { stroke-dashoffset: 1.12; animation-timing-function: cubic-bezier(0.15,0.8,0.45,0.9); }
  100%   { stroke-dashoffset: 0; }
}

/* ── Faders ── */
@keyframes lg-fd-l-knob {
  0% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  19.101% { transform: translateY(-48px); }
  33.708% { transform: translateY(-48px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  52.809% { transform: translateY(32px); }
  67.416% { transform: translateY(32px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  86.517% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}
@keyframes lg-fd-l-up {
  0% { d: path("M56,40L56,112"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  19.101% { d: path("M56,40L56,64"); }
  33.708% { d: path("M56,40L56,64"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  52.809% { d: path("M56,40L56,144"); }
  67.416% { d: path("M56,40L56,144"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  86.517% { d: path("M56,40L56,112"); }
  100% { d: path("M56,40L56,112"); }
}
@keyframes lg-fd-l-lo {
  0% { d: path("M56,168L56,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  19.101% { d: path("M56,120L56,216"); }
  33.708% { d: path("M56,120L56,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  52.809% { d: path("M56,200L56,216"); }
  67.416% { d: path("M56,200L56,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  86.517% { d: path("M56,168L56,216"); }
  100% { d: path("M56,168L56,216"); }
}
@keyframes lg-fd-m-knob {
  0% { transform: translateY(0px); }
  6.742% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  25.843% { transform: translateY(80px); }
  40.449% { transform: translateY(80px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  59.551% { transform: translateY(48px); }
  74.157% { transform: translateY(48px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  93.258% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}
@keyframes lg-fd-m-up {
  0% { d: path("M128,40L128,64"); }
  6.742% { d: path("M128,40L128,64"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  25.843% { d: path("M128,40L128,144"); }
  40.449% { d: path("M128,40L128,144"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  59.551% { d: path("M128,40L128,112"); }
  74.157% { d: path("M128,40L128,112"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  93.258% { d: path("M128,40L128,64"); }
  100% { d: path("M128,40L128,64"); }
}
@keyframes lg-fd-m-lo {
  0% { d: path("M128,120L128,216"); }
  6.742% { d: path("M128,120L128,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  25.843% { d: path("M128,200L128,216"); }
  40.449% { d: path("M128,200L128,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  59.551% { d: path("M128,168L128,216"); }
  74.157% { d: path("M128,168L128,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  93.258% { d: path("M128,120L128,216"); }
  100% { d: path("M128,120L128,216"); }
}
@keyframes lg-fd-r-knob {
  0% { transform: translateY(0px); }
  13.483% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  32.584% { transform: translateY(-32px); }
  47.191% { transform: translateY(-32px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  66.292% { transform: translateY(-80px); }
  80.899% { transform: translateY(-80px); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  100% { transform: translateY(0px); }
}
@keyframes lg-fd-r-up {
  0% { d: path("M200,40L200,144"); }
  13.483% { d: path("M200,40L200,144"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  32.584% { d: path("M200,40L200,112"); }
  47.191% { d: path("M200,40L200,112"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  66.292% { d: path("M200,40L200,64"); }
  80.899% { d: path("M200,40L200,64"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  100% { d: path("M200,40L200,144"); }
}
@keyframes lg-fd-r-lo {
  0% { d: path("M200,200L200,216"); }
  13.483% { d: path("M200,200L200,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  32.584% { d: path("M200,168L200,216"); }
  47.191% { d: path("M200,168L200,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  66.292% { d: path("M200,120L200,216"); }
  80.899% { d: path("M200,120L200,216"); animation-timing-function: cubic-bezier(0.25,0.7,0.2,1); }
  100% { d: path("M200,200L200,216"); }
}

/* ── Gauge ── */
.lgn-needle { transform-box: view-box; transform-origin: 128px 192px; }
@keyframes lg-needle {
  0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.4,0,0.3,1); }
  15%  { transform: rotate(-56deg); }
  23%  { transform: rotate(-56deg); animation-timing-function: cubic-bezier(0.45,0,0.25,1); }
  52%  { transform: rotate(52deg); animation-timing-function: cubic-bezier(0.4,0,0.4,1); }
  68%  { transform: rotate(-24deg); animation-timing-function: cubic-bezier(0.4,0,0.4,1); }
  81%  { transform: rotate(11deg); animation-timing-function: cubic-bezier(0.4,0,0.4,1); }
  91%  { transform: rotate(-4deg); animation-timing-function: cubic-bezier(0.33,1,0.68,1); }
  100% { transform: rotate(0deg); }
}

/* ── Bar Chart ── */
.lgb { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes lg-bar {
  0%   { transform: scaleY(1); animation-timing-function: cubic-bezier(0.6,0,1,1); }
  26%  { transform: scaleY(0.08); animation-timing-function: cubic-bezier(0.22,1,0.36,1); }
  100% { transform: scaleY(1); }
}

/* ── Gear ── */
.lg-gear .gr-turn { transform-box: view-box; transform-origin: 128px 128px; }
@keyframes lg-gear-turn {
    0.00% { transform: rotate(0deg);        animation-timing-function: cubic-bezier(0.19,1,0.22,1); }
    4.11% { transform: rotate(-3.274deg);   animation-timing-function: cubic-bezier(0.5,0,0.35,1); }
   19.26% { transform: rotate(64.911deg);   animation-timing-function: cubic-bezier(0.36,0,0.64,1); }
   24.14% { transform: rotate(59.018deg);   animation-timing-function: cubic-bezier(0.36,0,0.64,1); }
   27.66% { transform: rotate(60deg);       animation-timing-function: linear; }
   36.17% { transform: rotate(60deg);       animation-timing-function: cubic-bezier(0.19,1,0.22,1); }
   40.27% { transform: rotate(56.726deg);   animation-timing-function: cubic-bezier(0.5,0,0.35,1); }
   55.43% { transform: rotate(124.911deg);  animation-timing-function: cubic-bezier(0.36,0,0.64,1); }
   60.31% { transform: rotate(119.018deg);  animation-timing-function: cubic-bezier(0.36,0,0.64,1); }
   63.83% { transform: rotate(120deg);      animation-timing-function: linear; }
   72.34% { transform: rotate(120deg);      animation-timing-function: cubic-bezier(0.19,1,0.22,1); }
   76.44% { transform: rotate(116.726deg);  animation-timing-function: cubic-bezier(0.5,0,0.35,1); }
   91.59% { transform: rotate(184.911deg);  animation-timing-function: cubic-bezier(0.36,0,0.64,1); }
   96.48% { transform: rotate(179.018deg);  animation-timing-function: cubic-bezier(0.36,0,0.64,1); }
  100.00% { transform: rotate(180deg); }
}

/* ── Waveform ── */
.lgv { transform-box: view-box; transform-origin: 128px 128px; }
@keyframes lg-vec1 {
  0% { transform: scaleY(1); } 16% { transform: scaleY(1.8); } 34% { transform: scaleY(0.45); }
  54% { transform: scaleY(1.55); } 74% { transform: scaleY(0.75); } 88% { transform: scaleY(1.12); }
  100% { transform: scaleY(1); }
}
@keyframes lg-vec2 {
  0% { transform: scaleY(1); } 16% { transform: scaleY(0.5); } 34% { transform: scaleY(1.1); }
  54% { transform: scaleY(0.42); } 74% { transform: scaleY(1.06); } 88% { transform: scaleY(0.82); }
  100% { transform: scaleY(1); }
}
@keyframes lg-vec3 {
  0% { transform: scaleY(1); } 16% { transform: scaleY(1.35); } 34% { transform: scaleY(0.6); }
  54% { transform: scaleY(1.4); } 74% { transform: scaleY(0.5); } 88% { transform: scaleY(1.15); }
  100% { transform: scaleY(1); }
}
@keyframes lg-vec4 {
  0% { transform: scaleY(1); } 16% { transform: scaleY(0.6); } 34% { transform: scaleY(1.9); }
  54% { transform: scaleY(0.8); } 74% { transform: scaleY(1.6); } 88% { transform: scaleY(0.7); }
  100% { transform: scaleY(1); }
}
@keyframes lg-vec5 {
  0% { transform: scaleY(1); } 16% { transform: scaleY(1.5); } 34% { transform: scaleY(0.75); }
  54% { transform: scaleY(1.2); } 74% { transform: scaleY(0.45); } 88% { transform: scaleY(1.3); }
  100% { transform: scaleY(1); }
}

/* ── Rocket ── */
.rk-clip { display: flex; overflow: hidden; }
@keyframes lg-rocket {
  0%     { transform: translate(0,0);        animation-timing-function: cubic-bezier(0.5,0,0.9,0.35); }
  34%    { transform: translate(34px,-42px); }
  34.01% { transform: translate(-34px,42px); animation-timing-function: cubic-bezier(0.18,0.9,0.28,1); }
  100%   { transform: translate(0,0); }
}

/* Rigid tools return to their grip; scan and clink accents return to rest. */
.ax-tool { transform-box: view-box; transform-origin: 24px 200px; transform: rotate(0deg); }
.ax-impact { opacity: 0; transform: translateY(0px); }
@keyframes lg-axe-chop {
  0%,100% { transform: rotate(0deg); }
  24% { transform: rotate(-12deg); animation-timing-function: cubic-bezier(0.55,0,0.85,0.4); }
  46%,54% { transform: rotate(8deg); }
  68% { transform: rotate(5deg); }
}
@keyframes lg-axe-impact {
  0%,43%,100% { opacity: 0; transform: translateY(0px); }
  47% { opacity: 1; transform: translateY(0px); }
  72% { opacity: 0; transform: translateY(16px); }
}
.bc-scan { opacity: 0; transform: translateY(0px); }
@keyframes lg-barcode-scan {
  0%,100% { opacity: 0; transform: translateY(0px); }
  12% { opacity: 1; transform: translateY(0px); }
  78% { opacity: 1; transform: translateY(96px); }
  90% { opacity: 0; transform: translateY(96px); }
}
.bt-bottle { transform-box: view-box; transform-origin: 128px 128px; transform: rotate(0deg); }
.bt-drop { opacity: 0; transform: translateY(0px); }
@keyframes lg-bottle-pour {
  0%,100% { transform: rotate(0deg); }
  34%,66% { transform: rotate(45deg); }
}
@keyframes lg-bottle-drop {
  0%,36% { opacity: 0; transform: translateY(0px); }
  42% { opacity: 1; transform: translateY(8px); }
  64% { opacity: 0; transform: translateY(56px); }
  100% { opacity: 0; transform: translateY(56px); }
}
.ch-rays { transform-box: view-box; transform-origin: 128px 88px; transform: scale(1); opacity: 1; }
@keyframes lg-cheers-ring {
  0%,100% { transform: scale(1); opacity: 1; }
  20% { transform: scale(0.92); opacity: 0.45; }
  42% { transform: scale(1.14); opacity: 1; }
  70% { transform: scale(1.04); opacity: 0.8; }
}
@media (prefers-reduced-motion: no-preference) {
  .icon-gesture[data-go] .lg-axe .ax-tool { animation: lg-axe-chop 0.94s cubic-bezier(0.215,0.61,0.355,1) both; }
  .icon-gesture[data-go] .lg-axe .ax-impact { animation: lg-axe-impact 0.94s ease-out both; }
  .icon-gesture[data-go] .lg-barcode .bc-scan { animation: lg-barcode-scan 0.86s cubic-bezier(0.645,0.045,0.355,1) both; }
  .icon-gesture[data-go] .lg-bottle .bt-bottle { animation: lg-bottle-pour 1.1s cubic-bezier(0.645,0.045,0.355,1) both; }
  .icon-gesture[data-go] .lg-bottle .bt-drop { animation: lg-bottle-drop 1.1s cubic-bezier(0.45,0,0.9,0.35) both; }
  .icon-gesture[data-go] .lg-bottle .bt-drop:nth-of-type(2) { animation-delay: 0.12s; }
  .icon-gesture[data-go] .lg-bottle .bt-drop:nth-of-type(3) { animation-delay: 0.24s; }
  .icon-gesture[data-go] .lg-cheers .ch-rays { animation: lg-cheers-ring 0.86s cubic-bezier(0.215,0.61,0.355,1) both; }
}

/* ── triggers (all icons) ── */
@media (prefers-reduced-motion: no-preference) {
  /* Aperture */
  /* Aperture — all six blades move as one iris (no stagger) */
  .icon-gesture[data-go] .lg-aperture .ap-blade { animation: lg-aperture-iris 0.6s both; }
  /* Pie */
  .icon-gesture[data-go] .lg-pie .pi-fan   { animation: lg-pie-fan   1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pie .pi-rim   { animation: lg-pie-rim   1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pie .pi-e1    { animation: lg-pie-edge  1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pie .pi-slice { animation: lg-pie-out   1.2s 0s both; }
  .icon-gesture[data-go] .lg-pie .pi-orbit { animation: lg-pie-orbit 1.2s 0s both; }
  /* Pulse */
  .icon-gesture[data-go] .lg-pulse .pu-wire { animation: lg-pulse-draw 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-f0   { animation: lg-pulse-f0 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-f1   { animation: lg-pulse-f1 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-f2   { animation: lg-pulse-f2 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-f3   { animation: lg-pulse-f3 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-f4   { animation: lg-pulse-f4 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-f5   { animation: lg-pulse-f5 1.2s linear 0s both; }
  .icon-gesture[data-go] .lg-pulse .pu-dot  { animation: lg-pulse-head 1.2s linear 0s both, lg-pulse-lit 1.2s 0s both; }
  /* Line Up */
  .icon-gesture[data-go] .lg-trendline .lu-trend { animation: lg-trend-line  0.86s 0s both; }
  .icon-gesture[data-go] .lg-trendline .lu-arrow { animation: lg-trend-arrow 0.86s 0s both; }
  /* Faders */
  .icon-gesture[data-go] .lg-faders .fd-l-knob { animation: lg-fd-l-knob 0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-l-up   { animation: lg-fd-l-up   0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-l-lo   { animation: lg-fd-l-lo   0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-m-knob { animation: lg-fd-m-knob 0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-m-up   { animation: lg-fd-m-up   0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-m-lo   { animation: lg-fd-m-lo   0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-r-knob { animation: lg-fd-r-knob 0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-r-up   { animation: lg-fd-r-up   0.89s 0s both; }
  .icon-gesture[data-go] .lg-faders .fd-r-lo   { animation: lg-fd-r-lo   0.89s 0s both; }
  /* Gauge */
  .icon-gesture[data-go] .lg-needle .lgn-needle { animation: lg-needle 0.94s 0s both; }
  /* Bar Chart */
  .icon-gesture[data-go] .lg-redraw .lgb { animation: lg-bar 0.62s 0s both; }
  .icon-gesture[data-go] .lg-redraw .lgb:nth-of-type(3) { animation-delay: 0.06s; }
  .icon-gesture[data-go] .lg-redraw .lgb:nth-of-type(4) { animation-delay: 0.12s; }
  /* Gear */
  .icon-gesture[data-go] .lg-gear .gr-turn { animation: lg-gear-turn 1.02s 0s both; }
  /* Waveform */
  .icon-gesture[data-go] .lg-vector .lgv1 { animation: lg-vec1 0.86s 0s both; }
  .icon-gesture[data-go] .lg-vector .lgv2 { animation: lg-vec2 0.86s 0s both; }
  .icon-gesture[data-go] .lg-vector .lgv3 { animation: lg-vec3 0.86s 0s both; }
  .icon-gesture[data-go] .lg-vector .lgv4 { animation: lg-vec4 0.86s 0s both; }
  .icon-gesture[data-go] .lg-vector .lgv5 { animation: lg-vec5 0.86s 0s both; }
  /* Rocket */
  .icon-gesture[data-go] .lg-thrust .rk-clip > svg { animation: lg-rocket 0.7s 0s both; }
}
@media (prefers-reduced-motion: reduce) {
  .icon-gesture[data-go] .lg-aperture .ap-blade { animation: none; }
}
`;

// ─── Aperture ────────────────────────────────────────────────────────────────
const BLADES = [
  "M190.23,65.78a88.18,88.18,0,0,1,11,13.48L167.55,119,139.63,40.78A87.34,87.34,0,0,1,190.23,65.78Z",
  "M65.77,65.78a87.34,87.34,0,0,1,56.66-25.59l17.51,49L58.3,74.32A88,88,0,0,1,65.77,65.78Z",
  "M46.65,161.54a88.41,88.41,0,0,1,2.53-72.62l51.21,9.35Z",
  "M65.77,190.22a88.18,88.18,0,0,1-11-13.48L88.45,137l27.92,78.18A87.34,87.34,0,0,1,65.77,190.22Z",
  "M190.23,190.22a87.34,87.34,0,0,1-56.66,25.59l-17.51-49,81.64,14.91A88,88,0,0,1,190.23,190.22Z",
  "M155.61,157.73l53.74-63.27a88.41,88.41,0,0,1-2.53,72.62Z",
];

function ApertureLive({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" strokeWidth="16" />
      {BLADES.map((d, i) => (
        <path
          key={i}
          className={`ap-blade ap-b${i + 1}`}
          d={d}
          fill="currentColor"
          style={{ transformBox: "view-box", transformOrigin: "50% 50%" }}
        />
      ))}
    </svg>
  );
}

// ─── Pie Slice ────────────────────────────────────────────────────────────────
function PieSliceLive({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="none" stroke="currentColor">
      <g className="pi-orbit">
        <path
          className="pi-fan"
          d="M128,128L128,32L160.777,37.769L189.614,54.382L211.047,79.842L222.499,111.09L222.594,144.371L211.32,175.684L190.033,201.266L161.291,218.043L128.547,223.998L95.738,218.417L66.806,201.969L45.229,176.631Z"
          fill="currentColor"
          stroke="none"
        />
        <circle className="pi-rim" cx="128" cy="128" r="96" strokeWidth="16" strokeLinecap="round" pathLength="1" strokeDasharray="0.665 0.335" strokeDashoffset="-0.75" />
        <path className="pi-bar" d="M128,128L128,32" strokeWidth="16" strokeLinecap="round" />
        <path className="pi-bar pi-e1" d="M128,128L45.229,176.631" strokeWidth="16" strokeLinecap="round" />
        <g className="pi-slice">
          <circle className="pi-srim" cx="128" cy="128" r="96" strokeWidth="16" strokeLinecap="round" pathLength="1" strokeDasharray="0.225 0.775" strokeDashoffset="-0.471" />
          <path className="pi-bar" d="M96,37.49L96,109.525" strokeWidth="16" strokeLinecap="round" />
          <path className="pi-bar" d="M96,109.525L33.616,145.542" strokeWidth="16" strokeLinecap="round" />
        </g>
      </g>
    </svg>
  );
}

// ─── Pulse ────────────────────────────────────────────────────────────────────
const PU_SCREEN = "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Z";
const TRACE = "M48,128L72,128L104,72L152,184L184,128L208,128";

function PulseLive({ size = 40 }: { size?: number }) {
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const msk = `puTrace-${uid}`;
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <mask id={msk} maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
        <rect width="256" height="256" fill="#fff" />
        <path className="pu-wire" d={TRACE} fill="none" stroke="#000" strokeWidth="16" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 0.42" />
        {[0, 1, 2, 3, 4, 5].map((k) => (
          <path key={k} className={`pu-f${k}`} d={TRACE} fill="none" stroke="#000" strokeWidth="16" strokeLinecap="butt" strokeLinejoin="round" pathLength="1" strokeDasharray="0.02 99" />
        ))}
        <circle className="pu-dot" cx="0" cy="0" r="12" fill="#000" />
      </mask>
      <path d={PU_SCREEN} mask={`url(#${msk})`} />
    </svg>
  );
}

// ─── Line Up ─────────────────────────────────────────────────────────────────
const LU_SCREEN = "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Z";
const AXES = "M56,72L56,184L200,184";
const TREND = "M56,168L104,120L128,144L192,80";
const ARM_H = "M192,80L144,80";
const ARM_V = "M192,80L192,128";
const KNOCK = { fill: "none", stroke: "#000", strokeWidth: 16, strokeLinecap: "round", strokeLinejoin: "round" } as const;

function LineUpLive({ size = 40 }: { size?: number }) {
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const msk = `luChart-${uid}`;
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <mask id={msk} maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
        <rect width="256" height="256" fill="#fff" />
        <path d={AXES} {...KNOCK} />
        <path className="lu-trend" d={TREND} {...KNOCK} pathLength="1" strokeDasharray="1.04 3" />
        <path className="lu-arrow" d={ARM_H} {...KNOCK} pathLength="1" strokeDasharray="1.04 3" />
        <path className="lu-arrow" d={ARM_V} {...KNOCK} pathLength="1" strokeDasharray="1.04 3" />
      </mask>
      <path d={LU_SCREEN} mask={`url(#${msk})`} />
    </svg>
  );
}

// ─── Faders ───────────────────────────────────────────────────────────────────
const KNOB = { rx: 8, width: 64, height: 32 } as const;
const RAIL = { fill: "none", strokeWidth: 16, strokeLinecap: "round" } as const;

function FadersLive({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" stroke="currentColor">
      <path className="fd-l-up" d="M56,40L56,112" {...RAIL} />
      <path className="fd-l-lo" d="M56,168L56,216" {...RAIL} />
      <rect className="fd-l-knob" x="24" y="112" {...KNOB} stroke="none" />
      <path className="fd-m-up" d="M128,40L128,64" {...RAIL} />
      <path className="fd-m-lo" d="M128,120L128,216" {...RAIL} />
      <rect className="fd-m-knob" x="96" y="64" {...KNOB} stroke="none" />
      <path className="fd-r-up" d="M200,40L200,144" {...RAIL} />
      <path className="fd-r-lo" d="M200,200L200,216" {...RAIL} />
      <rect className="fd-r-knob" x="168" y="144" {...KNOB} stroke="none" />
    </svg>
  );
}

// ─── Gauge ────────────────────────────────────────────────────────────────────
const GAUGE_DIAL =
  "M240,152v24a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V153.13c0-1.79,0-3.57.13-5.33a4,4,0,0,1,4-3.8H48a8,8,0,0,0,8-8.53A8.17,8.17,0,0,0,47.73,128H23.92a4,4,0,0,1-3.87-5c12-43.84,49.66-77.13,95.52-82.28a4,4,0,0,1,4.43,4V72a8,8,0,0,0,8.53,8A8.17,8.17,0,0,0,136,71.73V44.67a4,4,0,0,1,4.43-4A112.18,112.18,0,0,1,236.23,123a4,4,0,0,1-3.88,5H208.27a8.17,8.17,0,0,0-8.25,7.47,8,8,0,0,0,8,8.53h27.92a4,4,0,0,1,4,3.86C240,149.23,240,150.61,240,152Z";

function GaugeLive({ size = 40 }: { size?: number }) {
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const msk = `lgGaugeMask-${uid}`;
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <mask id={msk} maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
        <rect width="256" height="256" fill="#fff" />
        <rect className="lgn-needle" x="120" y="88" width="16" height="152" rx="8" fill="#000" />
      </mask>
      <path d={GAUGE_DIAL} mask={`url(#${msk})`} />
    </svg>
  );
}

// ─── Bar Chart ────────────────────────────────────────────────────────────────
function ChartBarLive({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <rect x="32" y="200" width="200" height="16" rx="8" />
      <rect className="lgb" x="40" y="128" width="40" height="80" rx="8" />
      <rect className="lgb" x="96" y="80" width="48" height="128" rx="8" />
      <rect className="lgb" x="160" y="32" width="56" height="176" rx="8" />
    </svg>
  );
}

// ─── Gear ─────────────────────────────────────────────────────────────────────
const GEAR =
  "M237.94,107.21a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z";

function GearLive({ size = 40 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <g className="gr-turn">
        <path d={GEAR} />
      </g>
    </svg>
  );
}

// ─── Waveform ─────────────────────────────────────────────────────────────────
const WAVE_BOX = "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Z";
const WAVE_BARS = [
  { x: 56, y: 96, h: 64 },
  { x: 88, y: 64, h: 128 },
  { x: 120, y: 80, h: 96 },
  { x: 152, y: 96, h: 64 },
  { x: 184, y: 88, h: 80 },
];

function WaveformLive({ size = 40 }: { size?: number }) {
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const msk = `lgVecMask-${uid}`;
  return (
    <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
      <mask id={msk} maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
        <rect width="256" height="256" fill="#fff" />
        {WAVE_BARS.map((b, i) => (
          <rect key={b.x} className={`lgv lgv${i + 1}`} x={b.x} y={b.y} width="16" height={b.h} rx="8" fill="#000" />
        ))}
      </mask>
      <path d={WAVE_BOX} mask={`url(#${msk})`} />
    </svg>
  );
}

// ─── Rocket ───────────────────────────────────────────────────────────────────
const ROCKET_FILL =
  "M101.85,191.14C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Zm122-144a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.4,27.07h0L88,108.7A8,8,0,0,1,76.67,97.39l26.56-26.57A4,4,0,0,0,100.41,64H74.35A15.9,15.9,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A16,16,0,0,0,192,181.65V155.59a4,4,0,0,0-6.83-2.82l-26.57,26.56a8,8,0,0,1-11.71-.42,8.2,8.2,0,0,1,.6-11.1l49.27-49.27h0C223.45,91.86,224.6,59.71,223.85,47.12Z";

function RocketLive({ size = 40 }: { size?: number }) {
  return (
    <span className="rk-clip">
      <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor">
        <path d={ROCKET_FILL} />
      </svg>
    </span>
  );
}

const AXE_PATH = "M255.15,97.72A16,16,0,0,0,242,86.94a136.46,136.46,0,0,1-51.65-18l10.31-10.3a25,25,0,0,0-35.32-35.32l-13.2,13.21c-2.33-2.8-3.81-4.84-4.41-5.69a16,16,0,0,0-24.41-2.15L84.68,67.36a16,16,0,0,0,2.14,24.4c.86.6,2.9,2.08,5.7,4.41L7.31,181.37a25,25,0,0,0,35.32,35.32l82.3-82.31a136.63,136.63,0,0,1,18,51.65,16,16,0,0,0,10.77,13.12,16.21,16.21,0,0,0,5.15.85,15.88,15.88,0,0,0,11.26-4.69l81.18-81.19A15.86,15.86,0,0,0,255.15,97.72ZM176.69,34.63a9,9,0,1,1,12.68,12.68L176.82,59.86A152.5,152.5,0,0,1,163.1,48.21ZM31.31,205.37a9,9,0,1,1-12.68-12.68l85.58-85.58a150.89,150.89,0,0,1,11.65,13.71ZM158.8,183.92C150,118.29,101.52,82.52,96,78.67L134.66,40c3.86,5.5,39.63,54,105.25,62.78Z";
const BARCODE_PATH = "M232,48V88a8,8,0,0,1-16,0V56H184a8,8,0,0,1,0-16h40A8,8,0,0,1,232,48ZM72,200H40V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16Zm152-40a8,8,0,0,0-8,8v32H184a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,224,160ZM32,96a8,8,0,0,0,8-8V56H72a8,8,0,0,0,0-16H32a8,8,0,0,0-8,8V88A8,8,0,0,0,32,96ZM80,80a8,8,0,0,0-8,8v80a8,8,0,0,0,16,0V88A8,8,0,0,0,80,80Zm104,88V88a8,8,0,0,0-16,0v80a8,8,0,0,0,16,0ZM144,80a8,8,0,0,0-8,8v80a8,8,0,0,0,16,0V88A8,8,0,0,0,144,80Zm-32,0a8,8,0,0,0-8,8v80a8,8,0,0,0,16,0V88A8,8,0,0,0,112,80Z";
const BOTTLE_PATH = "M245.66,42.34l-32-32a8,8,0,0,0-11.32,11.32l1.48,1.47L148.65,64.51l-38.22,7.65a8.05,8.05,0,0,0-4.09,2.18L23,157.66a24,24,0,0,0,0,33.94L64.4,233a24,24,0,0,0,33.94,0l83.32-83.31a8,8,0,0,0,2.18-4.09l7.65-38.22,41.38-55.17,1.47,1.48a8,8,0,0,0,11.32-11.32ZM96,107.31,148.69,160,104,204.69,51.31,152ZM81.37,224a7.94,7.94,0,0,1-5.65-2.34L34.34,180.28a8,8,0,0,1,0-11.31L40,163.31,92.69,216,87,221.66A8,8,0,0,1,81.37,224ZM177.6,99.2a7.92,7.92,0,0,0-1.44,3.23l-7.53,37.63L160,148.69,107.31,96l8.63-8.63,37.63-7.53a7.92,7.92,0,0,0,3.23-1.44l58.45-43.84,6.19,6.19Z";
const CHEERS_BODY = "M213.93,213.94l-17.65,4.73-10.42-38.89a40.06,40.06,0,0,0,20.77-46.14c-12.6-47-38.78-88.22-39.89-89.95a8,8,0,0,0-8.68-3.45L136.2,45.71c0-8.25-.18-13.43-.21-14.08a8,8,0,0,0-6.05-7.39l-32-8a8,8,0,0,0-8.68,3.45c-1.11,1.73-27.29,42.93-39.89,90a40.06,40.06,0,0,0,20.77,46.14L59.72,194.67l-17.65-4.73a8,8,0,0,0-4.14,15.46l48,12.86a8.23,8.23,0,0,0,2.07.27,8,8,0,0,0,2.07-15.73l-14.9-4,10.42-38.89c.81.05,1.61.08,2.41.08a40.12,40.12,0,0,0,37-24.88c1.18,6.37,2.6,12.82,4.31,19.22A40.08,40.08,0,0,0,168,184c.8,0,1.6,0,2.41-.08l10.42,38.89-14.9,4A8,8,0,0,0,168,242.53a8.23,8.23,0,0,0,2.07-.27l48-12.86a8,8,0,0,0-4.14-15.46ZM156.22,57.19c2.78,4.7,7.23,12.54,12.2,22.46L136,87.77c-.42-10-.38-18.25-.25-23.79,0-.56.05-1.12.08-1.68Zm-56.44-24,20.37,5.09c.06,4.28,0,10.67-.21,18.47-.06,1.21-.16,3.19-.23,5.84,0,1-.1,2-.16,3L86.69,57.43C92,46.67,96.84,38.16,99.78,33.19Zm11.39,93.09a24,24,0,0,1-46.34-12.5,291.26,291.26,0,0,1,15-41.59l38.58,9.64A314,314,0,0,1,111.17,126.28Zm33.64,23.92A274,274,0,0,1,137,104l38.41-9.6a293.06,293.06,0,0,1,15.75,43.39,24,24,0,1,1-46.36,12.42Z";
// Absolute moves preserve the source's relative subpaths after separating its ringing marks.
const CHEERS_RAYS = "M184.81,43.58a8,8,0,0,1,3.58-10.74l16-8a8,8,0,1,1,7.16,14.32l-16,8a8,8,0,0,1-10.74-3.58ZM232,72a8,8,0,0,1-8,8H208a8,8,0,0,1,0-16h16A8,8,0,0,1,232,72ZM32.84,20.42a8,8,0,0,1,10.74-3.58l16,8a8,8,0,0,1-7.16,14.32l-16-8A8,8,0,0,1,32.84,20.42ZM40,72H24a8,8,0,0,1,0-16H40a8,8,0,0,1,0,16Z";

function AxeLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" style={{ overflow: "visible" }}>
    <g className="ax-tool"><path d={AXE_PATH} /></g>
    <path className="ax-impact" d="M140,222l-8,12M164,226v14M188,222l8,12" fill="none" stroke="currentColor" strokeWidth={8} strokeLinecap="round" />
  </svg>;
}

function BarcodeLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
    <path d={BARCODE_PATH} />
    <rect className="bc-scan" x={56} y={76} width={144} height={8} rx={4} />
  </svg>;
}

function BottleLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" style={{ overflow: "visible" }}>
    <g className="bt-bottle"><path d={BOTTLE_PATH} /></g>
    {/* The 45-degree pour places the mouth (224,32) at (263.76,128). */}
    <path className="bt-drop" d="M264,130C261,136,258,140,258,143a6,6,0,0,0,12,0C270,140,267,136,264,130Z" />
  </svg>;
}

function CheersLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" style={{ overflow: "visible" }}>
    <path d={CHEERS_BODY} />
    <g className="ch-rays"><path d={CHEERS_RAYS} /></g>
  </svg>;
}

function DetectiveLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" style={{ overflow: "visible" }}>
    <g className="dt-hat"><path d="M248,112H220.08l-47.5-65.41a16,16,0,0,0-25.31-.72l-12.85,14.9-.2.23a7.95,7.95,0,0,1-12.44,0l-.2-.23-12.85-14.9a16,16,0,0,0-25.31.72L35.92,112H8a8,8,0,0,0,0,16H248a8,8,0,0,0,0-16ZM96.34,56l.19.23,12.85,14.89a24,24,0,0,0,37.24,0l12.85-14.89c.06-.08.1-.15.17-.23l40.66,56H55.69Z" /></g>
    <path d="M180,144a36,36,0,0,0-35.77,32H111.77a36,36,0,1,0-1.83,16h36.12A36,36,0,1,0,180,144ZM76,200a20,20,0,1,1,20-20A20,20,0,0,1,76,200Zm104,0a20,20,0,1,1,20-20A20,20,0,0,1,180,200Z" />
  </svg>;
}

function ChargingStationLive({ size = 40 }: { size?: number }) {
  const currentMask = useId();
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
    <defs>
      <mask id={currentMask} maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256" style={{ maskType: "luminance" }}>
        <rect width="256" height="256" fill="white" />
        <path className="cs-current" d="M176,112H192a16,16,0,0,1,16,16v40a16,16,0,0,0,32,0V86.63a16,16,0,0,0-4.68-11.31L216,56" pathLength="1" fill="none" stroke="black" strokeWidth="18" />
      </mask>
    </defs>
    <g className="cs-bolt"><path d="M134.62,123.51a8,8,0,0,1,.81,7.46l-16,40A8,8,0,0,1,104.57,165l11.61-29H96a8,8,0,0,1-7.43-11l16-40A8,8,0,1,1,119.43,91l-11.61,29H128A8,8,0,0,1,134.62,123.51Z" /></g>
    <path mask={`url(#${currentMask})`} d="M248,86.63V168a24,24,0,0,1-48,0V128a8,8,0,0,0-8-8H176v88h16a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H48V56A24,24,0,0,1,72,32h80a24,24,0,0,1,24,24v48h16a24,24,0,0,1,24,24v40a8,8,0,0,0,16,0V86.63A8,8,0,0,0,229.66,81L210.34,61.66a8,8,0,0,1,11.32-11.32L241,69.66A23.85,23.85,0,0,1,248,86.63ZM160,208V56a8,8,0,0,0-8-8H72a8,8,0,0,0-8,8V208Z" />
  </svg>;
}

const DRONE_ROTORS = [
  { x: 180, y: 76, d: "M138.51,61.33a44,44,0,1,1,56.16,56.16A7.86,7.86,0,0,1,192,118a8,8,0,0,1-2.67-15.54,28,28,0,1,0-35.74-35.74,8,8,0,1,1-15.08-5.34Z" },
  { x: 180, y: 180, d: "M224,180a44,44,0,0,1-85.49,14.67,8,8,0,0,1,15.08-5.34,28,28,0,1,0,35.74-35.74,8,8,0,0,1,5.34-15.08A44.07,44.07,0,0,1,224,180Z" },
  { x: 76, y: 180, d: "M117.49,194.67a44,44,0,1,1-56.16-56.16,8,8,0,0,1,5.34,15.08,28,28,0,1,0,35.74,35.74,8,8,0,0,1,15.08,5.34Z" },
  { x: 76, y: 76, d: "M32,76a44,44,0,0,1,85.49-14.67,8,8,0,1,1-15.08,5.34,28,28,0,1,0-35.74,35.74A8,8,0,0,1,64,118a7.86,7.86,0,0,1-2.67-.46A44.07,44.07,0,0,1,32,76Z" },
];

function DroneLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
    <path d="M189.66,66.34a8,8,0,0,0-11.32,0L148.69,96H107.31L77.66,66.34A8,8,0,0,0,66.34,77.66L96,107.31v41.38L66.34,178.34a8,8,0,0,0,11.32,11.32L107.31,160h41.38l29.65,29.66a8,8,0,0,0,11.32-11.32L160,148.69V107.31l29.66-29.65A8,8,0,0,0,189.66,66.34ZM112,112h32v32H112Z" />
    {DRONE_ROTORS.map(({ x, y, d }, i) => <g key={i} className={`dr-rotor${i % 2 ? " dr-counter" : ""}`} style={{ transformOrigin: `${x}px ${y}px` }}><path d={d} /></g>)}
  </svg>;
}

function EggCrackLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
    <path className="eg-rest" d="M186.66,59.56C168.47,32.29,146.54,16,128,16S87.53,32.29,69.34,59.56C50.7,87.54,40,121.23,40,152a88,88,0,0,0,176,0C216,121.23,205.3,87.54,186.66,59.56ZM128,224a72.08,72.08,0,0,1-72-72c0-27.69,9.72-58.15,26.66-83.56C97.19,46.64,115.41,32,128,32c9.5,0,22.2,8.33,34.1,21.78L122,98.67a8,8,0,0,0,4,13.09l24.6,6.15-6.5,32.52a8,8,0,0,0,6.27,9.41A7.77,7.77,0,0,0,152,160a8,8,0,0,0,7.83-6.43l8-40a8,8,0,0,0-5.9-9.33l-19.16-4.79L172.1,66.6c.42.61.83,1.22,1.24,1.84C190.28,93.85,200,124.31,200,152A72.08,72.08,0,0,1,128,224Z" />
    {/* The two shell contours meet at the crack mouth and the bottom of the egg. */}
    <path className="eg-shell eg-left" d="M186.66,59.56C168.47,32.29,146.54,16,128,16S87.53,32.29,69.34,59.56C50.7,87.54,40,121.23,40,152a88,88,0,0,0,88,88V224a72.08,72.08,0,0,1-72-72c0-27.69,9.72-58.15,26.66-83.56C97.19,46.64,115.41,32,128,32c9.5,0,22.2,8.33,34.1,21.78L122,98.67a8,8,0,0,0,4,13.09l24.6,6.15-6.5,32.52a8,8,0,0,0,6.27,9.41A7.77,7.77,0,0,0,152,160a8,8,0,0,0,7.83-6.43l8-40a8,8,0,0,0-5.9-9.33l-19.16-4.79L172.1,66.6Z" />
    <path className="eg-shell eg-right" d="M186.66,59.56C205.3,87.54,216,121.23,216,152a88,88,0,0,1-88,88V224a72.08,72.08,0,0,0,72-72C200,124.31,190.28,93.85,173.34,68.44c-.41-.62-.82-1.23-1.24-1.84Z" />
  </svg>;
}

// The source bars are 64 x 16 capsules on a 32-unit vertical pitch.
function EqualizerLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
    {[4, 3, 5].map((count, column) => <g key={column}>
      {Array.from({ length: count }, (_, row) => <rect
        key={row}
        className={row === 0 ? undefined : "eq-segment"}
        x={16 + column * 80} y={184 - row * 32} width={64} height={16} rx={8}
        style={{ animationDelay: `${column * 0.08 + (count - row - 1) * 0.06}s` }}
      />)}
    </g>)}
  </svg>;
}

const FINGERPRINT_RIDGES = [
  "M72,128a134.63,134.63,0,0,1-14.16,60.47,8,8,0,1,1-14.32-7.12A118.8,118.8,0,0,0,56,128,71.73,71.73,0,0,1,83,71.8,8,8,0,1,1,93,84.29,55.76,55.76,0,0,0,72,128Z",
  "M128,120a8,8,0,0,0-8,8,184.12,184.12,0,0,1-23,89.1,8,8,0,0,0,14,7.76A200.19,200.19,0,0,0,136,128,8,8,0,0,0,128,120Z",
  "M128,88a40,40,0,0,0-40,40,8,8,0,0,0,16,0,24,24,0,0,1,48,0,214.09,214.09,0,0,1-20.51,92A8,8,0,1,0,146,226.83,230,230,0,0,0,168,128,40,40,0,0,0,128,88Z",
  "M128,24A104.11,104.11,0,0,0,24,128a87.76,87.76,0,0,1-5,29.33,8,8,0,0,0,15.09,5.33A103.9,103.9,0,0,0,40,128a88,88,0,0,1,176,0,282.24,282.24,0,0,1-5.29,54.45,8,8,0,0,0,6.3,9.4,8.22,8.22,0,0,0,1.55.15,8,8,0,0,0,7.84-6.45A298.37,298.37,0,0,0,232,128,104.12,104.12,0,0,0,128,24Z",
  "M94.4,152.17A8,8,0,0,0,85,158.42a151,151,0,0,1-17.21,45.44,8,8,0,0,0,13.86,8,166.67,166.67,0,0,0,19-50.25A8,8,0,0,0,94.4,152.17Z",
  "M128,56a72.85,72.85,0,0,0-9,.56,8,8,0,0,0,2,15.87A56.08,56.08,0,0,1,184,128a252.12,252.12,0,0,1-1.92,31A8,8,0,0,0,189,168a8.39,8.39,0,0,0,1,.06,8,8,0,0,0,7.92-7,266.48,266.48,0,0,0,2-33A72.08,72.08,0,0,0,128,56Z",
  "M185.93,184.25a8,8,0,0,0-9.75,5.75c-1.46,5.69-3.15,11.4-5,17a8,8,0,0,0,5,10.13,7.88,7.88,0,0,0,2.55.42,8,8,0,0,0,7.58-5.46c2-5.92,3.79-12,5.35-18.05A8,8,0,0,0,185.94,184.26Z",
];

function FingerprintLive({ size = 40 }: { size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
    {FINGERPRINT_RIDGES.map((d, i) => <path key={i} d={d} className="fp-ridge" style={{ animationDelay: `${[2, 0, 1, 4, 2, 3, 3][i] * 0.07}s` }} />)}
  </svg>;
}

// ─── gesture wrapper ──────────────────────────────────────────────────────────
function GestureIcon({ children, gestureClass }: { children: React.ReactNode; gestureClass: string }) {
  const ref = useIconGesture<HTMLButtonElement>();
  return (
    <button
      type="button"
      aria-label={`Animate ${gestureClass.slice(3).replaceAll("-", " ")}`}
      ref={ref}
      className="icon-gesture inline-flex size-16 shrink-0 cursor-pointer items-center justify-center rounded-2xl border-0 bg-transparent p-3 transition-colors duration-150 ease hover:bg-muted/80 active:bg-muted motion-reduce:transition-none"
    >
      <span className={gestureClass} style={{ display: "inline-flex" }}>
        {children}
      </span>
    </button>
  );
}

// ─── icon cell ────────────────────────────────────────────────────────────────
function IconCell({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col items-center gap-2">
      {children}
      <span className="w-full text-center text-[10px] tracking-wide text-muted-foreground/40">
        {label.charAt(0).toUpperCase() + label.slice(1)}
      </span>
    </div>
  );
}

// Temporarily hide the first ten (original set) from the grid.
const HIDE_FIRST_TEN = true;

// ─── main export ──────────────────────────────────────────────────────────────
export default function AnimatedIcons() {
  return (
    <div className="flex size-full flex-col items-center justify-center gap-6 p-6">
      <style dangerouslySetInnerHTML={{ __html: ALL_CSS }} />
      <div className="grid grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-5 sm:gap-x-8">
        {!HIDE_FIRST_TEN && (
          <>
        <IconCell label="aperture">
          <GestureIcon gestureClass="lg-aperture">
            <ApertureLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="pie">
          <GestureIcon gestureClass="lg-pie">
            <PieSliceLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="pulse">
          <GestureIcon gestureClass="lg-pulse">
            <PulseLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="line up">
          <GestureIcon gestureClass="lg-trendline">
            <LineUpLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="faders">
          <GestureIcon gestureClass="lg-faders">
            <FadersLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="gauge">
          <GestureIcon gestureClass="lg-needle">
            <GaugeLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="bar chart">
          <GestureIcon gestureClass="lg-redraw">
            <ChartBarLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="gear">
          <GestureIcon gestureClass="lg-gear">
            <GearLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="waveform">
          <GestureIcon gestureClass="lg-vector">
            <WaveformLive size={40} />
          </GestureIcon>
        </IconCell>
        <IconCell label="rocket">
          <GestureIcon gestureClass="lg-thrust">
            <RocketLive size={40} />
          </GestureIcon>
        </IconCell>
          </>
        )}
        <IconCell label="axe">
          <GestureIcon gestureClass="lg-axe"><AxeLive /></GestureIcon>
        </IconCell>
        <IconCell label="barcode">
          <GestureIcon gestureClass="lg-barcode"><BarcodeLive /></GestureIcon>
        </IconCell>
        <IconCell label="bottle">
          <GestureIcon gestureClass="lg-bottle"><BottleLive /></GestureIcon>
        </IconCell>
        <IconCell label="cheers">
          <GestureIcon gestureClass="lg-cheers"><CheersLive /></GestureIcon>
        </IconCell>
        <IconCell label="detective">
          <GestureIcon gestureClass="lg-detective"><DetectiveLive /></GestureIcon>
        </IconCell>
        <IconCell label="charging station">
          <GestureIcon gestureClass="lg-charging-station"><ChargingStationLive /></GestureIcon>
        </IconCell>
        <IconCell label="drone">
          <GestureIcon gestureClass="lg-drone"><DroneLive /></GestureIcon>
        </IconCell>
        <IconCell label="egg crack">
          <GestureIcon gestureClass="lg-egg"><EggCrackLive /></GestureIcon>
        </IconCell>
        <IconCell label="equalizer">
          <GestureIcon gestureClass="lg-equalizer"><EqualizerLive /></GestureIcon>
        </IconCell>
        <IconCell label="fingerprint">
          <GestureIcon gestureClass="lg-fingerprint"><FingerprintLive /></GestureIcon>
        </IconCell>
      </div>
      <p className="text-[11px] tracking-wide text-muted-foreground/35">hover to animate</p>
    </div>
  );
}

export { ApertureLive };
Animated Icons
