@hua-labs/motion-core 2.2.3 → 2.3.0

package/dist/index.js

@@ -1,4756 +0,0 @@
-'use strict';
-
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/core/MotionEngine.ts
-var MotionEngine = class {
-  constructor() {
-    this.motions = /* @__PURE__ */ new Map();
-    this.isRunning = false;
-    this.animationFrameId = null;
-  }
-  /**
-   * 모션 시작
-   */
-  motion(element, motionFrames, options) {
-    return new Promise((resolve) => {
-      const motionId = this.generateMotionId();
-      this.enableGPUAcceleration(element);
-      this.createLayer(element);
-      const motion = {
-        id: motionId,
-        element,
-        isRunning: true,
-        isPaused: false,
-        currentProgress: 0,
-        startTime: Date.now() + (options.delay || 0),
-        pauseTime: 0,
-        options: {
-          ...options,
-          onComplete: () => {
-            options.onComplete?.();
-            this.motions.delete(motionId);
-          }
-        }
-      };
-      this.motions.set(motionId, motion);
-      if (!this.isRunning) {
-        this.startAnimationLoop();
-      }
-      options.onStart?.();
-      resolve(motionId);
-    });
-  }
-  /**
-   * 모션 중지
-   */
-  stop(motionId) {
-    const motion = this.motions.get(motionId);
-    if (motion) {
-      motion.isRunning = false;
-      motion.options.onCancel?.();
-      this.motions.delete(motionId);
-    }
-  }
-  /**
-   * 모션 일시정지
-   */
-  pause(motionId) {
-    const motion = this.motions.get(motionId);
-    if (motion && motion.isRunning && !motion.isPaused) {
-      motion.isPaused = true;
-      motion.pauseTime = Date.now();
-    }
-  }
-  /**
-   * 모션 재개
-   */
-  resume(motionId) {
-    const motion = this.motions.get(motionId);
-    if (motion && motion.isPaused) {
-      motion.isPaused = false;
-      if (motion.pauseTime > 0) {
-        motion.startTime += Date.now() - motion.pauseTime;
-      }
-    }
-  }
-  /**
-   * 모든 모션 중지
-   */
-  stopAll() {
-    this.motions.forEach((motion) => {
-      motion.isRunning = false;
-      motion.options.onCancel?.();
-    });
-    this.motions.clear();
-    this.stopAnimationLoop();
-  }
-  /**
-   * 모션 상태 확인
-   */
-  getMotion(motionId) {
-    return this.motions.get(motionId);
-  }
-  /**
-   * 실행 중인 모션 수
-   */
-  getActiveMotionCount() {
-    return this.motions.size;
-  }
-  /**
-   * 애니메이션 루프 시작
-   */
-  startAnimationLoop() {
-    if (this.isRunning) return;
-    this.isRunning = true;
-    this.animate();
-  }
-  /**
-   * 애니메이션 루프 중지
-   */
-  stopAnimationLoop() {
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
-    }
-    this.isRunning = false;
-  }
-  /**
-   * 메인 애니메이션 루프
-   */
-  animate() {
-    if (!this.isRunning || this.motions.size === 0) {
-      this.stopAnimationLoop();
-      return;
-    }
-    const currentTime = Date.now();
-    const completedMotions = [];
-    this.motions.forEach((motion) => {
-      if (!motion.isRunning || motion.isPaused) return;
-      const elapsed = currentTime - motion.startTime;
-      if (elapsed < 0) return;
-      const progress = Math.min(elapsed / motion.options.duration, 1);
-      const easedProgress = motion.options.easing(progress);
-      motion.currentProgress = easedProgress;
-      this.applyMotionFrame(motion.element, easedProgress);
-      motion.options.onUpdate?.(easedProgress);
-      if (progress >= 1) {
-        completedMotions.push(motion.id);
-        motion.isRunning = false;
-        motion.options.onComplete?.();
-      }
-    });
-    completedMotions.forEach((id) => this.motions.delete(id));
-    this.animationFrameId = requestAnimationFrame(() => this.animate());
-  }
-  /**
-   * 모션 프레임 적용
-   */
-  applyMotionFrame(element, progress) {
-    const transforms = [];
-    if (element.style.transform) {
-      transforms.push(element.style.transform);
-    }
-    element.style.transform = transforms.join(" ");
-  }
-  /**
-   * GPU 가속 활성화
-   */
-  enableGPUAcceleration(element) {
-    element.style.willChange = "transform, opacity";
-    element.style.transform = "translateZ(0)";
-  }
-  /**
-   * 레이어 분리
-   */
-  createLayer(element) {
-    element.style.transform = "translateZ(0)";
-    element.style.backfaceVisibility = "hidden";
-  }
-  /**
-   * 고유 모션 ID 생성
-   */
-  generateMotionId() {
-    return `motion_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  }
-  /**
-   * 정리
-   */
-  destroy() {
-    this.stopAll();
-    this.stopAnimationLoop();
-  }
-};
-var motionEngine = new MotionEngine();
-
-// src/core/TransitionEffects.ts
-var TransitionEffects = class _TransitionEffects {
-  constructor() {
-    this.activeTransitions = /* @__PURE__ */ new Map();
-  }
-  static getInstance() {
-    if (!_TransitionEffects.instance) {
-      _TransitionEffects.instance = new _TransitionEffects();
-    }
-    return _TransitionEffects.instance;
-  }
-  /**
-   * 페이드 인/아웃 전환
-   */
-  async fade(element, options) {
-    const transitionId = this.generateTransitionId();
-    const initialOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
-    const targetOpacity = options.direction === "reverse" ? 0 : 1;
-    if (options.direction === "reverse") {
-      element.style.opacity = initialOpacity.toString();
-    } else {
-      element.style.opacity = "0";
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { opacity: options.direction === "reverse" ? initialOpacity : 0 } },
-        { progress: 1, properties: { opacity: targetOpacity } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentOpacity = options.direction === "reverse" ? initialOpacity * (1 - progress) : targetOpacity * progress;
-          element.style.opacity = currentOpacity.toString();
-        },
-        onComplete: () => {
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
-        }
-      }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 슬라이드 전환
-   */
-  async slide(element, options) {
-    const transitionId = this.generateTransitionId();
-    const distance = options.distance || 100;
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    if (!isReverse) {
-      element.style.transform = `translateX(${distance}px)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { translateX: isReverse ? 0 : distance } },
-        { progress: 1, properties: { translateX: isReverse ? distance : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentTranslateX = isReverse ? distance * progress : distance * (1 - progress);
-          element.style.transform = `translateX(${currentTranslateX}px)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
-        }
-      }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 스케일 전환
-   */
-  async scale(element, options) {
-    const transitionId = this.generateTransitionId();
-    const scaleValue = options.scale || 0.8;
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    if (!isReverse) {
-      element.style.transform = `scale(${scaleValue})`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { scale: isReverse ? 1 : scaleValue } },
-        { progress: 1, properties: { scale: isReverse ? scaleValue : 1 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentScale = isReverse ? 1 - (1 - scaleValue) * progress : scaleValue + (1 - scaleValue) * progress;
-          element.style.transform = `scale(${currentScale})`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
-        }
-      }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 플립 전환 (3D 회전)
-   */
-  async flip(element, options) {
-    const transitionId = this.generateTransitionId();
-    const perspective = options.perspective || 1e3;
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    element.style.perspective = `${perspective}px`;
-    element.style.transformStyle = "preserve-3d";
-    if (!isReverse) {
-      element.style.transform = `rotateY(90deg)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { rotateY: isReverse ? 0 : 90 } },
-        { progress: 1, properties: { rotateY: isReverse ? 90 : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentRotateY = isReverse ? 90 * progress : 90 * (1 - progress);
-          element.style.transform = `rotateY(${currentRotateY}deg)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          element.style.perspective = "";
-          element.style.transformStyle = "";
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
-        }
-      }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 큐브 전환 (3D 큐브 회전)
-   */
-  async cube(element, options) {
-    const transitionId = this.generateTransitionId();
-    const perspective = options.perspective || 1200;
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    element.style.perspective = `${perspective}px`;
-    element.style.transformStyle = "preserve-3d";
-    if (!isReverse) {
-      element.style.transform = `rotateX(90deg) rotateY(45deg)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { rotateX: isReverse ? 0 : 90, rotateY: isReverse ? 0 : 45 } },
-        { progress: 1, properties: { rotateX: isReverse ? 90 : 0, rotateY: isReverse ? 45 : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentRotateX = isReverse ? 90 * progress : 90 * (1 - progress);
-          const currentRotateY = isReverse ? 45 * progress : 45 * (1 - progress);
-          element.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          element.style.perspective = "";
-          element.style.transformStyle = "";
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
-        }
-      }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 모프 전환 (복합 변형)
-   */
-  async morph(element, options) {
-    const transitionId = this.generateTransitionId();
-    const initialTransform = getComputedStyle(element).transform;
-    const isReverse = options.direction === "reverse";
-    if (!isReverse) {
-      element.style.transform = `scale(0.9) rotate(5deg)`;
-    }
-    this.enableGPUAcceleration(element);
-    let resolveTransition;
-    const completed = new Promise((resolve) => {
-      resolveTransition = resolve;
-    });
-    const motionId = await motionEngine.motion(
-      element,
-      [
-        { progress: 0, properties: { scale: isReverse ? 1 : 0.9, rotate: isReverse ? 0 : 5 } },
-        { progress: 1, properties: { scale: isReverse ? 0.9 : 1, rotate: isReverse ? 5 : 0 } }
-      ],
-      {
-        duration: options.duration,
-        easing: options.easing || this.getDefaultEasing(),
-        delay: options.delay,
-        onStart: options.onTransitionStart,
-        onUpdate: (progress) => {
-          const currentScale = isReverse ? 1 - 0.1 * progress : 0.9 + 0.1 * progress;
-          const currentRotate = isReverse ? 5 * progress : 5 * (1 - progress);
-          element.style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
-        },
-        onComplete: () => {
-          element.style.transform = initialTransform;
-          options.onTransitionComplete?.();
-          this.activeTransitions.delete(transitionId);
-          resolveTransition();
-        }
-      }
-    );
-    this.activeTransitions.set(transitionId, motionId);
-    return completed;
-  }
-  /**
-   * 전환 중지
-   */
-  stopTransition(transitionId) {
-    const motionId = this.activeTransitions.get(transitionId);
-    if (motionId) {
-      motionEngine.stop(motionId);
-      this.activeTransitions.delete(transitionId);
-    }
-  }
-  /**
-   * 모든 전환 중지
-   */
-  stopAllTransitions() {
-    this.activeTransitions.forEach((motionId) => {
-      motionEngine.stop(motionId);
-    });
-    this.activeTransitions.clear();
-  }
-  /**
-   * 활성 전환 수 확인
-   */
-  getActiveTransitionCount() {
-    return this.activeTransitions.size;
-  }
-  /**
-   * GPU 가속 활성화
-   */
-  enableGPUAcceleration(element) {
-    element.style.willChange = "transform, opacity";
-    const currentTransform = element.style.transform;
-    if (currentTransform && currentTransform !== "none" && currentTransform !== "") {
-      if (!currentTransform.includes("translateZ")) {
-        element.style.transform = `${currentTransform} translateZ(0)`;
-      }
-    } else {
-      element.style.transform = "translateZ(0)";
-    }
-  }
-  /**
-   * 기본 이징 함수
-   */
-  getDefaultEasing() {
-    return (t) => t * t * (3 - 2 * t);
-  }
-  /**
-   * 고유 전환 ID 생성
-   */
-  generateTransitionId() {
-    return `transition_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  }
-  /**
-   * 정리
-   */
-  destroy() {
-    this.stopAllTransitions();
-  }
-};
-var transitionEffects = TransitionEffects.getInstance();
-
-// src/core/PerformanceOptimizer.ts
-var PerformanceOptimizer = class _PerformanceOptimizer {
-  constructor() {
-    this.performanceObserver = null;
-    this.layerRegistry = /* @__PURE__ */ new Set();
-    this.isMonitoring = false;
-    this.config = {
-      enableGPUAcceleration: true,
-      enableLayerSeparation: true,
-      enableMemoryOptimization: true,
-      targetFPS: 60,
-      maxLayerCount: 100,
-      memoryThreshold: 50 * 1024 * 1024
-      // 50MB
-    };
-    this.metrics = {
-      fps: 0,
-      layerCount: 0,
-      activeMotions: 0
-    };
-    this.initializePerformanceMonitoring();
-  }
-  static getInstance() {
-    if (!_PerformanceOptimizer.instance) {
-      _PerformanceOptimizer.instance = new _PerformanceOptimizer();
-    }
-    return _PerformanceOptimizer.instance;
-  }
-  /**
-   * 성능 모니터링 초기화
-   */
-  initializePerformanceMonitoring() {
-    if (typeof PerformanceObserver !== "undefined") {
-      try {
-        this.performanceObserver = new PerformanceObserver((list) => {
-          const entries = list.getEntries();
-          this.updatePerformanceMetrics(entries);
-        });
-        this.performanceObserver.observe({ entryTypes: ["measure", "navigation"] });
-      } catch (error) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Performance monitoring not supported:", error);
-        }
-      }
-    }
-  }
-  /**
-   * 성능 메트릭 업데이트
-   */
-  updatePerformanceMetrics(entries) {
-    entries.forEach((entry) => {
-      if (entry.entryType === "measure") {
-        this.calculateFPS();
-      }
-    });
-  }
-  /**
-   * FPS 계산
-   */
-  calculateFPS() {
-    const now = performance.now();
-    const deltaTime = now - (this.lastFrameTime || now);
-    this.lastFrameTime = now;
-    if (deltaTime > 0) {
-      this.metrics.fps = Math.round(1e3 / deltaTime);
-    }
-  }
-  /**
-   * GPU 가속 활성화
-   */
-  enableGPUAcceleration(element) {
-    if (!this.config.enableGPUAcceleration) return;
-    try {
-      element.style.willChange = "transform, opacity";
-      element.style.transform = "translateZ(0)";
-      element.style.backfaceVisibility = "hidden";
-      element.style.transformStyle = "preserve-3d";
-      this.registerLayer(element);
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("GPU acceleration failed:", error);
-      }
-    }
-  }
-  /**
-   * 레이어 분리 및 최적화
-   */
-  createOptimizedLayer(element) {
-    if (!this.config.enableLayerSeparation) return;
-    try {
-      element.style.transform = "translateZ(0)";
-      element.style.backfaceVisibility = "hidden";
-      element.style.perspective = "1000px";
-      this.registerLayer(element);
-      this.checkLayerLimit();
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("Layer optimization failed:", error);
-      }
-    }
-  }
-  /**
-   * 레이어 등록
-   */
-  registerLayer(element) {
-    if (this.layerRegistry.has(element)) return;
-    this.layerRegistry.add(element);
-    this.metrics.layerCount = this.layerRegistry.size;
-    this.checkMemoryUsage();
-  }
-  /**
-   * 레이어 제거
-   */
-  removeLayer(element) {
-    if (this.layerRegistry.has(element)) {
-      this.layerRegistry.delete(element);
-      this.metrics.layerCount = this.layerRegistry.size;
-      element.style.willChange = "auto";
-      element.style.transform = "";
-      element.style.backfaceVisibility = "";
-      element.style.transformStyle = "";
-      element.style.perspective = "";
-    }
-  }
-  /**
-   * 레이어 수 제한 체크
-   */
-  checkLayerLimit() {
-    if (this.metrics.layerCount > this.config.maxLayerCount) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn(`Layer count (${this.metrics.layerCount}) exceeds limit (${this.config.maxLayerCount})`);
-      }
-      this.cleanupOldLayers();
-    }
-  }
-  /**
-   * 오래된 레이어 정리
-   */
-  cleanupOldLayers() {
-    const layersToRemove = Array.from(this.layerRegistry).slice(0, 10);
-    layersToRemove.forEach((layer) => {
-      this.removeLayer(layer);
-    });
-  }
-  /**
-   * 메모리 사용량 체크
-   */
-  checkMemoryUsage() {
-    if (!this.config.enableMemoryOptimization) return;
-    if ("memory" in performance) {
-      const memory = performance.memory;
-      this.metrics.memoryUsage = memory.usedJSHeapSize;
-      if (memory.usedJSHeapSize > this.config.memoryThreshold) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Memory usage high, cleaning up...");
-        }
-        this.cleanupMemory();
-      }
-    }
-  }
-  /**
-   * 메모리 정리
-   */
-  cleanupMemory() {
-    if ("gc" in window) {
-      try {
-        window.gc();
-      } catch (error) {
-      }
-    }
-    this.cleanupOldLayers();
-  }
-  /**
-   * 성능 최적화 설정 업데이트
-   */
-  updateConfig(newConfig) {
-    this.config = { ...this.config, ...newConfig };
-    if (!this.config.enableGPUAcceleration) {
-      this.disableAllGPUAcceleration();
-    }
-    if (!this.config.enableLayerSeparation) {
-      this.disableAllLayers();
-    }
-  }
-  /**
-   * 모든 GPU 가속 비활성화
-   */
-  disableAllGPUAcceleration() {
-    this.layerRegistry.forEach((element) => {
-      element.style.willChange = "auto";
-      element.style.transform = "";
-    });
-  }
-  /**
-   * 모든 레이어 비활성화
-   */
-  disableAllLayers() {
-    this.layerRegistry.forEach((element) => {
-      this.removeLayer(element);
-    });
-  }
-  /**
-   * 성능 메트릭 가져오기
-   */
-  getMetrics() {
-    return { ...this.metrics };
-  }
-  /**
-   * 성능 모니터링 시작
-   */
-  startMonitoring() {
-    if (this.isMonitoring) return;
-    this.isMonitoring = true;
-    this.monitoringInterval = setInterval(() => {
-      this.updateMetrics();
-    }, 1e3);
-  }
-  /**
-   * 성능 모니터링 중지
-   */
-  stopMonitoring() {
-    if (!this.isMonitoring) return;
-    this.isMonitoring = false;
-    if (this.monitoringInterval) {
-      clearInterval(this.monitoringInterval);
-      this.monitoringInterval = void 0;
-    }
-  }
-  /**
-   * 메트릭 업데이트
-   */
-  updateMetrics() {
-    if ("memory" in performance) {
-      const memory = performance.memory;
-      this.metrics.memoryUsage = memory.usedJSHeapSize;
-    }
-    this.metrics.layerCount = this.layerRegistry.size;
-  }
-  /**
-   * 성능 리포트 생성
-   */
-  generateReport() {
-    const metrics = this.getMetrics();
-    return `
-=== HUA Motion Performance Report ===
-FPS: ${metrics.fps}
-Active Layers: ${metrics.layerCount}
-Memory Usage: ${this.formatBytes(metrics.memoryUsage || 0)}
-Active Motions: ${metrics.activeMotions}
-GPU Acceleration: ${this.config.enableGPUAcceleration ? "Enabled" : "Disabled"}
-Layer Separation: ${this.config.enableLayerSeparation ? "Enabled" : "Disabled"}
-Memory Optimization: ${this.config.enableMemoryOptimization ? "Enabled" : "Disabled"}
-=====================================
-    `.trim();
-  }
-  /**
-   * 바이트 단위 포맷팅
-   */
-  formatBytes(bytes) {
-    if (bytes === 0) return "0 B";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-  }
-  /**
-   * 성능 최적화 권장사항
-   */
-  getOptimizationRecommendations() {
-    const recommendations = [];
-    const metrics = this.getMetrics();
-    if (metrics.fps < this.config.targetFPS) {
-      recommendations.push("FPS\uAC00 \uB0AE\uC2B5\uB2C8\uB2E4. GPU \uAC00\uC18D\uC744 \uD65C\uC131\uD654\uD558\uAC70\uB098 \uB808\uC774\uC5B4 \uC218\uB97C \uC904\uC774\uC138\uC694.");
-    }
-    if (metrics.layerCount > this.config.maxLayerCount * 0.8) {
-      recommendations.push("\uB808\uC774\uC5B4 \uC218\uAC00 \uB9CE\uC2B5\uB2C8\uB2E4. \uBD88\uD544\uC694\uD55C \uB808\uC774\uC5B4\uB97C \uC815\uB9AC\uD558\uC138\uC694.");
-    }
-    if (metrics.memoryUsage && metrics.memoryUsage > this.config.memoryThreshold * 0.8) {
-      recommendations.push("\uBA54\uBAA8\uB9AC \uC0AC\uC6A9\uB7C9\uC774 \uB192\uC2B5\uB2C8\uB2E4. \uBA54\uBAA8\uB9AC \uC815\uB9AC\uB97C \uACE0\uB824\uD558\uC138\uC694.");
-    }
-    return recommendations;
-  }
-  /**
-   * 정리
-   */
-  destroy() {
-    this.stopMonitoring();
-    if (this.performanceObserver) {
-      this.performanceObserver.disconnect();
-      this.performanceObserver = null;
-    }
-    this.layerRegistry.forEach((element) => {
-      this.removeLayer(element);
-    });
-    this.layerRegistry.clear();
-  }
-};
-var performanceOptimizer = PerformanceOptimizer.getInstance();
-
-// src/presets/index.ts
-var MOTION_PRESETS = {
-  hero: {
-    entrance: "fadeIn",
-    delay: 200,
-    duration: 800,
-    hover: false,
-    click: false
-  },
-  title: {
-    entrance: "slideUp",
-    delay: 400,
-    duration: 700,
-    hover: false,
-    click: false
-  },
-  button: {
-    entrance: "scaleIn",
-    delay: 600,
-    duration: 300,
-    hover: true,
-    click: true
-  },
-  card: {
-    entrance: "slideUp",
-    delay: 800,
-    duration: 500,
-    hover: true,
-    click: false
-  },
-  text: {
-    entrance: "fadeIn",
-    delay: 200,
-    duration: 600,
-    hover: false,
-    click: false
-  },
-  image: {
-    entrance: "scaleIn",
-    delay: 400,
-    duration: 600,
-    hover: true,
-    click: false
-  }
-};
-var PAGE_MOTIONS = {
-  // 홈페이지
-  home: {
-    hero: { type: "hero" },
-    title: { type: "title" },
-    description: { type: "text" },
-    cta: { type: "button" },
-    feature1: { type: "card" },
-    feature2: { type: "card" },
-    feature3: { type: "card" }
-  },
-  // 대시보드
-  dashboard: {
-    header: { type: "hero" },
-    sidebar: { type: "card", entrance: "slideLeft" },
-    main: { type: "text", entrance: "fadeIn" },
-    card1: { type: "card" },
-    card2: { type: "card" },
-    card3: { type: "card" },
-    chart: { type: "image" }
-  },
-  // 제품 페이지
-  product: {
-    hero: { type: "hero" },
-    title: { type: "title" },
-    image: { type: "image" },
-    description: { type: "text" },
-    price: { type: "text" },
-    buyButton: { type: "button" },
-    features: { type: "card" }
-  },
-  // 블로그
-  blog: {
-    header: { type: "hero" },
-    title: { type: "title" },
-    content: { type: "text" },
-    sidebar: { type: "card", entrance: "slideRight" },
-    related1: { type: "card" },
-    related2: { type: "card" },
-    related3: { type: "card" }
-  }
-};
-function mergeWithPreset(preset, custom = {}) {
-  return {
-    ...preset,
-    ...custom
-  };
-}
-function getPagePreset(pageType) {
-  return PAGE_MOTIONS[pageType];
-}
-function getMotionPreset(type) {
-  return MOTION_PRESETS[type] || MOTION_PRESETS.text;
-}
-
-// src/hooks/useSimplePageMotion.ts
-function useSimplePageMotion(pageType) {
-  const config = getPagePreset(pageType);
-  return useSimplePageMotions(config);
-}
-function useSimplePageMotions(config) {
-  const [motions, setMotions] = react.useState(/* @__PURE__ */ new Map());
-  const observersRef = react.useRef(/* @__PURE__ */ new Map());
-  const calculateMotionValues = react.useCallback((isVisible, elementConfig) => {
-    const preset = getMotionPreset(elementConfig.type);
-    mergeWithPreset(preset, elementConfig);
-    const opacity = isVisible ? 1 : 0;
-    const translateY = isVisible ? 0 : 20;
-    const translateX = 0;
-    const scale = isVisible ? 1 : 0.95;
-    return { opacity, translateY, translateX, scale };
-  }, []);
-  react.useEffect(() => {
-    const newMotions = /* @__PURE__ */ new Map();
-    Object.entries(config).forEach(([elementId, elementConfig]) => {
-      const ref = { current: null };
-      const { opacity, translateY, translateX, scale } = calculateMotionValues(false, elementConfig);
-      newMotions.set(elementId, {
-        ref,
-        style: {
-          opacity,
-          transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
-          transition: `all ${elementConfig.duration || 700}ms ease-out`,
-          pointerEvents: "auto",
-          willChange: "transform, opacity"
-        },
-        isVisible: false,
-        isHovered: false,
-        isClicked: false
-      });
-    });
-    setMotions(newMotions);
-  }, [config, calculateMotionValues]);
-  react.useEffect(() => {
-    const visibleElements = /* @__PURE__ */ new Set();
-    Object.entries(config).forEach(([elementId, elementConfig]) => {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && !visibleElements.has(elementId)) {
-              visibleElements.add(elementId);
-              const preset = getMotionPreset(elementConfig.type);
-              const mergedConfig = mergeWithPreset(preset, elementConfig);
-              const delay = mergedConfig.delay || 0;
-              setTimeout(() => {
-                const { opacity, translateY, translateX, scale } = calculateMotionValues(true, elementConfig);
-                setMotions((prev) => {
-                  const current = prev.get(elementId);
-                  if (!current) return prev;
-                  const newMotion = {
-                    ...current,
-                    style: {
-                      ...current.style,
-                      opacity,
-                      transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
-                    },
-                    isVisible: true
-                  };
-                  const newMap = new Map(prev);
-                  newMap.set(elementId, newMotion);
-                  return newMap;
-                });
-                if (process.env.NODE_ENV === "development") {
-                  console.log("\uBAA8\uC158 \uC2E4\uD589:", elementId, "delay:", delay);
-                }
-              }, delay);
-              observer.unobserve(entry.target);
-            }
-          });
-        },
-        { threshold: elementConfig.threshold || 0.1 }
-      );
-      observersRef.current.set(elementId, observer);
-    });
-    const timer = setTimeout(() => {
-      Object.entries(config).forEach(([elementId]) => {
-        const observer = observersRef.current.get(elementId);
-        if (observer) {
-          const element = document.querySelector(`[data-motion-id="${elementId}"]`);
-          if (element) {
-            observer.observe(element);
-          }
-        }
-      });
-    }, 100);
-    return () => {
-      clearTimeout(timer);
-      observersRef.current.forEach((observer) => observer.disconnect());
-      observersRef.current.clear();
-    };
-  }, [config, calculateMotionValues]);
-  const getPageMotionRefs = react.useCallback(() => {
-    const result = {};
-    motions.forEach((motion, elementId) => {
-      result[elementId] = motion;
-    });
-    return result;
-  }, [motions]);
-  return getPageMotionRefs();
-}
-
-// src/managers/MotionStateManager.ts
-var MotionStateManager = class {
-  constructor() {
-    this.states = /* @__PURE__ */ new Map();
-    this.listeners = /* @__PURE__ */ new Map();
-  }
-  /**
-   * 요소의 상태를 초기화
-   */
-  initializeElement(elementId, config) {
-    const initialState = {
-      internalVisibility: false,
-      // 초기에 숨김 상태로 시작 (스크롤 리빌용)
-      triggeredVisibility: false,
-      // Intersection Observer가 아직 트리거되지 않음
-      finalVisibility: false,
-      // 초기에 숨김 상태로 시작
-      opacity: 0,
-      // 초기에 투명 상태로 시작
-      translateY: 20,
-      // 초기에 아래로 이동된 상태로 시작
-      translateX: 0,
-      scale: 0.95,
-      // 초기에 약간 축소된 상태로 시작
-      rotation: 0,
-      isHovered: false,
-      isClicked: false,
-      isAnimating: false
-    };
-    this.states.set(elementId, initialState);
-    this.computeFinalState(elementId);
-  }
-  /**
-   * 내부 가시성 상태 업데이트 (초기화, 리셋 등)
-   */
-  setInternalVisibility(elementId, visible) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    state.internalVisibility = visible;
-    this.computeFinalState(elementId);
-    this.notifyListeners(elementId, state);
-  }
-  /**
-   * 외부 트리거 가시성 상태 업데이트 (Intersection Observer)
-   */
-  setTriggeredVisibility(elementId, visible) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    state.triggeredVisibility = visible;
-    this.computeFinalState(elementId);
-    this.notifyListeners(elementId, state);
-  }
-  /**
-   * 모션 값 업데이트
-   */
-  updateMotionValues(elementId, values) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    Object.assign(state, values);
-    this.notifyListeners(elementId, state);
-  }
-  /**
-   * 최종 상태 계산
-   */
-  computeFinalState(elementId) {
-    const state = this.states.get(elementId);
-    if (!state) return;
-    state.finalVisibility = state.internalVisibility || state.triggeredVisibility;
-    state.isAnimating = state.finalVisibility && (state.opacity < 1 || state.translateY > 0);
-  }
-  /**
-   * 현재 상태 조회
-   */
-  getState(elementId) {
-    return this.states.get(elementId);
-  }
-  /**
-   * 모든 상태 조회
-   */
-  getAllStates() {
-    return new Map(this.states);
-  }
-  /**
-   * 상태 변경 리스너 등록
-   */
-  subscribe(elementId, listener) {
-    if (!this.listeners.has(elementId)) {
-      this.listeners.set(elementId, /* @__PURE__ */ new Set());
-    }
-    this.listeners.get(elementId).add(listener);
-    return () => {
-      const listeners = this.listeners.get(elementId);
-      if (listeners) {
-        listeners.delete(listener);
-      }
-    };
-  }
-  /**
-   * 리스너들에게 상태 변경 알림
-   */
-  notifyListeners(elementId, state) {
-    const listeners = this.listeners.get(elementId);
-    if (!listeners) return;
-    listeners.forEach((listener) => {
-      try {
-        listener(state);
-      } catch (error) {
-        if (process.env.NODE_ENV === "development") {
-          console.error(`MotionStateManager listener error for ${elementId}:`, error);
-        }
-      }
-    });
-  }
-  /**
-   * 모든 상태 초기화
-   */
-  reset() {
-    this.states.clear();
-    this.listeners.clear();
-  }
-  /**
-   * 특정 요소 상태 초기화
-   */
-  resetElement(elementId) {
-    this.states.delete(elementId);
-    this.listeners.delete(elementId);
-  }
-  /**
-   * 디버그용 상태 출력
-   */
-  debug() {
-    if (process.env.NODE_ENV === "development") {
-      console.log("MotionStateManager Debug:");
-      this.states.forEach((state, elementId) => {
-        console.log(`  ${elementId}:`, {
-          internalVisibility: state.internalVisibility,
-          triggeredVisibility: state.triggeredVisibility,
-          finalVisibility: state.finalVisibility,
-          opacity: state.opacity,
-          translateY: state.translateY,
-          isAnimating: state.isAnimating
-        });
-      });
-    }
-  }
-};
-var motionStateManager = new MotionStateManager();
-
-// src/hooks/usePageMotions.ts
-function usePageMotions(config) {
-  const [motions, setMotions] = react.useState(/* @__PURE__ */ new Map());
-  const observersRef = react.useRef(/* @__PURE__ */ new Map());
-  const unsubscribeRef = react.useRef(/* @__PURE__ */ new Map());
-  const [resetKey, setResetKey] = react.useState(0);
-  const reset = react.useCallback(() => {
-    observersRef.current.forEach((observer) => observer.disconnect());
-    observersRef.current.clear();
-    unsubscribeRef.current.forEach((unsubscribe) => unsubscribe());
-    unsubscribeRef.current.clear();
-    motionStateManager.reset();
-    setMotions(/* @__PURE__ */ new Map());
-    setResetKey((prev) => prev + 1);
-  }, []);
-  const calculateMotionValues = react.useCallback((state, elementConfig) => {
-    const preset = getMotionPreset(elementConfig.type);
-    const mergedConfig = mergeWithPreset(preset, elementConfig);
-    let opacity = state.finalVisibility ? 1 : 0;
-    let translateY = state.finalVisibility ? 0 : 20;
-    const translateX = 0;
-    let scale = state.finalVisibility ? 1 : 0.95;
-    if (mergedConfig.hover && state.isHovered) {
-      scale *= 1.1;
-      translateY -= 5;
-      opacity = 0.9;
-    }
-    if (mergedConfig.click && state.isClicked) {
-      scale *= 0.9;
-      translateY += 3;
-      opacity = 0.8;
-    }
-    return { opacity, translateY, translateX, scale };
-  }, []);
-  const updateMotionState = react.useCallback((elementId, updates) => {
-    const currentState = motionStateManager.getState(elementId);
-    if (!currentState) return;
-    if (updates.opacity !== void 0 || updates.translateY !== void 0 || updates.translateX !== void 0 || updates.scale !== void 0) {
-      motionStateManager.updateMotionValues(elementId, updates);
-    }
-    if (updates.isHovered !== void 0) {
-      currentState.isHovered = updates.isHovered;
-      motionStateManager.notifyListeners(elementId, currentState);
-    }
-    if (updates.isClicked !== void 0) {
-      currentState.isClicked = updates.isClicked;
-      motionStateManager.notifyListeners(elementId, currentState);
-    }
-  }, []);
-  react.useEffect(() => {
-    const newMotions = /* @__PURE__ */ new Map();
-    if (!config || typeof config !== "object") {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("usePageMotions: config\uAC00 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4:", config);
-      }
-      return;
-    }
-    motionStateManager.reset();
-    Object.entries(config).forEach(([elementId, elementConfig]) => {
-      const ref = { current: null };
-      motionStateManager.initializeElement(elementId, elementConfig);
-      const initialState = motionStateManager.getState(elementId);
-      if (process.env.NODE_ENV === "development") {
-        console.log(`\uCD08\uAE30 \uC0C1\uD0DC [${elementId}]:`, initialState);
-      }
-      const { opacity, translateY, translateX, scale } = calculateMotionValues(initialState, elementConfig);
-      newMotions.set(elementId, {
-        ref,
-        style: {
-          opacity,
-          transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
-          transition: `all ${elementConfig.duration || 700}ms ease-out`,
-          pointerEvents: "auto",
-          willChange: "transform, opacity"
-        },
-        isVisible: initialState.finalVisibility,
-        isHovered: initialState.isHovered,
-        isClicked: initialState.isClicked
-      });
-      const unsubscribe = motionStateManager.subscribe(elementId, (newState) => {
-        const { opacity: opacity2, translateY: translateY2, translateX: translateX2, scale: scale2 } = calculateMotionValues(newState, elementConfig);
-        setMotions((prev) => {
-          const current = prev.get(elementId);
-          if (!current) return prev;
-          const transform = `translate(${translateX2}px, ${translateY2}px) scale(${scale2})`;
-          const hasChanged = current.style.opacity !== opacity2 || current.style.transform !== transform || current.isVisible !== newState.finalVisibility || current.isHovered !== newState.isHovered || current.isClicked !== newState.isClicked;
-          if (!hasChanged) return prev;
-          const newMotion = {
-            ...current,
-            style: {
-              ...current.style,
-              opacity: opacity2,
-              transform
-            },
-            isVisible: newState.finalVisibility,
-            isHovered: newState.isHovered,
-            isClicked: newState.isClicked
-          };
-          const newMap = new Map(prev);
-          newMap.set(elementId, newMotion);
-          return newMap;
-        });
-      });
-      unsubscribeRef.current.set(elementId, unsubscribe);
-    });
-    setMotions(newMotions);
-    return () => {
-      unsubscribeRef.current.forEach((unsubscribe) => unsubscribe());
-      unsubscribeRef.current.clear();
-      motionStateManager.reset();
-    };
-  }, [config, resetKey]);
-  react.useEffect(() => {
-    const visibleElements = /* @__PURE__ */ new Set();
-    if (!config || typeof config !== "object") {
-      return;
-    }
-    Object.entries(config).forEach(([elementId, elementConfig]) => {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && !visibleElements.has(elementId)) {
-              visibleElements.add(elementId);
-              const preset = getMotionPreset(elementConfig.type);
-              const mergedConfig = mergeWithPreset(preset, elementConfig);
-              const delay = mergedConfig.delay || 0;
-              setTimeout(() => {
-                motionStateManager.setTriggeredVisibility(elementId, true);
-                if (process.env.NODE_ENV === "development") {
-                  console.log("\uBAA8\uC158 \uC2E4\uD589:", elementId, "delay:", delay);
-                }
-              }, delay);
-              observer.unobserve(entry.target);
-            }
-          });
-        },
-        {
-          threshold: elementConfig.threshold || 0.3,
-          // 30% 보여야 실행
-          rootMargin: "0px 0px -50px 0px"
-          // 하단에서 50px 전에 실행
-        }
-      );
-      observersRef.current.set(elementId, observer);
-    });
-    const timer = setTimeout(() => {
-      if (!config || typeof config !== "object") {
-        return;
-      }
-      Object.entries(config).forEach(([elementId]) => {
-        const observer = observersRef.current.get(elementId);
-        if (observer) {
-          const element = document.querySelector(`[data-motion-id="${elementId}"]`);
-          if (element) {
-            observer.observe(element);
-          }
-        }
-      });
-    }, 100);
-    return () => {
-      clearTimeout(timer);
-      observersRef.current.forEach((observer) => observer.disconnect());
-      observersRef.current.clear();
-    };
-  }, [config, resetKey]);
-  react.useEffect(() => {
-    if (!config || typeof config !== "object") {
-      return;
-    }
-    const handleMouseEnter = (event) => {
-      const target = event.target;
-      if (!target) return;
-      let element = target;
-      let elementId = null;
-      while (element && element !== document.body) {
-        if (element.getAttribute && typeof element.getAttribute === "function") {
-          elementId = element.getAttribute("data-motion-id");
-          if (elementId) break;
-        }
-        element = element.parentElement;
-      }
-      if (elementId && config[elementId]?.hover) {
-        if (process.env.NODE_ENV === "development") {
-          console.log("\uD638\uBC84 \uC2DC\uC791:", elementId);
-        }
-        updateMotionState(elementId, { isHovered: true });
-      }
-    };
-    const handleMouseLeave = (event) => {
-      const target = event.target;
-      if (!target) return;
-      let element = target;
-      let elementId = null;
-      while (element && element !== document.body) {
-        if (element.getAttribute && typeof element.getAttribute === "function") {
-          elementId = element.getAttribute("data-motion-id");
-          if (elementId) break;
-        }
-        element = element.parentElement;
-      }
-      if (elementId && config[elementId]?.hover) {
-        if (process.env.NODE_ENV === "development") {
-          console.log("\uD638\uBC84 \uC885\uB8CC:", elementId);
-        }
-        updateMotionState(elementId, { isHovered: false });
-      }
-    };
-    const handleMouseDown = (event) => {
-      const target = event.target;
-      if (!target) return;
-      let element = target;
-      let elementId = null;
-      while (element && element !== document.body) {
-        if (element.getAttribute && typeof element.getAttribute === "function") {
-          elementId = element.getAttribute("data-motion-id");
-          if (elementId) break;
-        }
-        element = element.parentElement;
-      }
-      if (elementId && config[elementId]?.click) {
-        if (process.env.NODE_ENV === "development") {
-          console.log("\uD074\uB9AD \uC2DC\uC791:", elementId);
-        }
-        updateMotionState(elementId, { isClicked: true });
-      }
-    };
-    const handleMouseUp = (event) => {
-      const target = event.target;
-      if (!target) return;
-      let element = target;
-      let elementId = null;
-      while (element && element !== document.body) {
-        if (element.getAttribute && typeof element.getAttribute === "function") {
-          elementId = element.getAttribute("data-motion-id");
-          if (elementId) break;
-        }
-        element = element.parentElement;
-      }
-      if (elementId && config[elementId]?.click) {
-        if (process.env.NODE_ENV === "development") {
-          console.log("\uD074\uB9AD \uC885\uB8CC:", elementId);
-        }
-        updateMotionState(elementId, { isClicked: false });
-      }
-    };
-    const timer = setTimeout(() => {
-      document.addEventListener("mouseenter", handleMouseEnter, false);
-      document.addEventListener("mouseleave", handleMouseLeave, false);
-      document.addEventListener("mousedown", handleMouseDown, false);
-      document.addEventListener("mouseup", handleMouseUp, false);
-    }, 200);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener("mouseenter", handleMouseEnter, false);
-      document.removeEventListener("mouseleave", handleMouseLeave, false);
-      document.removeEventListener("mousedown", handleMouseDown, false);
-      document.removeEventListener("mouseup", handleMouseUp, false);
-    };
-  }, [config]);
-  const getPageMotionRefs = react.useCallback(() => {
-    const result = {};
-    motions.forEach((motion, elementId) => {
-      result[elementId] = motion;
-    });
-    return result;
-  }, [motions]);
-  return {
-    ...getPageMotionRefs(),
-    reset
-  };
-}
-function useSmartMotion(options = {}) {
-  const {
-    type = "text",
-    entrance: customEntrance,
-    hover: customHover,
-    click: customClick,
-    delay: customDelay,
-    duration: customDuration,
-    threshold = 0.1,
-    autoLanguageSync = false
-  } = options;
-  const getPresetConfig = react.useCallback(() => {
-    return MOTION_PRESETS[type] || MOTION_PRESETS.text;
-  }, [type]);
-  const preset = getPresetConfig();
-  const entrance = customEntrance || preset.entrance;
-  const hover = customHover !== void 0 ? customHover : preset.hover;
-  const click = customClick !== void 0 ? customClick : preset.click;
-  const delay = customDelay !== void 0 ? customDelay : preset.delay;
-  const duration = customDuration !== void 0 ? customDuration : preset.duration;
-  const elementRef = react.useRef(null);
-  const getInitialMotionValues = () => {
-    const initialState = {
-      isVisible: false,
-      isHovered: false,
-      isClicked: false,
-      opacity: 0,
-      translateY: 0,
-      translateX: 0,
-      scale: 1
-    };
-    switch (entrance) {
-      case "fadeIn":
-        initialState.opacity = 0;
-        break;
-      case "slideUp":
-        initialState.opacity = 0;
-        initialState.translateY = 20;
-        break;
-      case "slideLeft":
-        initialState.opacity = 0;
-        initialState.translateX = -20;
-        break;
-      case "slideRight":
-        initialState.opacity = 0;
-        initialState.translateX = 20;
-        break;
-      case "scaleIn":
-        initialState.opacity = 0;
-        initialState.scale = 0.8;
-        break;
-      case "bounceIn":
-        initialState.opacity = 0;
-        initialState.scale = 0.5;
-        break;
-    }
-    return initialState;
-  };
-  const [state, setState] = react.useState(() => {
-    const initialValues = getInitialMotionValues();
-    if (threshold === 0) {
-      initialValues.isVisible = true;
-      initialValues.opacity = 1;
-      initialValues.translateY = 0;
-      initialValues.translateX = 0;
-      initialValues.scale = 1;
-    }
-    return initialValues;
-  });
-  const calculateMotionValues = react.useCallback((currentState) => {
-    const { isVisible, isHovered, isClicked } = currentState;
-    let opacity = 0;
-    let translateY = 0;
-    let translateX = 0;
-    let scale = 1;
-    if (isVisible) {
-      opacity = 1;
-      switch (entrance) {
-        case "fadeIn":
-          break;
-        case "slideUp":
-          translateY = 0;
-          break;
-        case "slideLeft":
-          translateX = 0;
-          break;
-        case "slideRight":
-          translateX = 0;
-          break;
-        case "scaleIn":
-          scale = 1;
-          break;
-        case "bounceIn":
-          scale = 1;
-          break;
-      }
-    } else {
-      switch (entrance) {
-        case "fadeIn":
-          opacity = 0;
-          break;
-        case "slideUp":
-          opacity = 0;
-          translateY = 20;
-          break;
-        case "slideLeft":
-          opacity = 0;
-          translateX = -20;
-          break;
-        case "slideRight":
-          opacity = 0;
-          translateX = 20;
-          break;
-        case "scaleIn":
-          opacity = 0;
-          scale = 0.8;
-          break;
-        case "bounceIn":
-          opacity = 0;
-          scale = 0.5;
-          break;
-      }
-    }
-    if (hover && isHovered) {
-      scale *= 1.1;
-      translateY -= 5;
-    }
-    if (click && isClicked) {
-      scale *= 0.85;
-      translateY += 3;
-    }
-    return { opacity, translateY, translateX, scale };
-  }, [entrance, hover, click]);
-  react.useEffect(() => {
-    if (!elementRef.current) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setTimeout(() => {
-              setState((prev) => ({ ...prev, isVisible: true }));
-            }, delay);
-          }
-        });
-      },
-      { threshold }
-    );
-    observer.observe(elementRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [delay, threshold]);
-  react.useEffect(() => {
-    if (!hover || !elementRef.current) return;
-    const element = elementRef.current;
-    const handleMouseEnter = () => {
-      setState((prev) => ({ ...prev, isHovered: true }));
-    };
-    const handleMouseLeave = () => {
-      setState((prev) => ({ ...prev, isHovered: false }));
-    };
-    element.addEventListener("mouseenter", handleMouseEnter);
-    element.addEventListener("mouseleave", handleMouseLeave);
-    return () => {
-      element.removeEventListener("mouseenter", handleMouseEnter);
-      element.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, [hover]);
-  react.useEffect(() => {
-    if (!click || !elementRef.current) return;
-    const element = elementRef.current;
-    const handleClick = () => {
-      setState((prev) => ({ ...prev, isClicked: true }));
-      setTimeout(() => {
-        setState((prev) => ({ ...prev, isClicked: false }));
-      }, 300);
-    };
-    element.addEventListener("click", handleClick);
-    return () => {
-      element.removeEventListener("click", handleClick);
-    };
-  }, [click]);
-  react.useEffect(() => {
-    setState((prev) => {
-      const { opacity, translateY, translateX, scale } = calculateMotionValues(prev);
-      if (prev.opacity === opacity && prev.translateY === translateY && prev.translateX === translateX && prev.scale === scale) {
-        return prev;
-      }
-      return { ...prev, opacity, translateY, translateX, scale };
-    });
-  }, [state.isVisible, state.isHovered, state.isClicked, calculateMotionValues]);
-  react.useEffect(() => {
-    if (!autoLanguageSync) return;
-    const handleLanguageChange = () => {
-      setState((prev) => ({ ...prev, isVisible: false }));
-      setTimeout(() => {
-        setState((prev) => ({ ...prev, isVisible: true }));
-      }, 100);
-    };
-    window.addEventListener("storage", handleLanguageChange);
-    return () => {
-      window.removeEventListener("storage", handleLanguageChange);
-    };
-  }, [autoLanguageSync]);
-  const motionStyle = react.useMemo(() => ({
-    opacity: state.opacity,
-    transform: `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`,
-    transition: `all ${duration}ms ease-out`,
-    // CSS transition과 충돌 방지
-    pointerEvents: "auto",
-    // 강제로 스타일 적용
-    willChange: "transform, opacity"
-  }), [state.opacity, state.translateX, state.translateY, state.scale, duration]);
-  return {
-    ref: elementRef,
-    style: motionStyle,
-    isVisible: state.isVisible,
-    isHovered: state.isHovered,
-    isClicked: state.isClicked
-  };
-}
-function getInitialStyle(type, distance) {
-  switch (type) {
-    case "slideUp":
-      return { opacity: 0, transform: `translateY(${distance}px)` };
-    case "slideLeft":
-      return { opacity: 0, transform: `translateX(${distance}px)` };
-    case "slideRight":
-      return { opacity: 0, transform: `translateX(-${distance}px)` };
-    case "scaleIn":
-      return { opacity: 0, transform: "scale(0)" };
-    case "bounceIn":
-      return { opacity: 0, transform: "scale(0)" };
-    case "fadeIn":
-    default:
-      return { opacity: 0, transform: "none" };
-  }
-}
-function getVisibleStyle() {
-  return { opacity: 1, transform: "none" };
-}
-function getEasingForType(type, easing2) {
-  if (easing2) return easing2;
-  if (type === "bounceIn") return "cubic-bezier(0.34, 1.56, 0.64, 1)";
-  return "ease-out";
-}
-function getMultiEffectInitialStyle(effects, defaultDistance) {
-  const style = {};
-  const transforms = [];
-  if (effects.fade) {
-    style.opacity = 0;
-  }
-  if (effects.slide) {
-    const config = typeof effects.slide === "object" ? effects.slide : {};
-    const direction = config.direction ?? "up";
-    const distance = config.distance ?? defaultDistance;
-    switch (direction) {
-      case "up":
-        transforms.push(`translateY(${distance}px)`);
-        break;
-      case "down":
-        transforms.push(`translateY(-${distance}px)`);
-        break;
-      case "left":
-        transforms.push(`translateX(${distance}px)`);
-        break;
-      case "right":
-        transforms.push(`translateX(-${distance}px)`);
-        break;
-    }
-    if (!effects.fade) style.opacity = 0;
-  }
-  if (effects.scale) {
-    const config = typeof effects.scale === "object" ? effects.scale : {};
-    const from = config.from ?? 0.95;
-    transforms.push(`scale(${from})`);
-    if (!effects.fade && !effects.slide) style.opacity = 0;
-  }
-  if (effects.bounce) {
-    transforms.push("scale(0)");
-    if (!effects.fade && !effects.slide && !effects.scale) style.opacity = 0;
-  }
-  if (transforms.length > 0) {
-    style.transform = transforms.join(" ");
-  } else {
-    style.transform = "none";
-  }
-  if (effects.fade && transforms.length === 0) {
-    style.transform = "none";
-  }
-  return style;
-}
-function getMultiEffectVisibleStyle(effects) {
-  const style = {};
-  if (effects.fade) {
-    const config = typeof effects.fade === "object" ? effects.fade : {};
-    style.opacity = config.targetOpacity ?? 1;
-  } else {
-    style.opacity = 1;
-  }
-  if (effects.scale) {
-    const config = typeof effects.scale === "object" ? effects.scale : {};
-    style.transform = `scale(${config.to ?? 1})`;
-  } else {
-    style.transform = "none";
-  }
-  return style;
-}
-function getMultiEffectEasing(effects, easing2) {
-  if (easing2) return easing2;
-  if (effects.bounce) return "cubic-bezier(0.34, 1.56, 0.64, 1)";
-  return "ease-out";
-}
-function useUnifiedMotion(options) {
-  const {
-    type,
-    effects,
-    duration = 600,
-    autoStart = true,
-    delay = 0,
-    easing: easing2,
-    threshold = 0.1,
-    triggerOnce = true,
-    distance = 50,
-    onComplete,
-    onStart,
-    onStop,
-    onReset
-  } = options;
-  const resolvedType = type ?? "fadeIn";
-  const resolvedEasing = getEasingForType(resolvedType, easing2);
-  const ref = react.useRef(null);
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [progress, setProgress] = react.useState(0);
-  const observerRef = react.useRef(null);
-  const timeoutRef = react.useRef(null);
-  const startRef = react.useRef(() => {
-  });
-  const start = react.useCallback(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    setProgress(0);
-    onStart?.();
-    timeoutRef.current = window.setTimeout(() => {
-      setIsVisible(true);
-      setProgress(1);
-      setIsAnimating(false);
-      onComplete?.();
-    }, delay);
-  }, [isAnimating, delay, onStart, onComplete]);
-  startRef.current = start;
-  const stop = react.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setIsAnimating(false);
-    onStop?.();
-  }, [onStop]);
-  const reset = react.useCallback(() => {
-    stop();
-    setIsVisible(false);
-    setProgress(0);
-    onReset?.();
-  }, [stop, onReset]);
-  react.useEffect(() => {
-    if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
-      },
-      { threshold }
-    );
-    observerRef.current.observe(ref.current);
-    return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [autoStart, threshold, triggerOnce]);
-  react.useEffect(() => {
-    return () => stop();
-  }, [stop]);
-  const style = react.useMemo(() => {
-    if (effects) {
-      const base2 = isVisible ? getMultiEffectVisibleStyle(effects) : getMultiEffectInitialStyle(effects, distance);
-      const resolvedEasingMulti = getMultiEffectEasing(effects, easing2);
-      return {
-        ...base2,
-        transition: `all ${duration}ms ${resolvedEasingMulti}`,
-        "--motion-delay": `${delay}ms`,
-        "--motion-duration": `${duration}ms`,
-        "--motion-easing": resolvedEasingMulti,
-        "--motion-progress": `${progress}`
-      };
-    }
-    const base = isVisible ? getVisibleStyle() : getInitialStyle(resolvedType, distance);
-    return {
-      ...base,
-      transition: `all ${duration}ms ${resolvedEasing}`,
-      "--motion-delay": `${delay}ms`,
-      "--motion-duration": `${duration}ms`,
-      "--motion-easing": resolvedEasing,
-      "--motion-progress": `${progress}`
-    };
-  }, [isVisible, type, effects, distance, duration, resolvedEasing, easing2, delay, progress, resolvedType]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress,
-    start,
-    stop,
-    reset
-  };
-}
-function useFadeIn(options = {}) {
-  const {
-    delay = 0,
-    duration = 700,
-    threshold = 0.1,
-    triggerOnce = true,
-    easing: easing2 = "ease-out",
-    autoStart = true,
-    initialOpacity = 0,
-    targetOpacity = 1,
-    onComplete,
-    onStart,
-    onStop,
-    onReset
-  } = options;
-  const ref = react.useRef(null);
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [progress, setProgress] = react.useState(0);
-  const [nodeReady, setNodeReady] = react.useState(false);
-  const observerRef = react.useRef(null);
-  const motionRef = react.useRef(null);
-  const timeoutRef = react.useRef(null);
-  const startRef = react.useRef(() => {
-  });
-  react.useEffect(() => {
-    if (nodeReady) return;
-    if (ref.current) {
-      setNodeReady(true);
-      return;
-    }
-    const id = setInterval(() => {
-      if (ref.current) {
-        setNodeReady(true);
-        clearInterval(id);
-      }
-    }, 50);
-    return () => clearInterval(id);
-  }, [nodeReady]);
-  const start = react.useCallback(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    setProgress(0);
-    onStart?.();
-    if (delay > 0) {
-      timeoutRef.current = window.setTimeout(() => {
-        setIsVisible(true);
-        setProgress(1);
-        setIsAnimating(false);
-        onComplete?.();
-      }, delay);
-    } else {
-      setIsVisible(true);
-      setProgress(1);
-      setIsAnimating(false);
-      onComplete?.();
-    }
-  }, [delay, isAnimating, onStart, onComplete]);
-  startRef.current = start;
-  const stop = react.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      motionRef.current = null;
-    }
-    setIsAnimating(false);
-    onStop?.();
-  }, [onStop]);
-  const reset = react.useCallback(() => {
-    stop();
-    setIsVisible(false);
-    setProgress(0);
-    onReset?.();
-  }, [stop, onReset]);
-  react.useEffect(() => {
-    if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
-      },
-      { threshold }
-    );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [autoStart, threshold, triggerOnce, nodeReady]);
-  react.useEffect(() => {
-    if (!autoStart) {
-      start();
-    }
-  }, [autoStart, start]);
-  react.useEffect(() => {
-    return () => {
-      stop();
-    };
-  }, [stop]);
-  const style = react.useMemo(() => ({
-    opacity: isVisible ? targetOpacity : initialOpacity,
-    transition: `opacity ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`
-  }), [isVisible, targetOpacity, initialOpacity, duration, easing2, delay, progress]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress,
-    start,
-    stop,
-    reset
-  };
-}
-function useSlideUp(options = {}) {
-  const {
-    delay = 0,
-    duration = 700,
-    threshold = 0.1,
-    triggerOnce = true,
-    easing: easing2 = "ease-out",
-    autoStart = true,
-    direction = "up",
-    distance = 50,
-    onComplete,
-    onStart,
-    onStop,
-    onReset
-  } = options;
-  const ref = react.useRef(null);
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [progress, setProgress] = react.useState(0);
-  const [nodeReady, setNodeReady] = react.useState(false);
-  const observerRef = react.useRef(null);
-  const timeoutRef = react.useRef(null);
-  const startRef = react.useRef(() => {
-  });
-  react.useEffect(() => {
-    if (nodeReady) return;
-    if (ref.current) {
-      setNodeReady(true);
-      return;
-    }
-    const id = setInterval(() => {
-      if (ref.current) {
-        setNodeReady(true);
-        clearInterval(id);
-      }
-    }, 50);
-    return () => clearInterval(id);
-  }, [nodeReady]);
-  const getInitialTransform2 = react.useCallback(() => {
-    switch (direction) {
-      case "up":
-        return `translateY(${distance}px)`;
-      case "down":
-        return `translateY(-${distance}px)`;
-      case "left":
-        return `translateX(${distance}px)`;
-      case "right":
-        return `translateX(-${distance}px)`;
-      default:
-        return `translateY(${distance}px)`;
-    }
-  }, [direction, distance]);
-  const start = react.useCallback(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    setProgress(0);
-    onStart?.();
-    if (delay > 0) {
-      timeoutRef.current = window.setTimeout(() => {
-        setIsVisible(true);
-        setProgress(1);
-        setIsAnimating(false);
-        onComplete?.();
-      }, delay);
-    } else {
-      setIsVisible(true);
-      setProgress(1);
-      setIsAnimating(false);
-      onComplete?.();
-    }
-  }, [delay, isAnimating, onStart, onComplete]);
-  startRef.current = start;
-  const stop = react.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setIsAnimating(false);
-    onStop?.();
-  }, [onStop]);
-  const reset = react.useCallback(() => {
-    stop();
-    setIsVisible(false);
-    setProgress(0);
-    onReset?.();
-  }, [stop, onReset]);
-  react.useEffect(() => {
-    if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
-      },
-      { threshold }
-    );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [autoStart, threshold, triggerOnce, nodeReady]);
-  react.useEffect(() => {
-    if (!autoStart) {
-      start();
-    }
-  }, [autoStart, start]);
-  react.useEffect(() => {
-    return () => {
-      stop();
-    };
-  }, [stop]);
-  const initialTransform = react.useMemo(() => getInitialTransform2(), [getInitialTransform2]);
-  const finalTransform = react.useMemo(() => {
-    return direction === "left" || direction === "right" ? "translateX(0)" : "translateY(0)";
-  }, [direction]);
-  const style = react.useMemo(() => ({
-    opacity: isVisible ? 1 : 0,
-    transform: isVisible ? finalTransform : initialTransform,
-    transition: `opacity ${duration}ms ${easing2}, transform ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`,
-    "--motion-direction": direction,
-    "--motion-distance": `${distance}px`
-  }), [isVisible, initialTransform, finalTransform, duration, easing2, delay, progress, direction, distance]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress,
-    start,
-    stop,
-    reset
-  };
-}
-
-// src/hooks/useSlideLeft.ts
-function useSlideLeft(options = {}) {
-  return useSlideUp({ ...options, direction: "left" });
-}
-
-// src/hooks/useSlideRight.ts
-function useSlideRight(options = {}) {
-  return useSlideUp({ ...options, direction: "right" });
-}
-function useScaleIn(options = {}) {
-  const {
-    initialScale = 0,
-    targetScale = 1,
-    duration = 700,
-    delay = 0,
-    autoStart = true,
-    easing: easing2 = "ease-out",
-    threshold = 0.1,
-    triggerOnce = true,
-    onComplete,
-    onStart,
-    onStop,
-    onReset
-  } = options;
-  const ref = react.useRef(null);
-  const [scale, setScale] = react.useState(autoStart ? initialScale : targetScale);
-  const [opacity, setOpacity] = react.useState(autoStart ? 0 : 1);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [isVisible, setIsVisible] = react.useState(autoStart ? false : true);
-  const [progress, setProgress] = react.useState(autoStart ? 0 : 1);
-  const observerRef = react.useRef(null);
-  const timeoutRef = react.useRef(null);
-  const startRef = react.useRef(() => {
-  });
-  const start = react.useCallback(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    setScale(initialScale);
-    setOpacity(0);
-    setProgress(0);
-    onStart?.();
-    timeoutRef.current = window.setTimeout(() => {
-      setProgress(1);
-      setScale(targetScale);
-      setOpacity(1);
-      setIsVisible(true);
-      setIsAnimating(false);
-      onComplete?.();
-    }, delay);
-  }, [delay, initialScale, targetScale, isAnimating, onStart, onComplete]);
-  startRef.current = start;
-  const stop = react.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setIsAnimating(false);
-    onStop?.();
-  }, [onStop]);
-  const reset = react.useCallback(() => {
-    stop();
-    setScale(initialScale);
-    setOpacity(0);
-    setProgress(0);
-    setIsVisible(false);
-    if (ref.current) {
-      const element = ref.current;
-      element.style.transition = "none";
-      element.style.opacity = "0";
-      element.style.transform = `scale(${initialScale})`;
-      requestAnimationFrame(() => {
-        element.style.transition = "";
-      });
-    }
-    onReset?.();
-  }, [stop, initialScale, onReset]);
-  react.useEffect(() => {
-    if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
-      },
-      { threshold }
-    );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [autoStart, threshold, triggerOnce]);
-  react.useEffect(() => {
-    return () => {
-      stop();
-    };
-  }, [stop]);
-  const style = react.useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `all ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`
-  }), [scale, opacity, duration, easing2, delay, progress]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress,
-    start,
-    reset,
-    stop
-  };
-}
-function useBounceIn(options = {}) {
-  const {
-    duration = 600,
-    delay = 0,
-    autoStart = true,
-    intensity = 0.3,
-    threshold = 0.1,
-    triggerOnce = true,
-    easing: easing2 = "cubic-bezier(0.34, 1.56, 0.64, 1)",
-    // 바운스 이징
-    onComplete,
-    onStart,
-    onStop,
-    onReset
-  } = options;
-  const ref = react.useRef(null);
-  const [scale, setScale] = react.useState(autoStart ? 0 : 1);
-  const [opacity, setOpacity] = react.useState(autoStart ? 0 : 1);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [isVisible, setIsVisible] = react.useState(autoStart ? false : true);
-  const [progress, setProgress] = react.useState(autoStart ? 0 : 1);
-  const observerRef = react.useRef(null);
-  const timeoutRef = react.useRef(null);
-  const bounceTimeoutRef = react.useRef(null);
-  const startRef = react.useRef(() => {
-  });
-  const start = react.useCallback(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    setScale(0);
-    setOpacity(0);
-    setProgress(0);
-    onStart?.();
-    timeoutRef.current = window.setTimeout(() => {
-      setProgress(0.5);
-      setScale(1 + intensity);
-      setOpacity(1);
-      bounceTimeoutRef.current = window.setTimeout(() => {
-        setProgress(1);
-        setScale(1);
-        setIsVisible(true);
-        setIsAnimating(false);
-        onComplete?.();
-      }, duration * 0.3);
-    }, delay);
-  }, [delay, intensity, duration, isAnimating, onStart, onComplete]);
-  startRef.current = start;
-  const stop = react.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    if (bounceTimeoutRef.current) {
-      clearTimeout(bounceTimeoutRef.current);
-      bounceTimeoutRef.current = null;
-    }
-    setIsAnimating(false);
-    onStop?.();
-  }, [onStop]);
-  const reset = react.useCallback(() => {
-    stop();
-    setScale(0);
-    setOpacity(0);
-    setProgress(0);
-    setIsVisible(false);
-    if (ref.current) {
-      const element = ref.current;
-      element.style.transition = "none";
-      element.style.opacity = "0";
-      element.style.transform = "scale(0)";
-      requestAnimationFrame(() => {
-        element.style.transition = "";
-      });
-    }
-    onReset?.();
-  }, [stop, onReset]);
-  react.useEffect(() => {
-    if (!ref.current || !autoStart) return;
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            startRef.current();
-            if (triggerOnce) {
-              observerRef.current?.disconnect();
-            }
-          }
-        });
-      },
-      { threshold }
-    );
-    observerRef.current.observe(ref.current);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [autoStart, threshold, triggerOnce]);
-  react.useEffect(() => {
-    return () => {
-      stop();
-    };
-  }, [stop]);
-  const style = react.useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `all ${duration}ms ${easing2}`,
-    "--motion-delay": `${delay}ms`,
-    "--motion-duration": `${duration}ms`,
-    "--motion-easing": easing2,
-    "--motion-progress": `${progress}`
-  }), [scale, opacity, duration, easing2, delay, progress]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress,
-    start,
-    reset,
-    stop
-  };
-}
-
-// src/utils/easing.ts
-var linear = (t) => t;
-var easeIn = (t) => t * t;
-var easeOut = (t) => 1 - (1 - t) * (1 - t);
-var easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-var easeInQuad = (t) => t * t;
-var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
-var easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-var easeInCubic = (t) => t * t * t;
-var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
-var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-var easeInQuart = (t) => t * t * t * t;
-var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
-var easeInOutQuart = (t) => t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
-var easeInQuint = (t) => t * t * t * t * t;
-var easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
-var easeInOutQuint = (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2;
-var easeInSine = (t) => 1 - Math.cos(t * Math.PI / 2);
-var easeOutSine = (t) => Math.sin(t * Math.PI / 2);
-var easeInOutSine = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
-var easeInExpo = (t) => t === 0 ? 0 : Math.pow(2, 10 * t - 10);
-var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
-var easeInOutExpo = (t) => {
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  if (t < 0.5) return Math.pow(2, 20 * t - 10) / 2;
-  return (2 - Math.pow(2, -20 * t + 10)) / 2;
-};
-var easeInCirc = (t) => 1 - Math.sqrt(1 - Math.pow(t, 2));
-var easeOutCirc = (t) => Math.sqrt(1 - Math.pow(t - 1, 2));
-var easeInOutCirc = (t) => {
-  if (t < 0.5) return (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2;
-  return (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
-};
-var easeInBounce = (t) => 1 - easeOutBounce(1 - t);
-var easeOutBounce = (t) => {
-  const n1 = 7.5625;
-  const d1 = 2.75;
-  if (t < 1 / d1) {
-    return n1 * t * t;
-  } else if (t < 2 / d1) {
-    return n1 * (t -= 1.5 / d1) * t + 0.75;
-  } else if (t < 2.5 / d1) {
-    return n1 * (t -= 2.25 / d1) * t + 0.9375;
-  } else {
-    return n1 * (t -= 2.625 / d1) * t + 0.984375;
-  }
-};
-var easeInOutBounce = (t) => {
-  if (t < 0.5) return (1 - easeOutBounce(1 - 2 * t)) / 2;
-  return (1 + easeOutBounce(2 * t - 1)) / 2;
-};
-var easeInBack = (t) => {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return c3 * t * t * t - c1 * t * t;
-};
-var easeOutBack = (t) => {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-};
-var easeInOutBack = (t) => {
-  const c1 = 1.70158;
-  const c2 = c1 * 1.525;
-  if (t < 0.5) {
-    return Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2;
-  } else {
-    return (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
-  }
-};
-var easeInElastic = (t) => {
-  const c4 = 2 * Math.PI / 3;
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 0.75) * c4);
-};
-var easeOutElastic = (t) => {
-  const c4 = 2 * Math.PI / 3;
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-};
-var easeInOutElastic = (t) => {
-  const c5 = 2 * Math.PI / 4.5;
-  if (t === 0) return 0;
-  if (t === 1) return 1;
-  if (t < 0.5) {
-    return -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2;
-  } else {
-    return Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5) / 2 + 1;
-  }
-};
-var pulse = (t) => Math.sin(t * Math.PI) * 0.5 + 0.5;
-var pulseSmooth = (t) => Math.sin(t * Math.PI * 2) * 0.3 + 0.7;
-var skeletonWave = (t) => Math.sin((t - 0.5) * Math.PI * 2) * 0.5 + 0.5;
-var blink = (t) => t < 0.5 ? 1 : 0;
-var easing = {
-  linear,
-  easeIn,
-  easeOut,
-  easeInOut,
-  easeInQuad,
-  easeOutQuad,
-  easeInOutQuad,
-  easeInCubic,
-  easeOutCubic,
-  easeInOutCubic,
-  easeInQuart,
-  easeOutQuart,
-  easeInOutQuart,
-  easeInQuint,
-  easeOutQuint,
-  easeInOutQuint,
-  easeInSine,
-  easeOutSine,
-  easeInOutSine,
-  easeInExpo,
-  easeOutExpo,
-  easeInOutExpo,
-  easeInCirc,
-  easeOutCirc,
-  easeInOutCirc,
-  easeInBounce,
-  easeOutBounce,
-  easeInOutBounce,
-  easeInBack,
-  easeOutBack,
-  easeInOutBack,
-  easeInElastic,
-  easeOutElastic,
-  easeInOutElastic,
-  pulse,
-  pulseSmooth,
-  skeletonWave,
-  blink
-};
-function isValidEasing(easingName) {
-  return easingName in easing;
-}
-function getEasing(easingName) {
-  if (typeof easingName === "function") {
-    return easingName;
-  }
-  if (typeof easingName === "string") {
-    if (easingName in easing) {
-      return easing[easingName];
-    }
-    if (easingName === "bounce") {
-      return easing.easeOutBounce;
-    }
-    if (process.env.NODE_ENV === "development") {
-      console.warn(`[HUA Motion] Unknown easing "${easingName}", using default "easeOut".`);
-    }
-  }
-  return easeOut;
-}
-function applyEasing(t, easingName) {
-  const easingFn = getEasing(easingName);
-  return easingFn(t);
-}
-function safeApplyEasing(t, easingName) {
-  try {
-    const easingFn = getEasing(easingName);
-    return easingFn(t);
-  } catch (err) {
-    if (process.env.NODE_ENV === "development") {
-      console.error(`[HUA Motion] Failed to apply easing "${easingName}":`, err);
-    }
-    return easeOut(t);
-  }
-}
-function getAvailableEasings() {
-  return Object.keys(easing);
-}
-function isEasingFunction(value) {
-  return typeof value === "function";
-}
-var easingPresets = {
-  default: "easeOut",
-  smooth: "easeInOutCubic",
-  fast: "easeOutQuad",
-  slow: "easeInOutSine",
-  bouncy: "easeOutBounce",
-  elastic: "easeOutElastic",
-  fade: "easeInOut",
-  scale: "easeOutBack"
-};
-function getPresetEasing(preset) {
-  const easingName = easingPresets[preset];
-  return getEasing(easingName);
-}
-
-// src/hooks/usePulse.ts
-function usePulse(options = {}) {
-  const {
-    duration = 3e3,
-    intensity = 1,
-    repeatCount = Infinity,
-    repeatDelay = 0,
-    autoStart = false
-  } = options;
-  const ref = react.useRef(null);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [isVisible, setIsVisible] = react.useState(true);
-  const [progress, setProgress] = react.useState(0);
-  const motionRef = react.useRef(null);
-  const easingFn = react.useMemo(() => getEasing("easeInOut"), []);
-  const start = react.useCallback(() => {
-    if (!ref.current) return;
-    const element = ref.current;
-    let currentRepeat = 0;
-    setIsAnimating(true);
-    const animate = (startTime) => {
-      const updateMotion = (currentTime) => {
-        const elapsed = currentTime - startTime;
-        const rawProgress = Math.min(elapsed / duration, 1);
-        const easedProgress = easingFn(rawProgress);
-        const finalProgress = currentRepeat % 2 === 1 ? 1 - easedProgress : easedProgress;
-        const opacity = 0.3 + 0.7 * finalProgress * intensity;
-        element.style.opacity = opacity.toString();
-        setProgress(rawProgress);
-        if (rawProgress < 1) {
-          motionRef.current = requestAnimationFrame(updateMotion);
-        } else {
-          currentRepeat++;
-          if (repeatCount === Infinity || currentRepeat < repeatCount * 2) {
-            if (repeatDelay > 0) {
-              const delayTimeout = window.setTimeout(() => {
-                motionRef.current = requestAnimationFrame(() => animate(performance.now()));
-              }, repeatDelay);
-              motionRef.current = delayTimeout;
-            } else {
-              motionRef.current = requestAnimationFrame(() => animate(performance.now()));
-            }
-          } else {
-            setIsAnimating(false);
-          }
-        }
-      };
-      motionRef.current = requestAnimationFrame(updateMotion);
-    };
-    animate(performance.now());
-  }, [duration, intensity, repeatCount, repeatDelay, easingFn]);
-  const stop = react.useCallback(() => {
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      clearTimeout(motionRef.current);
-      motionRef.current = null;
-    }
-    setIsAnimating(false);
-  }, []);
-  const reset = react.useCallback(() => {
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      clearTimeout(motionRef.current);
-      motionRef.current = null;
-    }
-    setIsAnimating(false);
-    setProgress(0);
-    if (ref.current) {
-      const element = ref.current;
-      element.style.transition = "none";
-      element.style.opacity = "1";
-      requestAnimationFrame(() => {
-        element.style.transition = "";
-      });
-    }
-  }, []);
-  react.useEffect(() => {
-    if (autoStart) {
-      start();
-    }
-  }, [autoStart, start]);
-  react.useEffect(() => {
-    return () => {
-      if (motionRef.current) {
-        cancelAnimationFrame(motionRef.current);
-        clearTimeout(motionRef.current);
-      }
-    };
-  }, []);
-  const style = react.useMemo(() => ({
-    opacity: isAnimating ? 0.3 + 0.7 * progress * intensity : 1,
-    transition: isAnimating ? "none" : "opacity 0.3s ease-in-out"
-  }), [isAnimating, progress, intensity]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress,
-    start,
-    stop,
-    reset
-  };
-}
-function useSpringMotion(options) {
-  const {
-    from,
-    to,
-    mass = 1,
-    stiffness = 100,
-    damping = 10,
-    restDelta = 0.01,
-    restSpeed = 0.01,
-    onComplete,
-    enabled = true,
-    autoStart = false
-  } = options;
-  const ref = react.useRef(null);
-  const [springState, setSpringState] = react.useState({
-    value: from,
-    velocity: 0,
-    isAnimating: false
-  });
-  const [isVisible, setIsVisible] = react.useState(true);
-  const [progress, setProgress] = react.useState(0);
-  const motionRef = react.useRef(null);
-  const lastTimeRef = react.useRef(0);
-  const calculateSpring = react.useCallback((currentValue, currentVelocity, targetValue, deltaTime) => {
-    const displacement = currentValue - targetValue;
-    const springForce = -stiffness * displacement;
-    const dampingForce = -damping * currentVelocity;
-    const totalForce = springForce + dampingForce;
-    const acceleration = totalForce / mass;
-    const newVelocity = currentVelocity + acceleration * deltaTime;
-    const newValue = currentValue + newVelocity * deltaTime;
-    return { value: newValue, velocity: newVelocity };
-  }, [mass, stiffness, damping]);
-  const animate = react.useCallback((currentTime) => {
-    if (!enabled || !springState.isAnimating) return;
-    const deltaTime = Math.min(currentTime - lastTimeRef.current, 16) / 1e3;
-    lastTimeRef.current = currentTime;
-    const { value, velocity } = calculateSpring(
-      springState.value,
-      springState.velocity,
-      to,
-      deltaTime
-    );
-    const range = Math.abs(to - from);
-    const currentProgress = range > 0 ? Math.min(Math.abs(value - from) / range, 1) : 1;
-    setProgress(currentProgress);
-    const isAtRest = Math.abs(value - to) < restDelta && Math.abs(velocity) < restSpeed;
-    if (isAtRest) {
-      setSpringState({
-        value: to,
-        velocity: 0,
-        isAnimating: false
-      });
-      setProgress(1);
-      onComplete?.();
-      return;
-    }
-    setSpringState({
-      value,
-      velocity,
-      isAnimating: true
-    });
-    motionRef.current = requestAnimationFrame(animate);
-  }, [enabled, springState.isAnimating, to, from, restDelta, restSpeed, onComplete, calculateSpring]);
-  const start = react.useCallback(() => {
-    if (springState.isAnimating) return;
-    setSpringState((prev) => ({
-      ...prev,
-      isAnimating: true
-    }));
-    lastTimeRef.current = performance.now();
-    motionRef.current = requestAnimationFrame(animate);
-  }, [springState.isAnimating, animate]);
-  const stop = react.useCallback(() => {
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      motionRef.current = null;
-    }
-    setSpringState((prev) => ({
-      ...prev,
-      isAnimating: false
-    }));
-  }, []);
-  const reset = react.useCallback(() => {
-    stop();
-    setSpringState({
-      value: from,
-      velocity: 0,
-      isAnimating: false
-    });
-    setProgress(0);
-    motionRef.current = null;
-  }, [from, stop]);
-  react.useEffect(() => {
-    if (autoStart) {
-      start();
-    }
-  }, [autoStart, start]);
-  react.useEffect(() => {
-    return () => {
-      if (motionRef.current) {
-        cancelAnimationFrame(motionRef.current);
-      }
-    };
-  }, []);
-  const style = react.useMemo(() => ({
-    "--motion-progress": `${progress}`,
-    "--motion-value": `${springState.value}`
-  }), [progress, springState.value]);
-  return {
-    ref,
-    isVisible,
-    isAnimating: springState.isAnimating,
-    style,
-    progress,
-    value: springState.value,
-    velocity: springState.velocity,
-    start,
-    stop,
-    reset
-  };
-}
-var defaultColors = ["#60a5fa", "#34d399", "#fbbf24", "#f87171"];
-var keyframesInjected = false;
-function ensureGradientKeyframes() {
-  if (typeof document === "undefined" || keyframesInjected) return;
-  const name = "gradientShift";
-  if (!document.head.querySelector(`style[data-gradient="${name}"]`)) {
-    const style = document.createElement("style");
-    style.setAttribute("data-gradient", name);
-    style.textContent = `
-      @keyframes ${name} {
-        0%, 100% { background-position: 0% 50%; }
-        50% { background-position: 100% 50%; }
-      }
-    `;
-    document.head.appendChild(style);
-  }
-  keyframesInjected = true;
-}
-function useGradient(options = {}) {
-  const {
-    colors = defaultColors,
-    duration = 6e3,
-    direction = "diagonal",
-    size = 300,
-    easing: easing2 = "ease-in-out",
-    autoStart = false
-  } = options;
-  const ref = react.useRef(null);
-  const [isAnimating, setIsAnimating] = react.useState(autoStart);
-  const [isVisible, setIsVisible] = react.useState(true);
-  const [motionProgress, setMotionProgress] = react.useState(0);
-  react.useEffect(() => {
-    ensureGradientKeyframes();
-  }, []);
-  const style = react.useMemo(() => {
-    const gradientDirection = direction === "horizontal" ? "90deg" : direction === "vertical" ? "180deg" : "135deg";
-    const background = `linear-gradient(${gradientDirection}, ${colors.join(", ")})`;
-    const backgroundSize = `${size}% ${size}%`;
-    return {
-      background,
-      backgroundSize,
-      animation: isAnimating ? `gradientShift ${duration}ms ${easing2} infinite` : "none",
-      backgroundPosition: isAnimating ? void 0 : `${motionProgress}% 50%`
-    };
-  }, [colors, direction, size, duration, easing2, isAnimating, motionProgress]);
-  const start = react.useCallback(() => {
-    setIsAnimating(true);
-  }, []);
-  const pause = react.useCallback(() => {
-    setIsAnimating(false);
-  }, []);
-  const resume = react.useCallback(() => {
-    setIsAnimating(true);
-  }, []);
-  const reset = react.useCallback(() => {
-    setIsAnimating(false);
-    setMotionProgress(0);
-  }, []);
-  const stop = react.useCallback(() => {
-    setIsAnimating(false);
-  }, []);
-  react.useEffect(() => {
-    if (!isAnimating) {
-      const interval = setInterval(() => {
-        setMotionProgress((prev) => {
-          const newProgress = prev + 100 / (duration / 16);
-          return newProgress >= 100 ? 0 : newProgress;
-        });
-      }, 16);
-      return () => clearInterval(interval);
-    }
-  }, [isAnimating, duration]);
-  react.useEffect(() => {
-    setIsAnimating(autoStart);
-  }, [autoStart]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress: motionProgress / 100,
-    start,
-    pause,
-    resume,
-    reset,
-    stop
-  };
-}
-function useHoverMotion(options = {}) {
-  const {
-    duration = 200,
-    easing: easing2 = "ease-out",
-    hoverScale = 1.05,
-    hoverY = -2,
-    hoverOpacity = 1
-  } = options;
-  const ref = react.useRef(null);
-  const [isHovered, setIsHovered] = react.useState(false);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    const handleMouseEnter = () => {
-      setIsHovered(true);
-      setIsAnimating(true);
-    };
-    const handleMouseLeave = () => {
-      setIsHovered(false);
-      setIsAnimating(true);
-    };
-    const handleTransitionEnd = () => {
-      setIsAnimating(false);
-    };
-    element.addEventListener("mouseenter", handleMouseEnter);
-    element.addEventListener("mouseleave", handleMouseLeave);
-    element.addEventListener("transitionend", handleTransitionEnd);
-    return () => {
-      element.removeEventListener("mouseenter", handleMouseEnter);
-      element.removeEventListener("mouseleave", handleMouseLeave);
-      element.removeEventListener("transitionend", handleTransitionEnd);
-    };
-  }, []);
-  const style = react.useMemo(() => ({
-    transform: isHovered ? `scale(${hoverScale}) translateY(${hoverY}px)` : "scale(1) translateY(0px)",
-    opacity: isHovered ? hoverOpacity : 1,
-    transition: `transform ${duration}ms ${easing2}, opacity ${duration}ms ${easing2}`
-  }), [isHovered, hoverScale, hoverY, hoverOpacity, duration, easing2]);
-  const start = react.useCallback(() => {
-    setIsHovered(true);
-    setIsAnimating(true);
-  }, []);
-  const stop = react.useCallback(() => {
-    setIsAnimating(false);
-  }, []);
-  const reset = react.useCallback(() => {
-    setIsHovered(false);
-    setIsAnimating(false);
-  }, []);
-  return {
-    ref,
-    isVisible: true,
-    isAnimating,
-    isHovered,
-    style,
-    progress: isHovered ? 1 : 0,
-    start,
-    stop,
-    reset
-  };
-}
-function useClickToggle(options = {}) {
-  const {
-    initialState = false,
-    toggleOnClick = true,
-    toggleOnDoubleClick = false,
-    toggleOnRightClick = false,
-    toggleOnEnter = true,
-    toggleOnSpace = true,
-    autoReset = false,
-    resetDelay = 3e3,
-    preventDefault = false,
-    stopPropagation = false,
-    showOnMount = false
-  } = options;
-  const [isActive, setIsActive] = react.useState(showOnMount ? initialState : false);
-  const [mounted, setMounted] = react.useState(false);
-  const resetTimeoutRef = react.useRef(null);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  const startResetTimer = react.useCallback(() => {
-    if (!autoReset || resetDelay <= 0) return;
-    if (resetTimeoutRef.current !== null) {
-      clearTimeout(resetTimeoutRef.current);
-    }
-    resetTimeoutRef.current = window.setTimeout(() => {
-      setIsActive(false);
-      resetTimeoutRef.current = null;
-    }, resetDelay);
-  }, [autoReset, resetDelay]);
-  const toggle = react.useCallback(() => {
-    if (!mounted) return;
-    setIsActive((prev) => {
-      const newState = !prev;
-      if (newState && autoReset) {
-        startResetTimer();
-      } else if (!newState && resetTimeoutRef.current !== null) {
-        clearTimeout(resetTimeoutRef.current);
-        resetTimeoutRef.current = null;
-      }
-      return newState;
-    });
-  }, [mounted, autoReset, startResetTimer]);
-  const activate = react.useCallback(() => {
-    if (!mounted || isActive) return;
-    setIsActive(true);
-    if (autoReset) {
-      startResetTimer();
-    }
-  }, [mounted, isActive, autoReset, startResetTimer]);
-  const deactivate = react.useCallback(() => {
-    if (!mounted || !isActive) return;
-    setIsActive(false);
-    if (resetTimeoutRef.current !== null) {
-      clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = null;
-    }
-  }, [mounted, isActive]);
-  const reset = react.useCallback(() => {
-    setIsActive(initialState);
-    if (resetTimeoutRef.current !== null) {
-      clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = null;
-    }
-  }, [initialState]);
-  const handleClick = react.useCallback((event) => {
-    if (!toggleOnClick) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    toggle();
-  }, [toggleOnClick, preventDefault, stopPropagation, toggle]);
-  const handleDoubleClick = react.useCallback((event) => {
-    if (!toggleOnDoubleClick) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    toggle();
-  }, [toggleOnDoubleClick, preventDefault, stopPropagation, toggle]);
-  const handleContextMenu = react.useCallback((event) => {
-    if (!toggleOnRightClick) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    toggle();
-  }, [toggleOnRightClick, preventDefault, stopPropagation, toggle]);
-  const handleKeyDown = react.useCallback((event) => {
-    const shouldToggle = event.key === "Enter" && toggleOnEnter || event.key === " " && toggleOnSpace;
-    if (!shouldToggle) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    toggle();
-  }, [toggleOnEnter, toggleOnSpace, preventDefault, stopPropagation, toggle]);
-  react.useEffect(() => {
-    return () => {
-      if (resetTimeoutRef.current !== null) {
-        clearTimeout(resetTimeoutRef.current);
-      }
-    };
-  }, []);
-  const clickHandlers = {
-    ...toggleOnClick && { onClick: handleClick },
-    ...toggleOnDoubleClick && { onDoubleClick: handleDoubleClick },
-    ...toggleOnRightClick && { onContextMenu: handleContextMenu },
-    ...(toggleOnEnter || toggleOnSpace) && { onKeyDown: handleKeyDown }
-  };
-  return {
-    isActive,
-    mounted,
-    toggle,
-    activate,
-    deactivate,
-    reset,
-    clickHandlers
-  };
-}
-function useFocusToggle(options = {}) {
-  const {
-    initialState = false,
-    toggleOnFocus = true,
-    toggleOnBlur = false,
-    toggleOnFocusIn = false,
-    toggleOnFocusOut = false,
-    autoReset = false,
-    resetDelay = 3e3,
-    preventDefault = false,
-    stopPropagation = false,
-    showOnMount = false
-  } = options;
-  const [isActive, setIsActive] = react.useState(showOnMount ? initialState : false);
-  const [mounted, setMounted] = react.useState(false);
-  const resetTimeoutRef = react.useRef(null);
-  const elementRef = react.useRef(null);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  const startResetTimer = react.useCallback(() => {
-    if (!autoReset || resetDelay <= 0) return;
-    if (resetTimeoutRef.current !== null) {
-      clearTimeout(resetTimeoutRef.current);
-    }
-    resetTimeoutRef.current = window.setTimeout(() => {
-      setIsActive(false);
-      resetTimeoutRef.current = null;
-    }, resetDelay);
-  }, [autoReset, resetDelay]);
-  const toggle = react.useCallback(() => {
-    if (!mounted) return;
-    setIsActive((prev) => {
-      const newState = !prev;
-      if (newState && autoReset) {
-        startResetTimer();
-      } else if (!newState && resetTimeoutRef.current !== null) {
-        clearTimeout(resetTimeoutRef.current);
-        resetTimeoutRef.current = null;
-      }
-      return newState;
-    });
-  }, [mounted, autoReset, startResetTimer]);
-  const activate = react.useCallback(() => {
-    if (!mounted || isActive) return;
-    setIsActive(true);
-    if (autoReset) {
-      startResetTimer();
-    }
-  }, [mounted, isActive, autoReset, startResetTimer]);
-  const deactivate = react.useCallback(() => {
-    if (!mounted || !isActive) return;
-    setIsActive(false);
-    if (resetTimeoutRef.current !== null) {
-      clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = null;
-    }
-  }, [mounted, isActive]);
-  const reset = react.useCallback(() => {
-    setIsActive(initialState);
-    if (resetTimeoutRef.current !== null) {
-      clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = null;
-    }
-  }, [initialState]);
-  const handleFocus = react.useCallback((event) => {
-    if (!toggleOnFocus) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    activate();
-  }, [toggleOnFocus, preventDefault, stopPropagation, activate]);
-  const handleBlur = react.useCallback((event) => {
-    if (!toggleOnBlur) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    deactivate();
-  }, [toggleOnBlur, preventDefault, stopPropagation, deactivate]);
-  const handleFocusIn = react.useCallback((event) => {
-    if (!toggleOnFocusIn) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    activate();
-  }, [toggleOnFocusIn, preventDefault, stopPropagation, activate]);
-  const handleFocusOut = react.useCallback((event) => {
-    if (!toggleOnFocusOut) return;
-    if (preventDefault) event.preventDefault();
-    if (stopPropagation) event.stopPropagation();
-    deactivate();
-  }, [toggleOnFocusOut, preventDefault, stopPropagation, deactivate]);
-  react.useEffect(() => {
-    return () => {
-      if (resetTimeoutRef.current !== null) {
-        clearTimeout(resetTimeoutRef.current);
-      }
-    };
-  }, []);
-  const focusHandlers = {
-    ...toggleOnFocus && { onFocus: handleFocus },
-    ...toggleOnBlur && { onBlur: handleBlur },
-    ...toggleOnFocusIn && { onFocusIn: handleFocusIn },
-    ...toggleOnFocusOut && { onFocusOut: handleFocusOut }
-  };
-  return {
-    isActive,
-    mounted,
-    toggle,
-    activate,
-    deactivate,
-    reset,
-    focusHandlers,
-    ref: elementRef
-  };
-}
-function useScrollReveal(options = {}) {
-  const {
-    threshold = 0.1,
-    rootMargin = "0px",
-    triggerOnce = true,
-    delay = 0,
-    duration = 700,
-    easing: easing2 = "ease-out",
-    motionType = "fadeIn",
-    onComplete,
-    onStart,
-    onStop,
-    onReset
-  } = options;
-  const ref = react.useRef(null);
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [hasTriggered, setHasTriggered] = react.useState(false);
-  const [progress, setProgress] = react.useState(0);
-  const observerCallback = react.useCallback((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting && (!triggerOnce || !hasTriggered)) {
-        setIsAnimating(true);
-        onStart?.();
-        setTimeout(() => {
-          setIsVisible(true);
-          setHasTriggered(true);
-          setProgress(1);
-          setIsAnimating(false);
-          onComplete?.();
-        }, delay);
-      }
-    });
-  }, [triggerOnce, hasTriggered, delay, onStart, onComplete]);
-  react.useEffect(() => {
-    if (!ref.current) return;
-    const observer = new IntersectionObserver(observerCallback, {
-      threshold,
-      rootMargin
-    });
-    observer.observe(ref.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [observerCallback, threshold, rootMargin]);
-  const style = react.useMemo(() => {
-    const baseTransition = `all ${duration}ms ${easing2}`;
-    if (!isVisible) {
-      switch (motionType) {
-        case "fadeIn":
-          return {
-            opacity: 0,
-            transition: baseTransition
-          };
-        case "slideUp":
-          return {
-            opacity: 0,
-            transform: "translateY(32px)",
-            transition: baseTransition
-          };
-        case "slideLeft":
-          return {
-            opacity: 0,
-            transform: "translateX(-32px)",
-            transition: baseTransition
-          };
-        case "slideRight":
-          return {
-            opacity: 0,
-            transform: "translateX(32px)",
-            transition: baseTransition
-          };
-        case "scaleIn":
-          return {
-            opacity: 0,
-            transform: "scale(0.95)",
-            transition: baseTransition
-          };
-        case "bounceIn":
-          return {
-            opacity: 0,
-            transform: "scale(0.75)",
-            transition: baseTransition
-          };
-        default:
-          return {
-            opacity: 0,
-            transition: baseTransition
-          };
-      }
-    }
-    return {
-      opacity: 1,
-      transform: "none",
-      transition: baseTransition
-    };
-  }, [isVisible, motionType, duration, easing2]);
-  const start = react.useCallback(() => {
-    setIsAnimating(true);
-    onStart?.();
-    setTimeout(() => {
-      setIsVisible(true);
-      setProgress(1);
-      setIsAnimating(false);
-      onComplete?.();
-    }, delay);
-  }, [delay, onStart, onComplete]);
-  const reset = react.useCallback(() => {
-    setIsVisible(false);
-    setIsAnimating(false);
-    setProgress(0);
-    setHasTriggered(false);
-    onReset?.();
-  }, [onReset]);
-  const stop = react.useCallback(() => {
-    setIsAnimating(false);
-    onStop?.();
-  }, [onStop]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    progress,
-    style,
-    start,
-    reset,
-    stop
-  };
-}
-function useScrollProgress(options = {}) {
-  const {
-    target,
-    offset = 0,
-    showOnMount = false
-  } = options;
-  const [progress, setProgress] = react.useState(showOnMount ? 0 : 0);
-  const [mounted, setMounted] = react.useState(false);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  react.useEffect(() => {
-    if (!mounted) return;
-    const calculateProgress = () => {
-      if (typeof window !== "undefined") {
-        const scrollTop = window.pageYOffset;
-        const scrollHeight = target || document.documentElement.scrollHeight - window.innerHeight;
-        const adjustedScrollTop = Math.max(0, scrollTop - offset);
-        const progressPercent = Math.min(100, Math.max(0, adjustedScrollTop / scrollHeight * 100));
-        setProgress(progressPercent);
-      }
-    };
-    calculateProgress();
-    window.addEventListener("scroll", calculateProgress, { passive: true });
-    window.addEventListener("resize", calculateProgress, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", calculateProgress);
-      window.removeEventListener("resize", calculateProgress);
-    };
-  }, [target, offset, mounted]);
-  return {
-    progress,
-    mounted
-  };
-}
-function useMotionState(options = {}) {
-  const {
-    initialState = "idle",
-    autoStart = false,
-    loop = false,
-    direction = "forward",
-    duration = 1e3,
-    delay = 0,
-    showOnMount = false
-  } = options;
-  const [state, setState] = react.useState(showOnMount ? initialState : "idle");
-  const [currentDirection, setCurrentDirection] = react.useState(direction);
-  const [progress, setProgress] = react.useState(0);
-  const [elapsed, setElapsed] = react.useState(0);
-  const [mounted, setMounted] = react.useState(false);
-  const motionRef = react.useRef(null);
-  const startTimeRef = react.useRef(null);
-  const pauseTimeRef = react.useRef(null);
-  const totalPausedTimeRef = react.useRef(0);
-  react.useEffect(() => {
-    setMounted(true);
-  }, []);
-  const animate = react.useCallback((timestamp) => {
-    if (!startTimeRef.current) {
-      startTimeRef.current = timestamp;
-    }
-    const adjustedTimestamp = timestamp - totalPausedTimeRef.current;
-    const elapsedTime = adjustedTimestamp - startTimeRef.current;
-    const newElapsed = Math.max(0, elapsedTime - delay);
-    setElapsed(newElapsed);
-    let newProgress = 0;
-    if (newElapsed >= 0) {
-      newProgress = Math.min(100, newElapsed / duration * 100);
-    }
-    if (currentDirection === "reverse") {
-      newProgress = 100 - newProgress;
-    } else if (currentDirection === "alternate") {
-      const cycle = Math.floor(newElapsed / duration);
-      const cycleProgress = newElapsed % duration / duration;
-      newProgress = cycle % 2 === 0 ? cycleProgress * 100 : (1 - cycleProgress) * 100;
-    }
-    setProgress(newProgress);
-    if (newElapsed >= duration) {
-      if (loop) {
-        startTimeRef.current = timestamp || performance.now();
-        totalPausedTimeRef.current = 0;
-        setElapsed(0);
-        setProgress(currentDirection === "reverse" ? 100 : 0);
-      } else {
-        setState("completed");
-        setProgress(currentDirection === "reverse" ? 0 : 100);
-        if (motionRef.current) {
-          cancelAnimationFrame(motionRef.current);
-          motionRef.current = null;
-        }
-        return;
-      }
-    }
-    if (state === "playing") {
-      motionRef.current = requestAnimationFrame(animate);
-    }
-  }, [state, duration, delay, loop, currentDirection]);
-  const play = react.useCallback(() => {
-    if (!mounted) return;
-    if (state === "completed") {
-      reset();
-    }
-    setState("playing");
-    if (pauseTimeRef.current) {
-      totalPausedTimeRef.current += performance.now() - pauseTimeRef.current;
-      pauseTimeRef.current = null;
-    } else {
-      startTimeRef.current = null;
-      totalPausedTimeRef.current = 0;
-    }
-    if (!motionRef.current) {
-      motionRef.current = requestAnimationFrame(animate);
-    }
-  }, [mounted, state, animate]);
-  const pause = react.useCallback(() => {
-    if (state !== "playing") return;
-    setState("paused");
-    pauseTimeRef.current = performance.now();
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      motionRef.current = null;
-    }
-  }, [state]);
-  const stop = react.useCallback(() => {
-    setState("idle");
-    setProgress(0);
-    setElapsed(0);
-    startTimeRef.current = null;
-    pauseTimeRef.current = null;
-    totalPausedTimeRef.current = 0;
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      motionRef.current = null;
-    }
-  }, []);
-  const reset = react.useCallback(() => {
-    setState("idle");
-    setProgress(0);
-    setElapsed(0);
-    setCurrentDirection(direction);
-    startTimeRef.current = null;
-    pauseTimeRef.current = null;
-    totalPausedTimeRef.current = 0;
-    if (motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      motionRef.current = null;
-    }
-  }, [direction]);
-  const reverse = react.useCallback(() => {
-    const newDirection = currentDirection === "forward" ? "reverse" : "forward";
-    setCurrentDirection(newDirection);
-    if (state === "playing") {
-      const remainingTime = duration - elapsed;
-      startTimeRef.current = performance.now() - remainingTime;
-      totalPausedTimeRef.current = 0;
-    }
-  }, [currentDirection, state, duration, elapsed]);
-  const seek = react.useCallback((targetProgress) => {
-    const clampedProgress = Math.max(0, Math.min(100, targetProgress));
-    setProgress(clampedProgress);
-    let targetElapsed = 0;
-    if (currentDirection === "reverse") {
-      targetElapsed = (100 - clampedProgress) / 100 * duration;
-    } else if (currentDirection === "alternate") {
-      targetElapsed = clampedProgress / 100 * duration;
-    } else {
-      targetElapsed = clampedProgress / 100 * duration;
-    }
-    setElapsed(targetElapsed);
-    if (state === "playing" && startTimeRef.current) {
-      const currentTime = performance.now();
-      startTimeRef.current = currentTime - targetElapsed - totalPausedTimeRef.current;
-    }
-  }, [currentDirection, duration, state]);
-  const setMotionState = react.useCallback((newState) => {
-    setState(newState);
-    if (newState === "playing" && !motionRef.current) {
-      motionRef.current = requestAnimationFrame(animate);
-    } else if (newState !== "playing" && motionRef.current) {
-      cancelAnimationFrame(motionRef.current);
-      motionRef.current = null;
-    }
-  }, [animate]);
-  react.useEffect(() => {
-    if (mounted && autoStart && state === "idle") {
-      play();
-    }
-  }, [mounted, autoStart, state, play]);
-  react.useEffect(() => {
-    return () => {
-      if (motionRef.current) {
-        cancelAnimationFrame(motionRef.current);
-      }
-    };
-  }, []);
-  return {
-    state,
-    direction: currentDirection,
-    progress,
-    elapsed,
-    remaining: Math.max(0, duration - elapsed),
-    mounted,
-    play,
-    pause,
-    stop,
-    reset,
-    reverse,
-    seek,
-    setState: setMotionState
-  };
-}
-function useRepeat(options = {}) {
-  const {
-    duration = 1e3,
-    delay = 0,
-    autoStart = true,
-    type = "pulse",
-    intensity = 0.1
-  } = options;
-  const ref = react.useRef(null);
-  const [scale, setScale] = react.useState(1);
-  const [opacity, setOpacity] = react.useState(1);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const [progress, setProgress] = react.useState(0);
-  const animationTimers = react.useRef([]);
-  const isRunning = react.useRef(false);
-  const clearAllTimers = react.useCallback(() => {
-    animationTimers.current.forEach((id) => clearTimeout(id));
-    animationTimers.current = [];
-  }, []);
-  const addTimer = react.useCallback((callback, ms) => {
-    const id = window.setTimeout(callback, ms);
-    animationTimers.current.push(id);
-    return id;
-  }, []);
-  const animate = react.useCallback(() => {
-    if (!isRunning.current) return;
-    setIsAnimating(true);
-    setProgress(0);
-    switch (type) {
-      case "pulse":
-        setScale(1 + intensity);
-        addTimer(() => {
-          if (!isRunning.current) return;
-          setScale(1);
-          setProgress(0.5);
-        }, duration / 2);
-        break;
-      case "bounce":
-        setScale(1 + intensity);
-        addTimer(() => {
-          if (!isRunning.current) return;
-          setScale(1 - intensity);
-          setProgress(0.33);
-        }, duration / 3);
-        addTimer(() => {
-          if (!isRunning.current) return;
-          setScale(1);
-          setProgress(0.66);
-        }, duration);
-        break;
-      case "wave":
-        setScale(1 + intensity);
-        addTimer(() => {
-          if (!isRunning.current) return;
-          setScale(1 - intensity);
-          setProgress(0.5);
-        }, duration / 2);
-        addTimer(() => {
-          if (!isRunning.current) return;
-          setScale(1);
-          setProgress(0.75);
-        }, duration);
-        break;
-      case "fade":
-        setOpacity(0.5);
-        addTimer(() => {
-          if (!isRunning.current) return;
-          setOpacity(1);
-          setProgress(0.5);
-        }, duration / 2);
-        break;
-    }
-    addTimer(() => {
-      if (!isRunning.current) return;
-      setProgress(1);
-      setIsAnimating(false);
-      animate();
-    }, duration);
-  }, [type, intensity, duration, addTimer]);
-  const start = react.useCallback(() => {
-    isRunning.current = true;
-    clearAllTimers();
-    if (delay > 0) {
-      addTimer(() => animate(), delay);
-    } else {
-      animate();
-    }
-  }, [delay, animate, clearAllTimers, addTimer]);
-  const stop = react.useCallback(() => {
-    isRunning.current = false;
-    clearAllTimers();
-    setIsAnimating(false);
-    setScale(1);
-    setOpacity(1);
-    setProgress(0);
-  }, [clearAllTimers]);
-  const reset = react.useCallback(() => {
-    stop();
-  }, [stop]);
-  react.useEffect(() => {
-    if (autoStart) {
-      start();
-    }
-    return () => {
-      isRunning.current = false;
-      clearAllTimers();
-    };
-  }, []);
-  const style = react.useMemo(() => ({
-    transform: `scale(${scale})`,
-    opacity,
-    transition: `transform ${duration / 2}ms ease-in-out, opacity ${duration / 2}ms ease-in-out`
-  }), [scale, opacity, duration]);
-  return {
-    ref,
-    isVisible: true,
-    isAnimating,
-    style,
-    progress,
-    start,
-    stop,
-    reset
-  };
-}
-function useToggleMotion(options = {}) {
-  const { duration = 300, delay = 0, easing: easing2 = "ease-in-out" } = options;
-  const ref = react.useRef(null);
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const show = react.useCallback(() => {
-    setIsVisible(true);
-    setIsAnimating(true);
-    setTimeout(() => setIsAnimating(false), duration + delay);
-  }, [duration, delay]);
-  const hide = react.useCallback(() => {
-    setIsVisible(false);
-    setIsAnimating(true);
-    setTimeout(() => setIsAnimating(false), duration + delay);
-  }, [duration, delay]);
-  const toggle = react.useCallback(() => {
-    if (isVisible) {
-      hide();
-    } else {
-      show();
-    }
-  }, [isVisible, show, hide]);
-  const start = react.useCallback(() => show(), [show]);
-  const stop = react.useCallback(() => setIsAnimating(false), []);
-  const reset = react.useCallback(() => {
-    setIsVisible(false);
-    setIsAnimating(false);
-  }, []);
-  const style = react.useMemo(() => ({
-    opacity: isVisible ? 1 : 0,
-    transform: isVisible ? "translateY(0) scale(1)" : "translateY(10px) scale(0.95)",
-    transition: `opacity ${duration}ms ${easing2} ${delay}ms, transform ${duration}ms ${easing2} ${delay}ms`
-  }), [isVisible, duration, easing2, delay]);
-  return {
-    ref,
-    isVisible,
-    isAnimating,
-    style,
-    progress: isVisible ? 1 : 0,
-    start,
-    stop,
-    reset,
-    toggle,
-    show,
-    hide
-  };
-}
-
-// src/hooks/useSlideDown.ts
-function useSlideDown(options = {}) {
-  return useSlideUp({ ...options, direction: "down" });
-}
-function useInView(options = {}) {
-  const {
-    threshold = 0,
-    rootMargin = "0px",
-    triggerOnce = false,
-    initialInView = false
-  } = options;
-  const ref = react.useRef(null);
-  const [inView, setInView] = react.useState(initialInView);
-  const [entry, setEntry] = react.useState(null);
-  const frozenRef = react.useRef(false);
-  const handleIntersect = react.useCallback(
-    (entries) => {
-      const [observerEntry] = entries;
-      if (frozenRef.current) return;
-      setEntry(observerEntry);
-      setInView(observerEntry.isIntersecting);
-      if (triggerOnce && observerEntry.isIntersecting) {
-        frozenRef.current = true;
-      }
-    },
-    [triggerOnce]
-  );
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    const observer = new IntersectionObserver(handleIntersect, {
-      threshold,
-      rootMargin
-    });
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [threshold, rootMargin, handleIntersect]);
-  return {
-    ref,
-    inView,
-    entry
-  };
-}
-function useMouse(options = {}) {
-  const { targetRef, throttle = 0 } = options;
-  const [state, setState] = react.useState({
-    x: 0,
-    y: 0,
-    elementX: 0,
-    elementY: 0,
-    isOver: false
-  });
-  const lastUpdateRef = react.useRef(0);
-  const rafIdRef = react.useRef(null);
-  const updateMousePosition = react.useCallback(
-    (clientX, clientY, isOver) => {
-      const now = Date.now();
-      if (throttle > 0 && now - lastUpdateRef.current < throttle) {
-        return;
-      }
-      lastUpdateRef.current = now;
-      let elementX = 0;
-      let elementY = 0;
-      if (targetRef?.current) {
-        const rect = targetRef.current.getBoundingClientRect();
-        elementX = (clientX - rect.left) / rect.width;
-        elementY = (clientY - rect.top) / rect.height;
-        elementX = Math.max(0, Math.min(1, elementX));
-        elementY = Math.max(0, Math.min(1, elementY));
-      }
-      setState({
-        x: clientX,
-        y: clientY,
-        elementX,
-        elementY,
-        isOver
-      });
-    },
-    [targetRef, throttle]
-  );
-  react.useEffect(() => {
-    const target = targetRef?.current;
-    const handleMouseMove = (e) => {
-      if (rafIdRef.current) {
-        cancelAnimationFrame(rafIdRef.current);
-      }
-      rafIdRef.current = requestAnimationFrame(() => {
-        const isOver = target ? target.contains(e.target) : true;
-        updateMousePosition(e.clientX, e.clientY, isOver);
-      });
-    };
-    const handleMouseEnter = () => {
-      setState((prev) => ({ ...prev, isOver: true }));
-    };
-    const handleMouseLeave = () => {
-      setState((prev) => ({ ...prev, isOver: false }));
-    };
-    if (target) {
-      target.addEventListener("mousemove", handleMouseMove);
-      target.addEventListener("mouseenter", handleMouseEnter);
-      target.addEventListener("mouseleave", handleMouseLeave);
-    } else {
-      window.addEventListener("mousemove", handleMouseMove);
-    }
-    return () => {
-      if (rafIdRef.current) {
-        cancelAnimationFrame(rafIdRef.current);
-      }
-      if (target) {
-        target.removeEventListener("mousemove", handleMouseMove);
-        target.removeEventListener("mouseenter", handleMouseEnter);
-        target.removeEventListener("mouseleave", handleMouseLeave);
-      } else {
-        window.removeEventListener("mousemove", handleMouseMove);
-      }
-    };
-  }, [targetRef, updateMousePosition]);
-  return state;
-}
-function useReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
-  react.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handleChange = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  }, []);
-  return {
-    prefersReducedMotion
-  };
-}
-function useWindowSize(options = {}) {
-  const {
-    debounce = 100,
-    initialWidth = 0,
-    initialHeight = 0
-  } = options;
-  const [state, setState] = react.useState({
-    width: initialWidth,
-    height: initialHeight,
-    isMounted: false
-  });
-  const timeoutRef = react.useRef(null);
-  const updateSize = react.useCallback(() => {
-    if (typeof window === "undefined") return;
-    setState({
-      width: window.innerWidth,
-      height: window.innerHeight,
-      isMounted: true
-    });
-  }, []);
-  const handleResize = react.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    if (debounce > 0) {
-      timeoutRef.current = window.setTimeout(updateSize, debounce);
-    } else {
-      updateSize();
-    }
-  }, [debounce, updateSize]);
-  react.useEffect(() => {
-    updateSize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [handleResize, updateSize]);
-  return state;
-}
-function useGesture(options = {}) {
-  const {
-    enabled = true,
-    threshold = 10,
-    timeout = 300,
-    swipeThreshold = 50,
-    swipeVelocity = 0.3,
-    swipeDirections = ["up", "down", "left", "right"],
-    pinchThreshold = 10,
-    minScale = 0.1,
-    maxScale = 10,
-    rotateThreshold = 5,
-    panThreshold = 10,
-    onSwipe,
-    onPinch,
-    onRotate,
-    onPan,
-    onTap,
-    onDoubleTap,
-    onLongPress,
-    onStart,
-    onMove,
-    onEnd
-  } = options;
-  const [isActive, setIsActive] = react.useState(false);
-  const [gesture, setGesture] = react.useState(null);
-  const [scale, setScale] = react.useState(1);
-  const [rotation, setRotation] = react.useState(0);
-  const [deltaX, setDeltaX] = react.useState(0);
-  const [deltaY, setDeltaY] = react.useState(0);
-  const [distance, setDistance] = react.useState(0);
-  const [velocity, setVelocity] = react.useState(0);
-  const stateRef = react.useRef({
-    isActive: false,
-    startX: 0,
-    startY: 0,
-    currentX: 0,
-    currentY: 0,
-    deltaX: 0,
-    deltaY: 0,
-    distance: 0,
-    velocity: 0,
-    startTime: 0,
-    currentTime: 0,
-    scale: 1,
-    rotation: 0,
-    startDistance: 0,
-    startAngle: 0,
-    touchCount: 0
-  });
-  const timeoutRef = react.useRef(null);
-  const longPressRef = react.useRef(null);
-  const lastTapRef = react.useRef(0);
-  const getDistance = react.useCallback((x1, y1, x2, y2) => {
-    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  }, []);
-  const getAngle = react.useCallback((x1, y1, x2, y2) => {
-    return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-  }, []);
-  const getSwipeDirection = react.useCallback((deltaX2, deltaY2) => {
-    const absX = Math.abs(deltaX2);
-    const absY = Math.abs(deltaY2);
-    if (absX > absY) {
-      return deltaX2 > 0 ? "right" : "left";
-    } else {
-      return deltaY2 > 0 ? "down" : "up";
-    }
-  }, []);
-  const startGesture = react.useCallback((x, y, touchCount = 1) => {
-    if (!enabled) return;
-    const now = performance.now();
-    stateRef.current = {
-      ...stateRef.current,
-      isActive: true,
-      startX: x,
-      startY: y,
-      currentX: x,
-      currentY: y,
-      deltaX: 0,
-      deltaY: 0,
-      distance: 0,
-      velocity: 0,
-      startTime: now,
-      currentTime: now,
-      touchCount
-    };
-    setIsActive(true);
-    setGesture(null);
-    onStart?.(x, y);
-    if (onLongPress) {
-      longPressRef.current = window.setTimeout(() => {
-        onLongPress(x, y);
-      }, 500);
-    }
-  }, [enabled, onStart, onLongPress]);
-  const updateGesture = react.useCallback((x, y, touches) => {
-    if (!enabled || !stateRef.current.isActive) return;
-    const now = performance.now();
-    const state = stateRef.current;
-    const deltaX2 = x - state.startX;
-    const deltaY2 = y - state.startY;
-    const distance2 = getDistance(state.startX, state.startY, x, y);
-    const velocity2 = distance2 / (now - state.startTime) * 1e3;
-    state.currentX = x;
-    state.currentY = y;
-    state.deltaX = deltaX2;
-    state.deltaY = deltaY2;
-    state.distance = distance2;
-    state.velocity = velocity2;
-    state.currentTime = now;
-    setDeltaX(deltaX2);
-    setDeltaY(deltaY2);
-    setDistance(distance2);
-    setVelocity(velocity2);
-    if (touches && touches.length === 2) {
-      const touch1 = touches[0];
-      const touch2 = touches[1];
-      const currentDistance = getDistance(touch1.clientX, touch1.clientY, touch2.clientX, touch2.clientY);
-      const currentAngle = getAngle(touch1.clientX, touch1.clientY, touch2.clientX, touch2.clientY);
-      if (state.startDistance === 0) {
-        state.startDistance = currentDistance;
-        state.startAngle = currentAngle;
-      } else {
-        const scaleDelta = currentDistance / state.startDistance;
-        const newScale = Math.max(minScale, Math.min(maxScale, scale * scaleDelta));
-        if (Math.abs(scaleDelta - 1) * 100 > pinchThreshold) {
-          setScale(newScale);
-          setGesture("pinch");
-          onPinch?.(newScale, scaleDelta - 1);
-        }
-        const angleDelta = currentAngle - state.startAngle;
-        if (Math.abs(angleDelta) > rotateThreshold) {
-          const newRotation = rotation + angleDelta;
-          setRotation(newRotation);
-          setGesture("rotate");
-          onRotate?.(newRotation, angleDelta);
-        }
-      }
-    }
-    if (distance2 > panThreshold) {
-      setGesture("pan");
-      onPan?.(deltaX2, deltaY2, x - state.startX, y - state.startY);
-    }
-    onMove?.(x, y);
-  }, [enabled, getDistance, getAngle, scale, rotation, minScale, maxScale, pinchThreshold, rotateThreshold, panThreshold, onPinch, onRotate, onPan, onMove]);
-  const endGesture = react.useCallback((x, y) => {
-    if (!enabled || !stateRef.current.isActive) return;
-    const state = stateRef.current;
-    const now = performance.now();
-    const deltaX2 = x - state.startX;
-    const deltaY2 = y - state.startY;
-    const distance2 = getDistance(state.startX, state.startY, x, y);
-    const velocity2 = distance2 / (now - state.startTime) * 1e3;
-    if (longPressRef.current) {
-      clearTimeout(longPressRef.current);
-      longPressRef.current = null;
-    }
-    if (distance2 > swipeThreshold && velocity2 > swipeVelocity) {
-      const direction = getSwipeDirection(deltaX2, deltaY2);
-      if (direction && swipeDirections.includes(direction)) {
-        setGesture(`swipe-${direction}`);
-        onSwipe?.(direction, distance2, velocity2);
-      }
-    }
-    if (distance2 < threshold && now - state.startTime < timeout) {
-      const timeSinceLastTap = now - lastTapRef.current;
-      if (timeSinceLastTap < 300) {
-        onDoubleTap?.(x, y);
-        lastTapRef.current = 0;
-      } else {
-        onTap?.(x, y);
-        lastTapRef.current = now;
-      }
-    }
-    state.isActive = false;
-    setIsActive(false);
-    onEnd?.(x, y);
-    timeoutRef.current = window.setTimeout(() => {
-      setGesture(null);
-      setDeltaX(0);
-      setDeltaY(0);
-      setDistance(0);
-      setVelocity(0);
-    }, 100);
-  }, [enabled, getDistance, getSwipeDirection, swipeThreshold, swipeVelocity, swipeDirections, threshold, timeout, onSwipe, onTap, onDoubleTap, onEnd]);
-  const onTouchStart = react.useCallback((e) => {
-    if (e.cancelable) {
-      e.preventDefault();
-    }
-    const touch = e.touches[0];
-    startGesture(touch.clientX, touch.clientY, e.touches.length);
-  }, [startGesture]);
-  const onTouchMove = react.useCallback((e) => {
-    if (e.cancelable) {
-      e.preventDefault();
-    }
-    const touch = e.touches[0];
-    updateGesture(touch.clientX, touch.clientY, Array.from(e.touches));
-  }, [updateGesture]);
-  const onTouchEnd = react.useCallback((e) => {
-    if (e.cancelable) {
-      e.preventDefault();
-    }
-    const touch = e.changedTouches[0];
-    endGesture(touch.clientX, touch.clientY);
-  }, [endGesture]);
-  const onMouseDown = react.useCallback((e) => {
-    e.preventDefault();
-    startGesture(e.clientX, e.clientY, 1);
-  }, [startGesture]);
-  const onMouseMove = react.useCallback((e) => {
-    e.preventDefault();
-    updateGesture(e.clientX, e.clientY);
-  }, [updateGesture]);
-  const onMouseUp = react.useCallback((e) => {
-    e.preventDefault();
-    endGesture(e.clientX, e.clientY);
-  }, [endGesture]);
-  const start = react.useCallback(() => {
-    setIsActive(true);
-  }, []);
-  const stop = react.useCallback(() => {
-    setIsActive(false);
-    setGesture(null);
-    if (longPressRef.current) {
-      clearTimeout(longPressRef.current);
-      longPressRef.current = null;
-    }
-  }, []);
-  const reset = react.useCallback(() => {
-    setIsActive(false);
-    setGesture(null);
-    setScale(1);
-    setRotation(0);
-    setDeltaX(0);
-    setDeltaY(0);
-    setDistance(0);
-    setVelocity(0);
-    if (longPressRef.current) {
-      clearTimeout(longPressRef.current);
-      longPressRef.current = null;
-    }
-  }, []);
-  react.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      if (longPressRef.current) {
-        clearTimeout(longPressRef.current);
-      }
-    };
-  }, []);
-  return {
-    isActive,
-    gesture,
-    scale,
-    rotation,
-    deltaX,
-    deltaY,
-    distance,
-    velocity,
-    start,
-    stop,
-    reset,
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd,
-    onMouseDown,
-    onMouseMove,
-    onMouseUp
-  };
-}
-function useGestureMotion(options) {
-  const {
-    gestureType,
-    duration = 300,
-    easing: easing2 = "ease-out",
-    sensitivity = 1,
-    enabled = true,
-    onGestureStart,
-    onGestureEnd
-  } = options;
-  const elementRef = react.useRef(null);
-  const [gestureState, setGestureState] = react.useState({
-    isActive: false,
-    x: 0,
-    y: 0,
-    deltaX: 0,
-    deltaY: 0,
-    scale: 1,
-    rotation: 0
-  });
-  const [motionStyle, setMotionStyle] = react.useState({});
-  const startPoint = react.useRef({ x: 0, y: 0 });
-  const isDragging = react.useRef(false);
-  const updateMotionStyle = react.useCallback(() => {
-    if (!enabled) return;
-    const { isActive, deltaX, deltaY, scale, rotation } = gestureState;
-    let transform = "";
-    switch (gestureType) {
-      case "hover":
-        transform = isActive ? `scale(${1 + sensitivity * 0.05}) translateY(-${sensitivity * 2}px)` : "scale(1) translateY(0)";
-        break;
-      case "drag":
-        transform = isActive ? `translate(${deltaX * sensitivity}px, ${deltaY * sensitivity}px)` : "translate(0, 0)";
-        break;
-      case "pinch":
-        transform = `scale(${scale})`;
-        break;
-      case "swipe":
-        transform = isActive ? `translateX(${deltaX * sensitivity}px) rotateY(${deltaX * 0.1}deg)` : "translateX(0) rotateY(0)";
-        break;
-      case "tilt":
-        transform = isActive ? `rotateX(${deltaY * 0.1}deg) rotateY(${deltaX * 0.1}deg)` : "rotateX(0) rotateY(0)";
-        break;
-    }
-    setMotionStyle({
-      transform,
-      transition: isActive ? "none" : `all ${duration}ms ${easing2}`,
-      cursor: gestureType === "drag" && isActive ? "grabbing" : "pointer"
-    });
-  }, [gestureState, gestureType, enabled, duration, easing2, sensitivity]);
-  const handleMouseDown = react.useCallback((e) => {
-    if (!enabled || gestureType !== "drag") return;
-    isDragging.current = true;
-    startPoint.current = { x: e.clientX, y: e.clientY };
-    setGestureState((prev) => ({ ...prev, isActive: true }));
-    onGestureStart?.();
-  }, [enabled, gestureType, onGestureStart]);
-  const handleMouseMove = react.useCallback((e) => {
-    if (!enabled || !isDragging.current) return;
-    const deltaX = e.clientX - startPoint.current.x;
-    const deltaY = e.clientY - startPoint.current.y;
-    setGestureState((prev) => ({
-      ...prev,
-      x: e.clientX,
-      y: e.clientY,
-      deltaX,
-      deltaY
-    }));
-  }, [enabled]);
-  const handleMouseUp = react.useCallback(() => {
-    if (!enabled) return;
-    isDragging.current = false;
-    setGestureState((prev) => ({ ...prev, isActive: false }));
-    onGestureEnd?.();
-  }, [enabled, onGestureEnd]);
-  const handleMouseEnter = react.useCallback(() => {
-    if (!enabled || gestureType !== "hover") return;
-    setGestureState((prev) => ({ ...prev, isActive: true }));
-    onGestureStart?.();
-  }, [enabled, gestureType, onGestureStart]);
-  const handleMouseLeave = react.useCallback(() => {
-    if (!enabled || gestureType !== "hover") return;
-    setGestureState((prev) => ({ ...prev, isActive: false }));
-    onGestureEnd?.();
-  }, [enabled, gestureType, onGestureEnd]);
-  const handleTouchStart = react.useCallback((e) => {
-    if (!enabled) return;
-    const touch = e.touches[0];
-    startPoint.current = { x: touch.clientX, y: touch.clientY };
-    setGestureState((prev) => ({ ...prev, isActive: true }));
-    onGestureStart?.();
-  }, [enabled, onGestureStart]);
-  const handleTouchMove = react.useCallback((e) => {
-    if (!enabled) return;
-    const touch = e.touches[0];
-    const deltaX = touch.clientX - startPoint.current.x;
-    const deltaY = touch.clientY - startPoint.current.y;
-    setGestureState((prev) => ({
-      ...prev,
-      x: touch.clientX,
-      y: touch.clientY,
-      deltaX,
-      deltaY
-    }));
-  }, [enabled]);
-  const handleTouchEnd = react.useCallback(() => {
-    if (!enabled) return;
-    setGestureState((prev) => ({ ...prev, isActive: false }));
-    onGestureEnd?.();
-  }, [enabled, onGestureEnd]);
-  react.useEffect(() => {
-    if (!elementRef.current) return;
-    const element = elementRef.current;
-    if (gestureType === "hover") {
-      element.addEventListener("mouseenter", handleMouseEnter);
-      element.addEventListener("mouseleave", handleMouseLeave);
-    } else if (gestureType === "drag") {
-      element.addEventListener("mousedown", handleMouseDown);
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    }
-    element.addEventListener("touchstart", handleTouchStart);
-    element.addEventListener("touchmove", handleTouchMove);
-    element.addEventListener("touchend", handleTouchEnd);
-    return () => {
-      element.removeEventListener("mouseenter", handleMouseEnter);
-      element.removeEventListener("mouseleave", handleMouseLeave);
-      element.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      element.removeEventListener("touchstart", handleTouchStart);
-      element.removeEventListener("touchmove", handleTouchMove);
-      element.removeEventListener("touchend", handleTouchEnd);
-    };
-  }, [gestureType, handleMouseEnter, handleMouseLeave, handleMouseDown, handleMouseMove, handleMouseUp, handleTouchStart, handleTouchMove, handleTouchEnd]);
-  react.useEffect(() => {
-    updateMotionStyle();
-  }, [updateMotionStyle]);
-  return {
-    ref: elementRef,
-    gestureState,
-    motionStyle,
-    isActive: gestureState.isActive
-  };
-}
-function useTypewriter(options) {
-  const { text, speed = 50, delay = 0, enabled = true, onComplete } = options;
-  const [index, setIndex] = react.useState(0);
-  const [started, setStarted] = react.useState(false);
-  const timerRef = react.useRef(null);
-  const restart = react.useCallback(() => {
-    setIndex(0);
-    setStarted(false);
-  }, []);
-  react.useEffect(() => {
-    if (!enabled) return;
-    const id = setTimeout(() => setStarted(true), delay);
-    return () => clearTimeout(id);
-  }, [enabled, delay]);
-  react.useEffect(() => {
-    if (!started || !enabled) return;
-    if (index >= text.length) {
-      onComplete?.();
-      return;
-    }
-    timerRef.current = setTimeout(() => {
-      setIndex((prev) => prev + 1);
-    }, speed);
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [started, enabled, index, text.length, speed, onComplete]);
-  react.useEffect(() => {
-    setIndex(0);
-    setStarted(false);
-  }, [text]);
-  return {
-    displayText: text.slice(0, index),
-    isTyping: started && index < text.length,
-    progress: text.length > 0 ? index / text.length : 0,
-    restart
-  };
-}
-function useCustomCursor(options = {}) {
-  const {
-    enabled = true,
-    size = 32,
-    smoothing = 0.15,
-    hoverScale = 1.5,
-    detectLabels = true
-  } = options;
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [label, setLabel] = react.useState(null);
-  const [isHovering, setIsHovering] = react.useState(false);
-  const targetRef = react.useRef({ x: 0, y: 0 });
-  const currentRef = react.useRef({ x: 0, y: 0 });
-  const [pos, setPos] = react.useState({ x: 0, y: 0 });
-  const rafRef = react.useRef(null);
-  const animate = react.useCallback(() => {
-    const dx = targetRef.current.x - currentRef.current.x;
-    const dy = targetRef.current.y - currentRef.current.y;
-    currentRef.current.x += dx * smoothing;
-    currentRef.current.y += dy * smoothing;
-    setPos({ x: currentRef.current.x, y: currentRef.current.y });
-    if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {
-      rafRef.current = requestAnimationFrame(animate);
-    }
-  }, [smoothing]);
-  react.useEffect(() => {
-    if (!enabled || typeof window === "undefined") return;
-    const handleMouseMove = (e) => {
-      targetRef.current = { x: e.clientX, y: e.clientY };
-      setIsVisible(true);
-      if (!rafRef.current) {
-        rafRef.current = requestAnimationFrame(animate);
-      }
-      if (detectLabels) {
-        const target = e.target;
-        const cursorEl = target.closest("[data-cursor]");
-        if (cursorEl) {
-          setLabel(cursorEl.dataset.cursor || null);
-          setIsHovering(true);
-        } else {
-          setLabel(null);
-          setIsHovering(false);
-        }
-      }
-    };
-    const handleMouseLeave = () => {
-      setIsVisible(false);
-      setLabel(null);
-      setIsHovering(false);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseleave", handleMouseLeave);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseleave", handleMouseLeave);
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    };
-  }, [enabled, detectLabels, animate]);
-  const scale = isHovering ? hoverScale : 1;
-  const style = react.useMemo(() => ({
-    "--cursor-x": `${pos.x}px`,
-    "--cursor-y": `${pos.y}px`,
-    "--cursor-size": `${size}px`,
-    "--cursor-scale": `${scale}`,
-    position: "fixed",
-    left: pos.x - size * scale / 2,
-    top: pos.y - size * scale / 2,
-    width: size * scale,
-    height: size * scale,
-    pointerEvents: "none",
-    zIndex: 9999,
-    transition: "width 0.2s, height 0.2s, left 0.05s, top 0.05s"
-  }), [pos.x, pos.y, size, scale]);
-  return { x: pos.x, y: pos.y, label, isHovering, style, isVisible };
-}
-function useMagneticCursor(options = {}) {
-  const { strength = 0.3, radius = 100, enabled = true } = options;
-  const ref = react.useRef(null);
-  const transformRef = react.useRef({ x: 0, y: 0 });
-  const styleRef = react.useRef({
-    transition: "transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)",
-    transform: "translate(0px, 0px)"
-  });
-  const onMouseMove = react.useCallback((e) => {
-    if (!enabled || !ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const dx = e.clientX - centerX;
-    const dy = e.clientY - centerY;
-    const dist = Math.sqrt(dx * dx + dy * dy);
-    if (dist < radius) {
-      const pull = (1 - dist / radius) * strength;
-      transformRef.current = { x: dx * pull, y: dy * pull };
-    } else {
-      transformRef.current = { x: 0, y: 0 };
-    }
-    ref.current.style.transform = `translate(${transformRef.current.x}px, ${transformRef.current.y}px)`;
-  }, [enabled, strength, radius]);
-  const onMouseLeave = react.useCallback(() => {
-    if (!ref.current) return;
-    transformRef.current = { x: 0, y: 0 };
-    ref.current.style.transform = "translate(0px, 0px)";
-  }, []);
-  const handlers = react.useMemo(() => ({ onMouseMove, onMouseLeave }), [onMouseMove, onMouseLeave]);
-  return { ref, handlers, style: styleRef.current };
-}
-function useSmoothScroll(options = {}) {
-  const {
-    enabled = true,
-    lerp = 0.1,
-    wheelMultiplier = 1,
-    touchMultiplier = 2,
-    direction = "vertical",
-    onScroll
-  } = options;
-  const [scroll, setScroll] = react.useState(0);
-  const [progress, setProgress] = react.useState(0);
-  const targetRef = react.useRef(0);
-  const currentRef = react.useRef(0);
-  const rafRef = react.useRef(null);
-  const isRunningRef = react.useRef(false);
-  const touchStartRef = react.useRef(0);
-  const getMaxScroll = react.useCallback(() => {
-    if (typeof document === "undefined") return 0;
-    return direction === "vertical" ? document.documentElement.scrollHeight - window.innerHeight : document.documentElement.scrollWidth - window.innerWidth;
-  }, [direction]);
-  const clamp = react.useCallback((val) => {
-    return Math.max(0, Math.min(val, getMaxScroll()));
-  }, [getMaxScroll]);
-  const animate = react.useCallback(() => {
-    const dx = targetRef.current - currentRef.current;
-    if (Math.abs(dx) < 0.5) {
-      currentRef.current = targetRef.current;
-      setScroll(currentRef.current);
-      isRunningRef.current = false;
-      return;
-    }
-    currentRef.current += dx * lerp;
-    setScroll(currentRef.current);
-    const max = getMaxScroll();
-    setProgress(max > 0 ? currentRef.current / max : 0);
-    onScroll?.(currentRef.current);
-    if (direction === "vertical") {
-      window.scrollTo(0, currentRef.current);
-    } else {
-      window.scrollTo(currentRef.current, 0);
-    }
-    rafRef.current = requestAnimationFrame(animate);
-  }, [lerp, direction, getMaxScroll, onScroll]);
-  const startAnimation = react.useCallback(() => {
-    if (isRunningRef.current) return;
-    isRunningRef.current = true;
-    rafRef.current = requestAnimationFrame(animate);
-  }, [animate]);
-  react.useEffect(() => {
-    if (!enabled || typeof window === "undefined") return;
-    document.documentElement.style.scrollBehavior = "auto";
-    currentRef.current = direction === "vertical" ? window.scrollY : window.scrollX;
-    targetRef.current = currentRef.current;
-    const handleWheel = (e) => {
-      e.preventDefault();
-      const delta = direction === "vertical" ? e.deltaY : e.deltaX;
-      targetRef.current = clamp(targetRef.current + delta * wheelMultiplier);
-      startAnimation();
-    };
-    const handleTouchStart = (e) => {
-      touchStartRef.current = direction === "vertical" ? e.touches[0].clientY : e.touches[0].clientX;
-    };
-    const handleTouchMove = (e) => {
-      const current = direction === "vertical" ? e.touches[0].clientY : e.touches[0].clientX;
-      const delta = (touchStartRef.current - current) * touchMultiplier;
-      touchStartRef.current = current;
-      targetRef.current = clamp(targetRef.current + delta);
-      startAnimation();
-    };
-    window.addEventListener("wheel", handleWheel, { passive: false });
-    window.addEventListener("touchstart", handleTouchStart, { passive: true });
-    window.addEventListener("touchmove", handleTouchMove, { passive: true });
-    return () => {
-      window.removeEventListener("wheel", handleWheel);
-      window.removeEventListener("touchstart", handleTouchStart);
-      window.removeEventListener("touchmove", handleTouchMove);
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-      document.documentElement.style.scrollBehavior = "";
-    };
-  }, [enabled, direction, wheelMultiplier, touchMultiplier, clamp, startAnimation]);
-  const scrollTo = react.useCallback((target, opts) => {
-    const offset = opts?.offset ?? 0;
-    if (typeof target === "number") {
-      targetRef.current = clamp(target + offset);
-    } else {
-      const rect = target.getBoundingClientRect();
-      const pos = direction === "vertical" ? rect.top + currentRef.current + offset : rect.left + currentRef.current + offset;
-      targetRef.current = clamp(pos);
-    }
-    startAnimation();
-  }, [clamp, direction, startAnimation]);
-  const stop = react.useCallback(() => {
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
-    isRunningRef.current = false;
-    targetRef.current = currentRef.current;
-  }, []);
-  return {
-    scroll,
-    targetScroll: targetRef.current,
-    progress,
-    scrollTo,
-    stop
-  };
-}
-function useElementProgress(options = {}) {
-  const { start = 0, end = 1, clamp = true } = options;
-  const ref = react.useRef(null);
-  const [progress, setProgress] = react.useState(0);
-  const [isInView, setIsInView] = react.useState(false);
-  react.useEffect(() => {
-    const el = ref.current;
-    if (!el || typeof window === "undefined") return;
-    const calculate = () => {
-      const rect = el.getBoundingClientRect();
-      const vh = window.innerHeight;
-      const elementTop = rect.top;
-      const elementBottom = rect.bottom;
-      const trackStart = vh * (1 - start);
-      const trackEnd = vh * end * -1 + vh;
-      const range = trackStart - trackEnd;
-      const raw = range > 0 ? (trackStart - elementTop) / range : 0;
-      const clamped = clamp ? Math.max(0, Math.min(1, raw)) : raw;
-      setProgress(clamped);
-      setIsInView(elementBottom > 0 && elementTop < vh);
-    };
-    calculate();
-    window.addEventListener("scroll", calculate, { passive: true });
-    window.addEventListener("resize", calculate, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", calculate);
-      window.removeEventListener("resize", calculate);
-    };
-  }, [start, end, clamp]);
-  return { ref, progress, isInView };
-}
-function Motion({
-  as: Component = "div",
-  type,
-  effects,
-  scroll,
-  delay,
-  duration,
-  children,
-  className,
-  style: userStyle,
-  ...rest
-}) {
-  const scrollOptions = react.useMemo(() => {
-    if (!scroll) return null;
-    const base = typeof scroll === "object" ? scroll : {};
-    return {
-      ...base,
-      ...delay != null && { delay },
-      ...duration != null && { duration },
-      ...type != null && { motionType: type }
-    };
-  }, [scroll, delay, duration, type]);
-  const scrollMotion = useScrollReveal(scrollOptions ?? { delay: 0 });
-  const unifiedMotion = useUnifiedMotion({
-    type: type ?? "fadeIn",
-    effects,
-    delay,
-    duration,
-    autoStart: true
-  });
-  const isScroll = scroll != null && scroll !== false;
-  const motion = isScroll ? scrollMotion : unifiedMotion;
-  const mergedStyle = react.useMemo(() => {
-    if (!userStyle) return motion.style;
-    return { ...motion.style, ...userStyle };
-  }, [motion.style, userStyle]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      ref: motion.ref,
-      className,
-      style: mergedStyle,
-      ...rest,
-      children
-    }
-  );
-}
-function getInitialTransform(motionType) {
-  switch (motionType) {
-    case "slideUp":
-      return "translateY(32px)";
-    case "slideLeft":
-      return "translateX(-32px)";
-    case "slideRight":
-      return "translateX(32px)";
-    case "scaleIn":
-      return "scale(0.95)";
-    case "bounceIn":
-      return "scale(0.75)";
-    case "fadeIn":
-    default:
-      return "none";
-  }
-}
-function useStagger(options) {
-  const {
-    count,
-    staggerDelay = 100,
-    baseDelay = 0,
-    duration = 700,
-    motionType = "fadeIn",
-    threshold = 0.1,
-    easing: easing2 = "ease-out"
-  } = options;
-  const containerRef = react.useRef(null);
-  const [isVisible, setIsVisible] = react.useState(false);
-  react.useEffect(() => {
-    if (!containerRef.current) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setIsVisible(true);
-            observer.disconnect();
-          }
-        });
-      },
-      { threshold }
-    );
-    observer.observe(containerRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [threshold]);
-  const initialTransform = react.useMemo(() => getInitialTransform(motionType), [motionType]);
-  const styles = react.useMemo(() => {
-    return Array.from({ length: count }, (_, i) => {
-      const itemDelay = baseDelay + i * staggerDelay;
-      if (!isVisible) {
-        return {
-          opacity: 0,
-          transform: initialTransform,
-          transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
-        };
-      }
-      return {
-        opacity: 1,
-        transform: "none",
-        transition: `opacity ${duration}ms ${easing2} ${itemDelay}ms, transform ${duration}ms ${easing2} ${itemDelay}ms`
-      };
-    });
-  }, [count, isVisible, staggerDelay, baseDelay, duration, motionType, easing2, initialTransform]);
-  return {
-    containerRef,
-    styles,
-    isVisible
-  };
-}
-
-exports.MOTION_PRESETS = MOTION_PRESETS;
-exports.Motion = Motion;
-exports.MotionEngine = MotionEngine;
-exports.PAGE_MOTIONS = PAGE_MOTIONS;
-exports.PerformanceOptimizer = PerformanceOptimizer;
-exports.TransitionEffects = TransitionEffects;
-exports.applyEasing = applyEasing;
-exports.easeIn = easeIn;
-exports.easeInOut = easeInOut;
-exports.easeInOutQuad = easeInOutQuad;
-exports.easeInQuad = easeInQuad;
-exports.easeOut = easeOut;
-exports.easeOutQuad = easeOutQuad;
-exports.easingPresets = easingPresets;
-exports.getAvailableEasings = getAvailableEasings;
-exports.getEasing = getEasing;
-exports.getMotionPreset = getMotionPreset;
-exports.getPagePreset = getPagePreset;
-exports.getPresetEasing = getPresetEasing;
-exports.isEasingFunction = isEasingFunction;
-exports.isValidEasing = isValidEasing;
-exports.linear = linear;
-exports.mergeWithPreset = mergeWithPreset;
-exports.motionEngine = motionEngine;
-exports.performanceOptimizer = performanceOptimizer;
-exports.safeApplyEasing = safeApplyEasing;
-exports.transitionEffects = transitionEffects;
-exports.useBounceIn = useBounceIn;
-exports.useClickToggle = useClickToggle;
-exports.useCustomCursor = useCustomCursor;
-exports.useElementProgress = useElementProgress;
-exports.useFadeIn = useFadeIn;
-exports.useFocusToggle = useFocusToggle;
-exports.useGesture = useGesture;
-exports.useGestureMotion = useGestureMotion;
-exports.useGradient = useGradient;
-exports.useHoverMotion = useHoverMotion;
-exports.useInView = useInView;
-exports.useMagneticCursor = useMagneticCursor;
-exports.useMotionState = useMotionState;
-exports.useMouse = useMouse;
-exports.usePageMotions = usePageMotions;
-exports.usePulse = usePulse;
-exports.useReducedMotion = useReducedMotion;
-exports.useRepeat = useRepeat;
-exports.useScaleIn = useScaleIn;
-exports.useScrollProgress = useScrollProgress;
-exports.useScrollReveal = useScrollReveal;
-exports.useSimplePageMotion = useSimplePageMotion;
-exports.useSlideDown = useSlideDown;
-exports.useSlideLeft = useSlideLeft;
-exports.useSlideRight = useSlideRight;
-exports.useSlideUp = useSlideUp;
-exports.useSmartMotion = useSmartMotion;
-exports.useSmoothScroll = useSmoothScroll;
-exports.useSpringMotion = useSpringMotion;
-exports.useStagger = useStagger;
-exports.useToggleMotion = useToggleMotion;
-exports.useTypewriter = useTypewriter;
-exports.useUnifiedMotion = useUnifiedMotion;
-exports.useWindowSize = useWindowSize;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map