/**
 * Canvas Animations
 *
 * Injects CSS keyframes and transition rules for canvas visual effects.
 * Include once in your canvas tree (e.g., inside CanvasProvider).
 */

import React from 'react';

const CANVAS_ANIMATION_STYLES = `
@keyframes canvas-search-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
	50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3); }
}
.canvas-search-highlight {
	animation: canvas-search-pulse 1.5s ease-in-out infinite;
}
@keyframes canvas-edge-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes canvas-edge-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}
.canvas-edge-enter {
	animation: canvas-edge-fade-in 300ms ease-out forwards;
}
.canvas-edge-exit {
	animation: canvas-edge-fade-out 300ms ease-out forwards;
	pointer-events: none;
}
@keyframes canvas-drop-target-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3); }
}
.canvas-drop-target {
	animation: canvas-drop-target-pulse 1s ease-in-out infinite;
	outline: 2px dashed #3b82f6;
	outline-offset: 2px;
}
@keyframes canvas-tap-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}
.canvas-tap-pulse {
	animation: canvas-tap-pulse 250ms ease-out;
}
/* iPad / touch: hide cursor indicators that aren't useful on coarse pointers */
@media (pointer: coarse) {
	[data-canvas-root],
	[data-canvas-root] * {
		cursor: default !important;
	}
}
/* Respect prefers-reduced-motion: disable canvas CSS animations */
@media (prefers-reduced-motion: reduce) {
	.canvas-search-highlight,
	.canvas-drop-target,
	.canvas-tap-pulse {
		animation: none !important;
	}
	.canvas-edge-enter {
		animation: none !important;
		opacity: 1;
	}
	.canvas-edge-exit {
		animation: none !important;
		opacity: 0;
	}
}
`;

export function CanvasAnimations() {
	return <style dangerouslySetInnerHTML={{ __html: CANVAS_ANIMATION_STYLES }} />;
}
