/**
 * Global skeleton animation styles.
 *
 * This module injects CSS for skeleton animations into the document.
 * It must be imported once at app initialization.
 */

const SKELETON_STYLES = `
  @keyframes skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
`;

/**
 * Inject skeleton animation styles into the document head.
 * Call this once during app initialization.
 *
 * @example
 * ```tsx
 * // In main.tsx or App.tsx
 * injectSkeletonStyles();
 * ```
 */
export function injectSkeletonStyles(): void {
  if (typeof document === "undefined") {
    return;
  }

  // Avoid injecting twice
  if (document.getElementById("skeleton-styles")) {
    return;
  }

  const style = document.createElement("style");
  style.id = "skeleton-styles";
  style.textContent = SKELETON_STYLES;
  document.head.appendChild(style);
}
