Copy the shared runtime once, then paste loader source.

"use client";

import type { CSSProperties } from "react";

import "@/components/cellforge-loader.css";
import { useCellForgePhases, usePrefersReducedMotion } from "./cellforge-hooks";

export type MatrixPattern = "diamond" | "full" | "outline" | "rose" | "cross" | "rings";
export type DotShape = "circle" | "square" | "diamond" | "pill" | "triangle" | "hex" | "plus" | "star" | "hearts";
export type CellForgePhase = "idle" | "collapse" | "hoverRipple" | "loadingRipple";
export type CellForgeColorPreset =
  | "solid-theme"
  | "solid-mint"
  | "grad-sunset"
  | "grad-ocean"
  | "grad-neon"
  | "grad-aurora"
  | "grad-fire"
  | "grad-prism";

const DOT_MATRIX_COLOR_PRESETS: Record<
  CellForgeColorPreset,
  {
    fill: string;
    glow: string;
  }
> = {
  "solid-theme": {
    fill: "var(--color-dot-on)",
    glow: "var(--color-dot-on)"
  },
  "solid-mint": {
    fill: "#34d399",
    glow: "#34d399"
  },
  "grad-sunset": {
    fill: "linear-gradient(135deg, #ff5f6d 0%, #ffc371 52%, #ffe29a 100%)",
    glow: "#ff8b73"
  },
  "grad-ocean": {
    fill: "linear-gradient(140deg, #00c6ff 0%, #0072ff 48%, #4facfe 100%)",
    glow: "#2f8fff"
  },
  "grad-neon": {
    fill: "linear-gradient(145deg, #b4ff39 0%, #39ffb6 46%, #00d4ff 100%)",
    glow: "#59ffc8"
  },
  "grad-aurora": {
    fill: "linear-gradient(145deg, #ff3cac 0%, #784ba0 45%, #2b86c5 100%)",
    glow: "#9c64bf"
  },
  "grad-fire": {
    fill: "linear-gradient(145deg, #ff512f 0%, #dd2476 45%, #ffb347 100%)",
    glow: "#f96a5f"
  },
  "grad-prism": {
    fill: "linear-gradient(145deg, #12c2e9 0%, #c471ed 45%, #f64f59 100%)",
    glow: "#9e7de8"
  }
};

export function resolveDmxColorTokens(color: string, colorPreset?: CellForgeColorPreset): {
  resolvedColor: string;
  dotFill: string;
} {
  if (!colorPreset) {
    return { resolvedColor: color, dotFill: color };
  }

  const preset = DOT_MATRIX_COLOR_PRESETS[colorPreset];
  if (!preset) {
    return { resolvedColor: color, dotFill: color };
  }

  return { resolvedColor: preset.glow, dotFill: preset.fill };
}

export interface CellForgeCommonProps {
  size?: number;
  dotSize?: number;
  color?: string;
  colorPreset?: CellForgeColorPreset;
  speed?: number;
  ariaLabel?: string;
  className?: string;
  pattern?: MatrixPattern;
  muted?: boolean;
  /**
   * Adds a glow on dots from opacity 0.6 (weakest) through 1 (strongest), after remapping.
   */
  bloom?: boolean;
  /** Uniform glow on every active dot (0…1); slightly wider falloff than selective `bloom`. */
  halo?: number;
  animated?: boolean;
  hoverAnimated?: boolean;
  dotClassName?: string;
  dotShape?: DotShape;
  opacityBase?: number;
  opacityMid?: number;
  opacityPeak?: number;
  cellPadding?: number;
  boxSize?: number;
  minSize?: number;
}

export interface DotAnimationContext {
  index: number;
  row: number;
  col: number;
  distanceFromCenter: number;
  angleFromCenter: number;
  radiusNormalized: number;
  manhattanDistance: number;
  phase: CellForgePhase;
  isActive: boolean;
  reducedMotion: boolean;
}

export interface DotAnimationState {
  className?: string;
  style?: CSSProperties;
}

export type DotAnimationResolver = (ctx: DotAnimationContext) => DotAnimationState;

export function cx(...values: Array<string | undefined | null | false>): string {
  return values.filter(Boolean).join(" ");
}

export const MATRIX_SIZE = 5;
const CENTER = Math.floor(MATRIX_SIZE / 2);
const RANGE = Array.from({ length: MATRIX_SIZE }, (_, index) => index);
const MAX_RADIUS = Math.hypot(CENTER, CENTER);

export const FULL_INDEXES = RANGE.flatMap((row) => RANGE.map((col) => rowMajorIndex(row, col)));

export const DIAMOND_INDEXES = FULL_INDEXES.filter((index) => {
  const { row, col } = indexToCoord(index);
  return Math.abs(row - CENTER) + Math.abs(col - CENTER) <= 2;
});

export const OUTLINE_INDEXES = FULL_INDEXES.filter((index) => {
  const { row, col } = indexToCoord(index);
  return row === 0 || row === MATRIX_SIZE - 1 || col === 0 || col === MATRIX_SIZE - 1;
});

export const CROSS_INDEXES = FULL_INDEXES.filter((index) => {
  const { row, col } = indexToCoord(index);
  return row === CENTER || col === CENTER;
});

export const RINGS_INDEXES = FULL_INDEXES.filter((index) => {
  const { row, col } = indexToCoord(index);
  const radius = Math.hypot(row - CENTER, col - CENTER);
  return Math.round(radius) === 1 || Math.round(radius) === 2;
});

export const ROSE_INDEXES = FULL_INDEXES.filter((index) => {
  const { row, col } = indexToCoord(index);
  const dx = col - CENTER;
  const dy = row - CENTER;
  const angle = Math.atan2(dy, dx);
  const radius = Math.hypot(dx, dy);
  const rose = Math.abs(Math.sin(3 * angle));
  return rose > 0.6 && radius >= 1;
});

const PATTERN_INDEXES: Record<MatrixPattern, number[]> = {
  diamond: DIAMOND_INDEXES,
  full: FULL_INDEXES,
  outline: OUTLINE_INDEXES,
  rose: ROSE_INDEXES,
  cross: CROSS_INDEXES,
  rings: RINGS_INDEXES
};

export function getPatternIndexes(pattern: MatrixPattern = "diamond"): number[] {
  return PATTERN_INDEXES[pattern];
}

export function rowMajorIndex(row: number, col: number): number {
  return row * MATRIX_SIZE + col;
}

export function indexToCoord(index: number): { row: number; col: number } {
  return {
    row: Math.floor(index / MATRIX_SIZE),
    col: index % MATRIX_SIZE
  };
}

export function distanceFromCenter(index: number): number {
  const { row, col } = indexToCoord(index);
  return Math.hypot(row - CENTER, col - CENTER);
}

export function rowDistance(index: number): number {
  const { row } = indexToCoord(index);
  return Math.abs(row - CENTER);
}

export function polarAngle(index: number): number {
  const { row, col } = indexToCoord(index);
  return Math.atan2(row - CENTER, col - CENTER);
}

export function normalizedRadius(index: number): number {
  const { row, col } = indexToCoord(index);
  return Math.hypot(row - CENTER, col - CENTER) / MAX_RADIUS;
}

export function manhattanDistance(index: number): number {
  const { row, col } = indexToCoord(index);
  return Math.abs(row - CENTER) + Math.abs(col - CENTER);
}

export function harmonicPhase(row: number, col: number, a: number, b: number): number {
  return Math.sin((row + 1) * a + (col + 1) * b);
}

export function lissajousOffset(
  row: number,
  col: number,
  amplitude = 2.25
): { x: number; y: number; phase: number } {
  const x = Math.sin((row + 1) * 1.15 + (col + 1) * 2.2) * amplitude;
  const y = Math.cos((row + 1) * 2.45 + (col + 1) * 0.95) * amplitude;
  const phase = Math.abs(Math.sin((row + 1) * 0.7 + (col + 1) * 1.1));
  return { x, y, phase };
}

export function spiralOffset(
  angle: number,
  radiusNormalizedValue: number,
  amplitude = 2.8
): { x: number; y: number; phase: number } {
  const spin = angle + radiusNormalizedValue * Math.PI * 2.1;
  const radius = radiusNormalizedValue * amplitude;
  const x = Math.cos(spin) * radius;
  const y = Math.sin(spin) * radius;
  const phase = Math.abs(Math.sin(spin * 0.5));
  return { x, y, phase };
}

export function isPrime(value: number): boolean {
  if (value <= 1) {
    return false;
  }
  if (value === 2) {
    return true;
  }
  if (value % 2 === 0) {
    return false;
  }

  const limit = Math.floor(Math.sqrt(value));
  for (let divisor = 3; divisor <= limit; divisor += 2) {
    if (value % divisor === 0) {
      return false;
    }
  }

  return true;
}

const N = MATRIX_SIZE;
const C = Math.floor(MATRIX_SIZE / 2);
const CELLS = N * N;
const MAX_TRBL = (N - 1) * 2;

export function trBlPathNormFromIndex(index: number): number {
  const { row, col } = indexToCoord(index);
  return (row + (N - 1 - col)) / MAX_TRBL;
}

function buildSnakeOrderToIndexMap(): number[] {
  const pathOrder = new Array<number>(CELLS);
  const key = (row: number, col: number) => rowMajorIndex(row, col);
  let t = 0;
  for (let row = 0; row < N; row += 1) {
    if (row % 2 === 0) {
      for (let col = 0; col < N; col += 1) {
        pathOrder[key(row, col)] = t;
        t += 1;
      }
    } else {
      for (let col = N - 1; col >= 0; col -= 1) {
        pathOrder[key(row, col)] = t;
        t += 1;
      }
    }
  }
  return pathOrder;
}

const SNAKE_ORDER: readonly number[] = buildSnakeOrderToIndexMap();

export function snakePathNormFromIndex(index: number): number {
  return SNAKE_ORDER[index]! / (CELLS - 1);
}

export function snakePathOrderValue(index: number): number {
  return SNAKE_ORDER[index]!;
}

function buildSpiralInwardOrderToIndexMap(): number[] {
  const order = new Array<number>(CELLS);
  let top = 0;
  let bottom = N - 1;
  let left = 0;
  let right = N - 1;
  let t = 0;

  while (top <= bottom && left <= right) {
    for (let col = left; col <= right; col += 1) {
      order[rowMajorIndex(top, col)] = t;
      t += 1;
    }

    for (let row = top + 1; row <= bottom; row += 1) {
      order[rowMajorIndex(row, right)] = t;
      t += 1;
    }

    if (top < bottom) {
      for (let col = right - 1; col >= left; col -= 1) {
        order[rowMajorIndex(bottom, col)] = t;
        t += 1;
      }
    }

    if (left < right) {
      for (let row = bottom - 1; row > top; row -= 1) {
        order[rowMajorIndex(row, left)] = t;
        t += 1;
      }
    }

    top += 1;
    bottom -= 1;
    left += 1;
    right -= 1;
  }

  return order;
}

const SPIRAL_INWARD_ORDER: readonly number[] = buildSpiralInwardOrderToIndexMap();

export function spiralInwardNormFromIndex(index: number): number {
  return SPIRAL_INWARD_ORDER[index]! / (CELLS - 1);
}

export function spiralInwardOrderValue(index: number): number {
  return SPIRAL_INWARD_ORDER[index]!;
}

function buildOuterRingClockwiseOrderToIndexMap(): number[] {
  const order = new Array<number>(CELLS).fill(-1);
  const coords: Array<[number, number]> = [
    [0, 0],
    [0, 1],
    [0, 2],
    [0, 3],
    [0, 4],
    [1, 4],
    [2, 4],
    [3, 4],
    [4, 4],
    [4, 3],
    [4, 2],
    [4, 1],
    [4, 0],
    [3, 0],
    [2, 0],
    [1, 0]
  ];

  for (let t = 0; t < coords.length; t += 1) {
    const [row, col] = coords[t]!;
    order[rowMajorIndex(row, col)] = t;
  }

  return order;
}

function buildMiddleRingAntiClockwiseOrderToIndexMap(): number[] {
  const order = new Array<number>(CELLS).fill(-1);
  const coords: Array<[number, number]> = [
    [1, 1],
    [2, 1],
    [3, 1],
    [3, 2],
    [3, 3],
    [2, 3],
    [1, 3],
    [1, 2]
  ];

  for (let t = 0; t < coords.length; t += 1) {
    const [row, col] = coords[t]!;
    order[rowMajorIndex(row, col)] = t;
  }

  return order;
}

const OUTER_RING_CLOCKWISE_ORDER: readonly number[] = buildOuterRingClockwiseOrderToIndexMap();
const MIDDLE_RING_ANTI_CLOCKWISE_ORDER: readonly number[] = buildMiddleRingAntiClockwiseOrderToIndexMap();

export function outerRingClockwiseOrderValue(index: number): number {
  return OUTER_RING_CLOCKWISE_ORDER[index]!;
}

export function outerRingClockwiseNormFromIndex(index: number): number {
  const order = outerRingClockwiseOrderValue(index);
  return order >= 0 ? order / 15 : 0;
}

export function middleRingAntiClockwiseOrderValue(index: number): number {
  return MIDDLE_RING_ANTI_CLOCKWISE_ORDER[index]!;
}

export function middleRingAntiClockwiseNormFromIndex(index: number): number {
  const order = middleRingAntiClockwiseOrderValue(index);
  return order >= 0 ? order / 7 : 0;
}

function buildDiagonalSnakeOrderToIndexMap(): number[] {
  const order = new Array<number>(CELLS);
  let t = 0;

  for (let diagonal = 0; diagonal <= (N - 1) * 2; diagonal += 1) {
    const rowStart = Math.max(0, diagonal - (N - 1));
    const rowEnd = Math.min(N - 1, diagonal);

    if (diagonal % 2 === 0) {
      for (let row = rowEnd; row >= rowStart; row -= 1) {
        const col = diagonal - row;
        order[rowMajorIndex(row, col)] = t;
        t += 1;
      }
    } else {
      for (let row = rowStart; row <= rowEnd; row += 1) {
        const col = diagonal - row;
        order[rowMajorIndex(row, col)] = t;
        t += 1;
      }
    }
  }

  return order;
}

const DIAGONAL_SNAKE_ORDER: readonly number[] = buildDiagonalSnakeOrderToIndexMap();

export function diagonalSnakeOrderValue(index: number): number {
  return DIAGONAL_SNAKE_ORDER[index]!;
}

export function diagonalSnakeNormFromIndex(index: number): number {
  return DIAGONAL_SNAKE_ORDER[index]! / (CELLS - 1);
}

function buildRowWaveSnakeOrderToIndexMap(): number[] {
  const order = new Array<number>(CELLS);
  const route: Array<{ col: number; dir: "up" | "down" }> = [
    { col: 0, dir: "up" },
    { col: 2, dir: "down" },
    { col: 1, dir: "up" },
    { col: 3, dir: "down" },
    { col: 2, dir: "up" },
    { col: 4, dir: "down" }
  ];

  let t = 0;
  for (const step of route) {
    if (step.dir === "up") {
      for (let row = N - 1; row >= 0; row -= 1) {
        order[rowMajorIndex(row, step.col)] = t;
        t += 1;
      }
    } else {
      for (let row = 0; row < N; row += 1) {
        order[rowMajorIndex(row, step.col)] = t;
        t += 1;
      }
    }
  }

  return order;
}

const ROW_WAVE_SNAKE_ORDER: readonly number[] = buildRowWaveSnakeOrderToIndexMap();
const ROW_WAVE_SNAKE_MAX_ORDER = Math.max(...ROW_WAVE_SNAKE_ORDER);

export function rowWaveOrderValue(index: number): number {
  return ROW_WAVE_SNAKE_ORDER[index]!;
}

export function rowWaveNormFromIndex(index: number): number {
  return ROW_WAVE_SNAKE_MAX_ORDER > 0 ? rowWaveOrderValue(index) / ROW_WAVE_SNAKE_MAX_ORDER : 0;
}

export function colWaveNormFromIndex(index: number): number {
  const { col } = indexToCoord(index);
  return N > 1 ? col / (N - 1) : 0;
}

export function concentricRingNormFromIndex(index: number): number {
  const { row, col } = indexToCoord(index);
  return Math.max(Math.abs(row - C), Math.abs(col - C)) / C;
}

const CORNER_COORDS = new Set(["0,0", "0,4", "4,0", "4,4"]);

export function isWithinCircularMask(row: number, col: number): boolean {
  return !CORNER_COORDS.has(`${row},${col}`);
}

export function stylePx(n: number): string {
  return `${n}px`;
}

export function styleOpacity(opacity: number): number {
  return Math.round(opacity * 1e6) / 1e6;
}

const SOURCE_BASE_OPACITY = 0.08;
const SOURCE_MID_OPACITY = 0.34;
const SOURCE_PEAK_OPACITY = 0.94;

function lerpDmx(start: number, end: number, progress: number): number {
  return start + (end - start) * progress;
}

function normalizeProgressDmx(value: number, start: number, end: number): number {
  const span = end - start;
  if (Math.abs(span) < Number.EPSILON) {
    return 0;
  }
  return Math.min(1, Math.max(0, (value - start) / span));
}

function coerceOpacityDmx(value: number | undefined): number | undefined {
  if (value == null || !Number.isFinite(value)) {
    return undefined;
  }
  return Math.min(1, Math.max(0, value));
}

export function remapOpacityToTriplet(
  opacity: number,
  opacityBase: number | undefined,
  opacityMid: number | undefined,
  opacityPeak: number | undefined
): number {
  if (!Number.isFinite(opacity)) {
    return opacity;
  }

  const hasOverrides = opacityBase !== undefined || opacityMid !== undefined || opacityPeak !== undefined;
  const safeOpacity = Math.min(1, Math.max(0, opacity));
  if (!hasOverrides) {
    return safeOpacity;
  }

  const targetBase = coerceOpacityDmx(opacityBase) ?? SOURCE_BASE_OPACITY;
  const targetMid = coerceOpacityDmx(opacityMid) ?? SOURCE_MID_OPACITY;
  const targetPeak = coerceOpacityDmx(opacityPeak) ?? SOURCE_PEAK_OPACITY;

  if (safeOpacity <= SOURCE_BASE_OPACITY) {
    const progress = normalizeProgressDmx(safeOpacity, 0, SOURCE_BASE_OPACITY);
    return Math.min(1, Math.max(0, lerpDmx(0, targetBase, progress)));
  }

  if (safeOpacity <= SOURCE_MID_OPACITY) {
    const progress = normalizeProgressDmx(safeOpacity, SOURCE_BASE_OPACITY, SOURCE_MID_OPACITY);
    return Math.min(1, Math.max(0, lerpDmx(targetBase, targetMid, progress)));
  }

  if (safeOpacity <= SOURCE_PEAK_OPACITY) {
    const progress = normalizeProgressDmx(safeOpacity, SOURCE_MID_OPACITY, SOURCE_PEAK_OPACITY);
    return Math.min(1, Math.max(0, lerpDmx(targetMid, targetPeak, progress)));
  }

  const progress = normalizeProgressDmx(safeOpacity, SOURCE_PEAK_OPACITY, 1);
  return Math.min(1, Math.max(0, lerpDmx(targetPeak, 1, progress)));
}

/** Remapped opacity where bloom begins (weakest glow); scales linearly to full bloom at 1. */
export const DMX_BLOOM_OPACITY_MIN = 0.6;

export function opacityToBloomLevel(remappedOpacity: number): number {
  return Math.max(0, Math.min(1, (remappedOpacity - DMX_BLOOM_OPACITY_MIN) / (1 - DMX_BLOOM_OPACITY_MIN)));
}

export function remappedOpacityQualifiesForBloom(remappedOpacity: number): boolean {
  return remappedOpacity >= DMX_BLOOM_OPACITY_MIN;
}

function clampHalo(value: number | undefined): number {
  if (value == null || !Number.isFinite(value)) {
    return 0;
  }
  return Math.min(1, Math.max(0, value));
}

export function dmxBloomRootActive(bloom: boolean, halo: number | undefined): boolean {
  return bloom || clampHalo(halo) > 0;
}

/** Root class when `halo` > 0 — CSS widens drop-shadow falloff for a softer, more diffuse glow. */
export function dmxBloomHaloSpreadClass(halo: number | undefined): "dmx-bloom-halo" | false {
  return clampHalo(halo) > 0 ? "dmx-bloom-halo" : false;
}

/**
 * Bloom level and dot class for one cell. `curveOpacity` is the loader’s logical opacity **before**
 * `remapOpacityToTriplet` (same as `bloom` uses today).
 */
export function dmxDotBloomParts(
  isActive: boolean,
  curveOpacity: number,
  bloom: boolean,
  halo: number | undefined,
  ob: number | undefined,
  om: number | undefined,
  op: number | undefined
): { level: number; bloomDot: boolean } {
  const haloN = clampHalo(halo);
  if (!isActive) {
    return { level: 0, bloomDot: false };
  }
  const remapped = remapOpacityToTriplet(curveOpacity, ob, om, op);
  const fromBloom = bloom ? opacityToBloomLevel(remapped) : 0;
  return {
    level: fromBloom,
    bloomDot: haloN > 0 || (bloom && remappedOpacityQualifiesForBloom(remapped))
  };
}

function getMatrix5Layout(
  size: number,
  dotSize: number,
  cellPadding?: number
): { gap: number; matrixSpan: number } {
  const n = MATRIX_SIZE;
  if (cellPadding != null) {
    const g = Math.max(0, cellPadding);
    const matrixSpan = dotSize * n + g * (n - 1);
    return { gap: g, matrixSpan };
  }
  const g = Math.max(1, Math.floor((size - dotSize * n) / (n - 1)));
  return { gap: g, matrixSpan: size };
}

function resolveDmxBoxOuterDim(
  options: { boxSize?: number; minSize?: number } | null | undefined
): { outerDim: number; useWrapper: boolean } {
  const b = options?.boxSize;
  const hasBox = b != null && b > 0 && Number.isFinite(b);
  if (!hasBox) {
    return { outerDim: 0, useWrapper: false };
  }
  const m = options?.minSize;
  if (m != null && m > 0 && Number.isFinite(m)) {
    return { outerDim: Math.max(b, m), useWrapper: true };
  }
  return { outerDim: b, useWrapper: true };
}

function clamp01Dmx(n: number | undefined) {
  if (n == null) {
    return;
  }
  if (!Number.isFinite(n)) {
    return;
  }
  return Math.min(1, Math.max(0, n));
}

function normalizeDmxInlineStyle(style: CSSProperties | undefined): CSSProperties | undefined {
  if (!style) {
    return;
  }
  const normalized = { ...style } as CSSProperties & Record<string, unknown>;
  for (const key of Object.keys(normalized)) {
    if (key.startsWith("--") && typeof normalized[key] === "number") {
      normalized[key] = String(normalized[key]);
    }
  }
  return normalized;
}

interface CellForgeBaseProps extends CellForgeCommonProps {
  phase: CellForgePhase;
  reducedMotion?: boolean;
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
  animationResolver?: DotAnimationResolver;
}

export function CellForgeBase({
  size = 24,
  dotSize = 3,
  color = "currentColor",
  colorPreset,
  speed = 1,
  ariaLabel = "Loading",
  className,
  pattern = "diamond",
  dotShape = "circle",
  muted = false,
  bloom = false,
  halo = 0,
  dotClassName,
  phase,
  reducedMotion = false,
  onMouseEnter,
  onMouseLeave,
  animationResolver,
  opacityBase,
  opacityMid,
  opacityPeak,
  cellPadding,
  boxSize,
  minSize
}: CellForgeBaseProps) {
  const patternIndexes = new Set(getPatternIndexes(pattern));
  const safeSpeed = speed > 0 ? speed : 1;
  const speedScale = 1 / safeSpeed;
  const { gap, matrixSpan } = getMatrix5Layout(size, dotSize, cellPadding);
  const { outerDim, useWrapper } = resolveDmxBoxOuterDim({ boxSize, minSize });
  const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1;
  const center = Math.floor(MATRIX_SIZE / 2);
  const ob = clamp01Dmx(opacityBase);
  const om = clamp01Dmx(opacityMid);
  const op = clamp01Dmx(opacityPeak);
  const unit = dotSize + gap;
  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);

  const dmxVarStyle = {
    width: stylePx(matrixSpan),
    height: stylePx(matrixSpan),
    "--dmx-speed": String(speedScale),
    ["--dmx-dot-size" as const]: `${dotSize}px`,
    ["--dmx-halo-level" as const]: String(halo),
    ["--dmx-dot-fill" as const]: dotFill,
    color: resolvedColor,
    ...(ob !== undefined && { ["--dmx-opacity-base" as const]: String(ob) }),
    ...(om !== undefined && { ["--dmx-opacity-mid" as const]: String(om) }),
    ...(op !== undefined && { ["--dmx-opacity-peak" as const]: String(op) }),
    ...(useWrapper
      ? {
        transform: `scale(${scale})`,
        transformOrigin: "center center" as const
      }
      : {
        minWidth: minSize == null ? undefined : stylePx(minSize),
        minHeight: minSize == null ? undefined : stylePx(minSize)
      })
  } as unknown as CSSProperties;

  const dots = Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => {
    const { row, col } = indexToCoord(index);
    const isActive = patternIndexes.has(index);
    const distance = distanceFromCenter(index);
    const angle = polarAngle(index);
    const radiusNormalizedValue = normalizedRadius(index);
    const manhattan = manhattanDistance(index);
    const deltaX = (col - center) * unit;
    const deltaY = (row - center) * unit;

    const animationState = animationResolver
      ? animationResolver({
        index,
        row,
        col,
        distanceFromCenter: distance,
        angleFromCenter: angle,
        radiusNormalized: radiusNormalizedValue,
        manhattanDistance: manhattan,
        phase,
        isActive,
        reducedMotion
      })
      : {};

    const resolvedAnimationStyle = normalizeDmxInlineStyle(animationState.style);
    let isBloomDot = false;
    let stylePatch: CSSProperties | undefined = resolvedAnimationStyle;

    if (isActive) {
      const rawOpacity = stylePatch?.opacity;
      if (stylePatch != null && typeof rawOpacity === "number") {
        const remappedOpacity = remapOpacityToTriplet(rawOpacity, ob, om, op);
        stylePatch = { ...stylePatch, opacity: String(styleOpacity(remappedOpacity)) };
        const parts = dmxDotBloomParts(true, rawOpacity, bloom, halo, ob, om, op);
        (stylePatch as CSSProperties & { "--dmx-bloom-level"?: string })["--dmx-bloom-level"] = String(styleOpacity(parts.level));
        isBloomDot = parts.bloomDot;
      } else {
        const parts = dmxDotBloomParts(true, 0, bloom, halo, ob, om, op);
        if (parts.level > 0) {
          stylePatch = {
            ...(stylePatch ?? {}),
            ["--dmx-bloom-level" as const]: String(styleOpacity(parts.level))
          } as CSSProperties & { "--dmx-bloom-level"?: string };
        }
        isBloomDot = parts.bloomDot;
      }
    }

    const dotStyle = {
      width: stylePx(dotSize),
      height: stylePx(dotSize),
      "--dmx-distance": String(distance),
      "--dmx-row": String(row),
      "--dmx-col": String(col),
      "--dmx-x": `${deltaX}px`,
      "--dmx-y": `${deltaY}px`,
      "--dmx-angle": String(angle),
      "--dmx-radius": String(radiusNormalizedValue),
      "--dmx-manhattan": String(manhattan),
      ...stylePatch,
      ...(!isActive
        ? {
          opacity: "0",
          visibility: "hidden" as const,
          pointerEvents: "none" as const,
          animation: "none"
        }
        : {})
    } as CSSProperties;

    return (
      <span
        key={index}
        aria-hidden="true"
        className={cx(
          "dmx-dot",
          !isActive && "dmx-inactive",
          isBloomDot && "dmx-bloom-dot",
          dotClassName,
          animationState.className
        )}
        style={dotStyle}
      />
    );
  });

  const matrix = (
    <div
      className={cx(
        "dmx-root",
        reducedMotion ? "dmx-motion-reduced" : "dmx-motion-enabled",
        `dmx-dot-shape-${dotShape}`,
        muted && "dmx-muted",
        dmxBloomRootActive(bloom, halo) && "dmx-bloom",
        dmxBloomHaloSpreadClass(halo),
        !useWrapper && className
      )}
      style={dmxVarStyle}
    >
      <div className="dmx-grid" style={{ gap: stylePx(gap) }}>{dots}</div>
    </div>
  );

  if (useWrapper) {
    return (
      <div
        role="status"
        aria-live="polite"
        aria-label={ariaLabel}
        className={className}
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          width: stylePx(outerDim),
          height: stylePx(outerDim),
          minWidth: minSize == null ? undefined : stylePx(minSize),
          minHeight: minSize == null ? undefined : stylePx(minSize),
          overflow: "hidden"
        }}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {matrix}
      </div>
    );
  }

  return (
    <div
      role="status"
      aria-live="polite"
      aria-label={ariaLabel}
      className={cx(
        "dmx-root",
        reducedMotion ? "dmx-motion-reduced" : "dmx-motion-enabled",
        `dmx-dot-shape-${dotShape}`,
        muted && "dmx-muted",
        dmxBloomRootActive(bloom, halo) && "dmx-bloom",
        dmxBloomHaloSpreadClass(halo),
        className
      )}
      style={dmxVarStyle}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <div className="dmx-grid" style={{ gap: stylePx(gap) }}>{dots}</div>
    </div>
  );
}

type NormFn = (ctx: Pick<DotAnimationContext, "row" | "col" | "index">) => number;

export function createPathWaveResolver(getPathNorm: NormFn): DotAnimationResolver {
  return ({ isActive, row, col, index, reducedMotion, phase }) => {
    if (!isActive) {
      return { className: "dmx-inactive" };
    }

    const path = getPathNorm({ row, col, index });
    const style = { "--dmx-path": path } as CSSProperties;

    if (reducedMotion || phase === "idle") {
      return {
        style: {
          ...style,
          opacity: 0.12 + path * 0.72
        }
      };
    }

    return { className: "dmx-path", style };
  };
}

type PathWaveComponentProps = CellForgeCommonProps;

export function createPathWaveComponent(displayName: string, getPathNorm: NormFn) {
  const resolve = createPathWaveResolver(getPathNorm);

  function PathWaveComponent({
    pattern = "full",
    animated = true,
    hoverAnimated = false,
    speed = 1,
    ...rest
  }: PathWaveComponentProps) {
    const reducedMotion = usePrefersReducedMotion();
    const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useCellForgePhases({
      animated: Boolean(animated && !reducedMotion),
      hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
      speed
    });
    return (
      <CellForgeBase
        {...rest}
        speed={speed}
        pattern={pattern}
        animated={animated}
        phase={matrixPhase}
        reducedMotion={reducedMotion}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        animationResolver={resolve}
      />
    );
  }

  PathWaveComponent.displayName = displayName;
  return PathWaveComponent;
}

"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import type { CellForgePhase } from "./cellforge-core";

export function usePrefersReducedMotion(): boolean {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);

  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)");

    const update = () => {
      setPrefersReducedMotion(query.matches);
    };

    update();
    query.addEventListener("change", update);

    return () => {
      query.removeEventListener("change", update);
    };
  }, []);

  return prefersReducedMotion;
}

export interface UseCyclePhaseOptions {
  active: boolean;
  cycleMsBase: number;
  speed?: number;
}

export function useCyclePhase({ active, cycleMsBase, speed = 1 }: UseCyclePhaseOptions): number {
  const [phase, setPhase] = useState(0);

  useEffect(() => {
    if (!active) {
      setPhase(0);
      return;
    }

    const safeSpeed = speed > 0 ? speed : 1;
    const raw = cycleMsBase / safeSpeed;
    const cycleMs = raw > 0 && Number.isFinite(raw) ? raw : 1000;
    const start = performance.now();
    let rafId = 0;

    const tick = (now: number) => {
      const elapsed = ((now - start) % cycleMs + cycleMs) % cycleMs;
      setPhase(elapsed / cycleMs);
      rafId = requestAnimationFrame(tick);
    };

    rafId = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafId);
  }, [active, cycleMsBase, speed]);

  return phase;
}

interface UseSteppedCycleOptions {
  active: boolean;
  cycleMsBase: number;
  steps: number;
  speed?: number;
  idleStep?: number;
}

type FrameListener = (now: number) => void;

const listeners = new Set<FrameListener>();
let rafId: number | null = null;

function emit(now: number) {
  listeners.forEach((listener) => {
    listener(now);
  });
}

function tick(now: number) {
  emit(now);
  if (listeners.size > 0) {
    rafId = window.requestAnimationFrame(tick);
  } else {
    rafId = null;
  }
}

function subscribeFrame(listener: FrameListener) {
  listeners.add(listener);
  if (rafId === null) {
    rafId = window.requestAnimationFrame(tick);
  }
  return () => {
    listeners.delete(listener);
    if (listeners.size === 0 && rafId !== null) {
      window.cancelAnimationFrame(rafId);
      rafId = null;
    }
  };
}

export function useSteppedCycle({
  active,
  cycleMsBase,
  steps,
  speed = 1,
  idleStep = 0
}: UseSteppedCycleOptions): number {
  const safeSteps = Math.max(1, Math.floor(steps));
  const safeSpeed = speed > 0 ? speed : 1;
  const rawCycleMs = cycleMsBase / safeSpeed;
  const rawStepMs = rawCycleMs / safeSteps;
  const stepMs = rawStepMs > 0 && Number.isFinite(rawStepMs) ? rawStepMs : 1;
  const cycleMs = stepMs * safeSteps;

  const [step, setStep] = useState(() => (active ? 0 : idleStep));
  const startMsRef = useRef<number>(0);
  const activeRef = useRef(false);
  const currentStepRef = useRef(idleStep);

  useEffect(() => {
    if (!active) {
      activeRef.current = false;
      currentStepRef.current = idleStep;
      setStep(idleStep);
      return;
    }

    const updateStep = (now: number) => {
      if (!activeRef.current) {
        startMsRef.current = now;
        activeRef.current = true;
      }

      const elapsed = Math.max(0, now - startMsRef.current);
      const nextStep = Math.floor((elapsed % cycleMs) / stepMs) % safeSteps;
      if (nextStep !== currentStepRef.current) {
        currentStepRef.current = nextStep;
        setStep(nextStep);
      }
    };

    updateStep(performance.now());
    return subscribeFrame(updateStep);
  }, [active, cycleMs, idleStep, safeSteps, stepMs]);

  return active ? step : idleStep;
}

interface UseCellForgePhasesOptions {
  animated?: boolean;
  hoverAnimated?: boolean;
  speed?: number;
}

interface CellForgePhasesResult {
  phase: CellForgePhase;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
}

export function useCellForgePhases({
  animated = false,
  hoverAnimated = false,
  speed = 1
}: UseCellForgePhasesOptions): CellForgePhasesResult {
  const safeSpeed = speed > 0 ? speed : 1;
  const autoRun = Boolean(animated && !hoverAnimated);
  const [hoverPhase, setHoverPhase] = useState<CellForgePhase>("idle");
  const timeouts = useRef<number[]>([]);
  const hoverGen = useRef(0);

  const clearTimers = useCallback(() => {
    for (let i = 0; i < timeouts.current.length; i += 1) {
      window.clearTimeout(timeouts.current[i]!);
    }
    timeouts.current = [];
  }, []);

  useEffect(() => {
    hoverGen.current += 1;
    clearTimers();
    return clearTimers;
  }, [autoRun, hoverAnimated, clearTimers]);

  const onMouseEnter = useCallback(() => {
    if (!hoverAnimated || autoRun) {
      return;
    }
    clearTimers();
    const gen = ++hoverGen.current;
    setHoverPhase("collapse");
    const collapseMs = Math.max(1, Math.round(300 / safeSpeed));
    const id = window.setTimeout(() => {
      if (hoverGen.current !== gen) {
        return;
      }
      setHoverPhase("hoverRipple");
    }, collapseMs);
    timeouts.current.push(id);
  }, [hoverAnimated, autoRun, safeSpeed, clearTimers]);

  const onMouseLeave = useCallback(() => {
    if (!hoverAnimated || autoRun) {
      return;
    }
    hoverGen.current += 1;
    clearTimers();
    setHoverPhase("idle");
  }, [hoverAnimated, autoRun, clearTimers]);

  const phase: CellForgePhase = autoRun ? "loadingRipple" : hoverAnimated ? hoverPhase : "idle";

  return useMemo(
    () => ({
      phase,
      onMouseEnter,
      onMouseLeave
    }),
    [phase, onMouseEnter, onMouseLeave]
  );
}

.dmx-root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* One base loop at speed=1; --dmx-speed from JS scales inversely with the speed prop */
  --dmx-cycle: 1500ms;
  /* Rest / mid / bright — override via opacityBase, opacityMid, opacityPeak on the component */
  --dmx-opacity-base: 0.16;
  --dmx-opacity-mid: 0.32;
  --dmx-opacity-peak: 1;
  --dmx-halo-level: 0;
}

.dmx-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.dmx-dot {
  border-radius: 999px;
  clip-path: none;
  display: block;
  background: var(--dmx-dot-fill, currentColor);
  /* Matches prior 0.24 with default base/mid */
  opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid)));
  --dmx-bloom-level: 0;
  transform-origin: center;
  transform: none;
  will-change: opacity;
}

.dmx-root.dmx-dot-shape-circle .dmx-dot {
  border-radius: 999px;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.dmx-root.dmx-dot-shape-square .dmx-dot {
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.dmx-root.dmx-dot-shape-diamond .dmx-dot {
  border-radius: 0;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
  transform: rotate(45deg) scale(0.7071067812);
}

.dmx-root.dmx-dot-shape-pill .dmx-dot {
  border-radius: 999px;
  clip-path: inset(18% 0 18% 0);
  -webkit-mask: none;
  mask: none;
  transform: scaleX(1.36);
}

.dmx-root.dmx-dot-shape-triangle .dmx-dot {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 92%, 0% 92%);
  -webkit-mask: none;
  mask: none;
  transform: none;
}

.dmx-root.dmx-dot-shape-hex .dmx-dot {
  border-radius: 0;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  -webkit-mask: none;
  mask: none;
  transform: none;
}

.dmx-root.dmx-dot-shape-plus .dmx-dot {
  border-radius: 0;
  clip-path: polygon(
    36% 0,
    64% 0,
    64% 36%,
    100% 36%,
    100% 64%,
    64% 64%,
    64% 100%,
    36% 100%,
    36% 64%,
    0 64%,
    0 36%,
    36% 36%
  );
  -webkit-mask: none;
  mask: none;
  transform: none;
}

.dmx-root.dmx-dot-shape-star .dmx-dot {
  position: relative;
  border-radius: 0;
  clip-path: none;
  transform: none;
  background: none;
  -webkit-mask: none;
  mask: none;
}

.dmx-root.dmx-dot-shape-star .dmx-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dmx-dot-fill, currentColor);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 0.8 12.8 6.8 19.3 7.6 14.5 12.1 15.7 18.6 10 15.3 4.3 18.6 5.5 12.1 0.7 7.6 7.2 6.8 10 0.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 0.8 12.8 6.8 19.3 7.6 14.5 12.1 15.7 18.6 10 15.3 4.3 18.6 5.5 12.1 0.7 7.6 7.2 6.8 10 0.8Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.dmx-root.dmx-dot-shape-hearts .dmx-dot {
  position: relative;
  border-radius: 0;
  clip-path: none;
  transform: none;
  background: none;
  -webkit-mask: none;
  mask: none;
}

.dmx-root.dmx-dot-shape-hearts .dmx-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dmx-dot-fill, currentColor);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='m8.593.827c-1.008.012-1.953.464-2.593,1.227-.641-.762-1.586-1.214-2.598-1.227C1.519.839-.007,2.378,0,4.257,0,8.362,4.201,10.875,5.488,11.547h0c.16.084.336.125.511.125s.352-.042.511-.125c1.287-.672,5.489-3.184,5.489-7.289.007-1.88-1.519-3.42-3.407-3.431Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='m8.593.827c-1.008.012-1.953.464-2.593,1.227-.641-.762-1.586-1.214-2.598-1.227C1.519.839-.007,2.378,0,4.257,0,8.362,4.201,10.875,5.488,11.547h0c.16.084.336.125.511.125s.352-.042.511-.125c1.287-.672,5.489-3.184,5.489-7.289.007-1.88-1.519-3.42-3.407-3.431Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.dmx-bloom .dmx-dot {
  filter:
    drop-shadow(
      0 0
      calc(
        var(--dmx-dot-size, 3px) * 0.75 *
          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))
      )
      currentColor
    )
    drop-shadow(
      0 0
      calc(
        var(--dmx-dot-size, 3px) * 1.35 *
          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))
      )
      currentColor
    );
  will-change: opacity, filter;
}

/* Halo: modestly wider falloff than selective bloom (same --dmx-bloom-level on each dot). */
.dmx-root.dmx-bloom-halo.dmx-bloom .dmx-dot {
  filter:
    drop-shadow(
      0 0
      calc(
        var(--dmx-dot-size, 3px) * 0.92 *
          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))
      )
      currentColor
    )
    drop-shadow(
      0 0
      calc(
        var(--dmx-dot-size, 3px) * 1.62 *
          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))
      )
      currentColor
    )
    drop-shadow(
      0 0
      calc(
        var(--dmx-dot-size, 3px) * 2.55 *
          max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0))
      )
      currentColor
    );
  will-change: opacity, filter;
}

/* Bloom strength comes from inline --dmx-bloom-level (see opacityToBloomLevel). */

.dmx-muted .dmx-dot {
  opacity: calc(0.44 * var(--dmx-opacity-mid));
  --dmx-bloom-level: 0;
}

/* Inactive off-cells (Base also sets inline opacity/animation:none so keyframes cannot win). */
.dmx-dot.dmx-inactive {
  opacity: 0 !important;
  --dmx-bloom-level: 0;
  animation: none !important;
  visibility: hidden;
  pointer-events: none;
  will-change: auto;
  filter: none;
}

.dmx-ripple {
  animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)
    infinite;
  animation-delay: calc(var(--dmx-ripple-ring, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-ripple-echo {
  animation: dmx-ripple-echo calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;
  animation-delay: calc(
    (var(--dmx-ripple-ring, 0) * 0.14 + var(--dmx-ripple-parity, 0) * 0.03) *
      var(--dmx-cycle) *
      var(--dmx-speed, 1)
  );
  will-change: opacity;
}

.dmx-center-origin-ripple {
  animation: dmx-center-origin-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;
  animation-delay: calc(
    var(--dmx-center-ripple-ring, 0) * 0.16 * var(--dmx-cycle) * var(--dmx-speed, 1)
  );
  will-change: opacity;
}

.dmx-collapse {
  animation: dmx-collapse calc(var(--dmx-cycle) * 0.2 * var(--dmx-speed, 1)) ease-in forwards;
  animation-delay: calc(
    (4 - var(--dmx-manhattan, 0)) * 0.032 * var(--dmx-cycle) * var(--dmx-speed, 1)
  );
}

.dmx-hover-ripple {
  animation: dmx-hover-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;
  animation-delay: calc(var(--dmx-distance, 0) * 0.127 * var(--dmx-cycle) * var(--dmx-speed, 1));
}

.dmx-path {
  animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1)
    infinite;
  animation-delay: calc(var(--dmx-path, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-diagonal-alt-sweep {
  animation: dmx-diagonal-alt-sweep calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc(
    (var(--dmx-path, 0) * 0.2 + var(--dmx-diagonal-parity, 0) * 0.5) *
      var(--dmx-cycle) *
      var(--dmx-speed, 1)
  );
  will-change: opacity;
}

.dmx-spiral-snake {
  animation: dmx-spiral-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc(var(--dmx-spiral-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-diagonal-snake {
  animation: dmx-diagonal-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc(
    var(--dmx-diagonal-snake-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1)
  );
  will-change: opacity;
}

.dmx-outer-snake {
  animation: dmx-ring-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc(var(--dmx-outer-order, 0) * 0.0625 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-middle-snake {
  animation: dmx-ring-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc(var(--dmx-middle-order, 0) * 0.125 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

@keyframes dmx-ripple {
  0%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  50% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }
}

@keyframes dmx-ripple-echo {
  0%,
  100% {
    opacity: calc(0.625 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  28% {
    opacity: calc(0.98 * var(--dmx-opacity-peak));
    --dmx-bloom-level: 0.9;
  }

  56% {
    opacity: var(--dmx-opacity-mid);
    --dmx-bloom-level: 0;
  }

  78% {
    opacity: calc(0.68 * var(--dmx-opacity-peak) + 0.32 * var(--dmx-opacity-mid));
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-center-origin-ripple {
  0%,
  100% {
    opacity: calc(0.625 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  34% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  60% {
    opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid)));
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-collapse {
  0% {
    opacity: calc(0.95 * var(--dmx-opacity-peak) + 0.05 * var(--dmx-opacity-mid));
    --dmx-bloom-level: 0.75;
  }

  100% {
    opacity: calc(0.375 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-hover-ripple {
  0% {
    opacity: calc(0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  45% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-diagonal-alt-sweep {
  0%,
  100% {
    opacity: calc(0.85 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  10% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  20% {
    opacity: calc(0.7 * var(--dmx-opacity-peak) + 0.3 * var(--dmx-opacity-mid));
    --dmx-bloom-level: 0.55;
  }

  36% {
    opacity: calc(0.4 * var(--dmx-opacity-mid) + 0.6 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.1;
  }
}

@keyframes dmx-spiral-snake {
  0%,
  100% {
    opacity: calc(0.8 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  7% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  15% {
    opacity: calc(0.7 * var(--dmx-opacity-peak) + 0.25 * var(--dmx-opacity-mid) + 0.05 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.45;
  }

  24% {
    opacity: calc(0.35 * var(--dmx-opacity-peak) + 0.5 * var(--dmx-opacity-mid) + 0.15 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.2;
  }

  32% {
    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  40% {
    opacity: calc(0.75 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-diagonal-snake {
  0%,
  100% {
    opacity: calc(0.8 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  7% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  15% {
    opacity: calc(0.7 * var(--dmx-opacity-peak) + 0.25 * var(--dmx-opacity-mid) + 0.05 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.45;
  }

  24% {
    opacity: calc(0.35 * var(--dmx-opacity-peak) + 0.5 * var(--dmx-opacity-mid) + 0.15 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.2;
  }

  32% {
    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  40% {
    opacity: calc(0.75 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-ring-snake {
  0%,
  100% {
    opacity: calc(0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  10% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  20% {
    opacity: calc(0.45 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  30% {
    opacity: calc(0.2 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.4 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  40% {
    opacity: calc(0.875 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }
}

.dmx-square9-bit {
  animation-duration: calc(5200ms * var(--dmx-speed, 1));
  animation-timing-function: steps(52, end);
  animation-iteration-count: infinite;
  will-change: opacity;
}

.dmx-square9-d1 {
  animation-name: dmx-square9-d1;
}

.dmx-square9-d2 {
  animation-name: dmx-square9-d2;
}

.dmx-square9-d3 {
  animation-name: dmx-square9-d3;
}

.dmx-square9-d4 {
  animation-name: dmx-square9-d4;
}

.dmx-square9-d5 {
  animation-name: dmx-square9-d5;
}

.dmx-square9-d6 {
  animation-name: dmx-square9-d6;
}

@keyframes dmx-square9-d1 {
  0%,
  3.846154% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  3.846154%,
  30.769231% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  30.769231%,
  46.153846% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  46.153846%,
  50% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  50%,
  53.846154% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  53.846154%,
  57.692308% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  57.692308%,
  65.384615% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  65.384615%,
  71.153846% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  71.153846%,
  80.769231% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  80.769231%,
  84.615385% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  84.615385%,
  88.461538% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  88.461538%,
  92.307692% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  92.307692%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-square9-d2 {
  0%,
  5.769231% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  5.769231%,
  25% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  25%,
  30.769231% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  30.769231%,
  36.538462% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  36.538462%,
  50% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  50%,
  53.846154% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  53.846154%,
  57.692308% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  57.692308%,
  61.538462% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  61.538462%,
  65.384615% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  65.384615%,
  76.923077% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  76.923077%,
  80.769231% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  80.769231%,
  84.615385% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  84.615385%,
  88.461538% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  88.461538%,
  92.307692% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  92.307692%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-square9-d3 {
  0%,
  7.692308% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  7.692308%,
  25% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  25%,
  36.538462% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  36.538462%,
  42.307692% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  42.307692%,
  46.153846% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  46.153846%,
  50% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  50%,
  53.846154% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  53.846154%,
  57.692308% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  57.692308%,
  71.153846% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  71.153846%,
  76.923077% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  76.923077%,
  80.769231% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  80.769231%,
  84.615385% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  84.615385%,
  88.461538% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  88.461538%,
  92.307692% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  92.307692%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-square9-d4 {
  0%,
  13.461538% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  13.461538%,
  30.769231% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  30.769231%,
  50% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  50%,
  53.846154% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  53.846154%,
  57.692308% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  57.692308%,
  61.538462% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  61.538462%,
  65.384615% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  65.384615%,
  71.153846% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  71.153846%,
  84.615385% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  84.615385%,
  88.461538% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  88.461538%,
  92.307692% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  92.307692%,
  96.153846% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  96.153846%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-square9-d5 {
  0%,
  15.384615% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  15.384615%,
  25% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  25%,
  30.769231% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  30.769231%,
  36.538462% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  36.538462%,
  46.153846% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  46.153846%,
  50% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  50%,
  53.846154% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  53.846154%,
  57.692308% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  57.692308%,
  65.384615% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  65.384615%,
  76.923077% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  76.923077%,
  84.615385% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  84.615385%,
  88.461538% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  88.461538%,
  92.307692% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  92.307692%,
  96.153846% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  96.153846%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

@keyframes dmx-square9-d6 {
  0%,
  17.307692% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  17.307692%,
  25% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  25%,
  36.538462% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  36.538462%,
  42.307692% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  42.307692%,
  50% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  50%,
  53.846154% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  53.846154%,
  57.692308% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  57.692308%,
  61.538462% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  61.538462%,
  71.153846% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  71.153846%,
  76.923077% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  76.923077%,
  84.615385% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  84.615385%,
  88.461538% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  88.461538%,
  92.307692% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }

  92.307692%,
  96.153846% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  96.153846%,
  100% {
    opacity: var(--dmx-opacity-base);
    --dmx-bloom-level: 0;
  }
}

.dmx-square6-col-snake {
  animation: dmx-square6-col-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(5, end) infinite;
  animation-delay: calc(var(--dmx-col-pos, 0) * 0.2 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

@keyframes dmx-square6-col-snake {
  0%,
  20% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 0.9;
  }

  20%,
  40% {
    opacity: calc(0.55 * var(--dmx-opacity-peak) + 0.35 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.35;
  }

  40%,
  60% {
    opacity: calc(0.25 * var(--dmx-opacity-peak) + 0.5 * var(--dmx-opacity-mid) + 0.25 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0.15;
  }

  60%,
  80% {
    opacity: calc(0.35 * var(--dmx-opacity-mid) + 0.65 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  80%,
  100% {
    opacity: calc(0.625 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }
}

.dmx-circular2-ring {
  animation: dmx-circular2-ring calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(12, end) infinite;
  animation-delay: calc(var(--dmx-ring-order, 0) * 0.0833333333 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

@keyframes dmx-circular2-ring {
  0%,
  8.333333% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  8.333333%,
  16.666667% {
    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid));
    --dmx-bloom-level: 0;
  }

  16.666667%,
  25% {
    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  25%,
  33.333333% {
    opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  33.333333%,
  41.666667% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  41.666667%,
  50% {
    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid));
    --dmx-bloom-level: 0;
  }

  50%,
  58.333333% {
    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  58.333333%,
  66.666667% {
    opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  66.666667%,
  75% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  75%,
  83.333333% {
    opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid));
    --dmx-bloom-level: 0;
  }

  83.333333%,
  91.666667% {
    opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }

  91.666667%,
  100% {
    opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base));
    --dmx-bloom-level: 0;
  }
}

.cf-custom-cell-field {
  max-width: min(100%, 760px);
  overflow: visible;
}

.cf-custom-cell-grid {
  display: grid;
  justify-content: center;
  max-width: 100%;
  overflow: visible;
}

.cf-custom-cell,
.cf-custom-cell-space {
  flex: none;
}

.cf-custom-cell {
  opacity: 0.18;
  animation: cf-custom-cell-write calc(2200ms * var(--cf-custom-speed, 1)) ease-in-out infinite;
  will-change: opacity, filter;
}

.cf-custom-cell-field:hover .cf-custom-cell {
  filter:
    drop-shadow(0 0 calc(var(--dmx-dot-size, 4px) * 1.2) currentColor)
    drop-shadow(0 0 calc(var(--dmx-dot-size, 4px) * 2.1) currentColor);
}

@keyframes cf-custom-cell-write {
  0%,
  100% {
    opacity: 0.18;
    --dmx-bloom-level: 0;
  }

  34% {
    opacity: var(--dmx-opacity-peak);
    --dmx-bloom-level: 1;
  }

  68% {
    opacity: var(--dmx-opacity-mid);
    --dmx-bloom-level: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dmx-root.dmx-motion-reduced .dmx-dot,
  .dmx-root.dmx-motion-reduced .dmx-ripple,
  .dmx-root.dmx-motion-reduced .dmx-ripple-echo,
  .dmx-root.dmx-motion-reduced .dmx-center-origin-ripple,
  .dmx-root.dmx-motion-reduced .dmx-collapse,
  .dmx-root.dmx-motion-reduced .dmx-hover-ripple,
  .dmx-root.dmx-motion-reduced .dmx-path,
  .dmx-root.dmx-motion-reduced .dmx-diagonal-alt-sweep,
  .dmx-root.dmx-motion-reduced .dmx-spiral-snake,
  .dmx-root.dmx-motion-reduced .dmx-diagonal-snake,
  .dmx-root.dmx-motion-reduced .dmx-outer-snake,
  .dmx-root.dmx-motion-reduced .dmx-middle-snake,
  .dmx-root.dmx-motion-reduced .dmx-square9-bit,
  .dmx-root.dmx-motion-reduced .dmx-square6-col-snake,
  .dmx-root.dmx-motion-reduced .dmx-circular2-ring,
  .dmx-root.dmx-motion-reduced .cf-custom-cell {
    animation: none !important;
    transition: none !important;
  }
}