"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 (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 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("pointerover", over);
    el.addEventListener("pointerout", out);
    return () => {
      el.removeEventListener("pointerover", over);
      el.removeEventListener("pointerout", out);
      if (timer !== undefined) clearTimeout(timer);
    };
  }, [enabled]);
  return ref;
}

// ─── combined CSS for all 9 CSS-keyframe icons ───────────────────────────────
const ALL_CSS = `
/* ── Aperture ── */
.ap-blade { transform-box: view-box; transform-origin: 50% 50%; }
@keyframes lg-aperture {
  0%   { transform: scale(1); animation-timing-function: cubic-bezier(0.4,0,1,1); }
  45%  { transform: scale(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
  100% { transform: scale(1); }
}

/* ── 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); }
}

/* ── triggers (all icons) ── */
@media (hover: hover) and (pointer: fine) {
  /* Aperture */
  .icon-gesture[data-go] .lg-aperture .ap-b1 { animation: lg-aperture 0.75s 0s both; }
  .icon-gesture[data-go] .lg-aperture .ap-b2 { animation: lg-aperture 0.75s 0.065s both; }
  .icon-gesture[data-go] .lg-aperture .ap-b3 { animation: lg-aperture 0.75s 0.13s both; }
  .icon-gesture[data-go] .lg-aperture .ap-b4 { animation: lg-aperture 0.75s 0.195s both; }
  .icon-gesture[data-go] .lg-aperture .ap-b5 { animation: lg-aperture 0.75s 0.26s both; }
  .icon-gesture[data-go] .lg-aperture .ap-b6 { animation: lg-aperture 0.75s 0.325s 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; }
}
`;

// ─── 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>
  );
}

// ─── gesture wrapper ──────────────────────────────────────────────────────────
function GestureIcon({ children, gestureClass }: { children: React.ReactNode; gestureClass: string }) {
  const ref = useIconGesture<HTMLSpanElement>();
  return (
    <span ref={ref} className="icon-gesture" style={{ display: "inline-flex" }}>
      <span className={gestureClass} style={{ display: "inline-flex" }}>
        {children}
      </span>
    </span>
  );
}

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

// ─── 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-5 gap-x-8 gap-y-6">
        <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>
      </div>
      <p className="text-[11px] tracking-wide text-muted-foreground/35">hover to animate</p>
    </div>
  );
}

export { ApertureLive };
Animated Icons
