import { keyframes } from '@emotion/react';
export const AI_BORDER_WIDTH = 2;
/** Builds the static blue→violet gradient (secondary border / reduced-motion). */
export const aiGradient = (from, to) => `linear-gradient(180deg, ${from} 0%, ${to} 100%)`;
/** Builds the primary fill whose blue band grows/shrinks via `--ai-stop`. */
export const aiPrimaryGradient = (from, to) => `linear-gradient(180deg, ${from} 0%, ${from} var(--ai-stop, 30%), ${to} 100%)`;
/** Builds the rotating conic border (a white highlight sweeps the edge). */
export const aiConicBorder = (from, to, highlight) => `conic-gradient(from var(--ai-angle, 0deg), ${from}, ${to}, ${highlight}, ${to}, ${from})`;
export const AI_SECONDARY_BORDER_GLOW_DURATION_S = 4.5;
export const aiGradientStopKeyframes = keyframes `
  0% { --ai-stop: 30%; }
  50% { --ai-stop: 60%; }
  100% { --ai-stop: 30%; }
`;
export const aiBorderGlowKeyframes = keyframes `
  to { --ai-angle: 360deg; }
`;
export const aiTwinkleKeyframes = keyframes `
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.82); }
`;
export const AI_PROPERTIES = `
@property --ai-stop { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --ai-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
`;
