/*
 * Shared motion system for every AI Support feature: timing/easing tokens,
 * the muted "AI" palette, and all keyframes. Registered as the
 * `adw-ai-animations` style handle; feature stylesheets depend on it and JS
 * timings live in src/shared/motion.js.
 */

:root {
	/* Easing */
	--adw-ai-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--adw-ai-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);

	/* Durations */
	--adw-ai-duration-fast: 0.2s;
	--adw-ai-duration-base: 0.45s;
	--adw-ai-duration-slow: 0.7s;
	--adw-ai-duration-highlight: 2.4s;

	/* Distances */
	--adw-ai-rise: 8px;
	--adw-ai-materialize-blur: 6px;

	/* Muted "the model is thinking" palette */
	--adw-ai-blue: #7ea6cf;
	--adw-ai-violet: #9a91c9;
	--adw-ai-rose: #c97b93;
	--adw-ai-teal: #86b8c9;
	--adw-ai-orchid: #b58fc2;

	/* Smart Paragraph "magic text" bar */
	--adw-ai-magic-gradient: linear-gradient(90deg, #b5003b 0%, #f53c60 35%, #ff758c 65%, #ffb347 100%);

	/* Disney fairy: one lap around the box; the JS loading duration matches it. */
	--adw-ai-disney-lap: 3.2s;
}

/* Reveal primitive: hidden-until-.is-visible fade + rise. */
.adw-ai-reveal {
	opacity: 0;
	transform: translateY(var(--adw-ai-rise));
	transition:
		opacity var(--adw-ai-duration-base) var(--adw-ai-ease-out),
		transform var(--adw-ai-duration-base) var(--adw-ai-ease-out);
}

.adw-ai-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@property --adw-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes adw-ai-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Blur-to-focus entrance, like the model is bringing the text in. */
@keyframes adw-ai-materialize {
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes adw-ai-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes adw-ai-sparkle-pulse {
	0%, 100% { opacity: 0.4; transform: scale(0.85) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.05) rotate(8deg); }
}

/* Same pulse on a 45deg-rotated square (report eyebrow diamond). */
@keyframes adw-ai-diamond-pulse {
	0%, 100% { opacity: 0.5; transform: rotate(45deg) scale(0.9); }
	50% { opacity: 1; transform: rotate(45deg) scale(1.15); }
}

@keyframes adw-ai-blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* Typewriter caret drawn as a border (Smart Paragraph). */
@keyframes adw-ai-caret-blink {
	0%, 100% { border-color: currentColor; }
	50% { border-color: transparent; }
}

@keyframes adw-ai-highlight {
	0%, 35% { background-color: rgba(245, 60, 96, 0.14); box-shadow: -0.75rem 0 0 rgba(245, 60, 96, 0.14), 0.75rem 0 0 rgba(245, 60, 96, 0.14); }
	100% { background-color: transparent; box-shadow: none; }
}

@keyframes adw-ai-gradient-flow {
	0% { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

@keyframes adw-ai-spin-angle {
	to { --adw-angle: 360deg; }
}

@keyframes adw-ai-twinkle {
	0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.5; }
	50% { transform: scale(1) rotate(90deg); opacity: 0.95; }
}

@keyframes adw-ai-thinking {
	0%, 100% { opacity: 0.3; transform: translateY(0) scale(0.85); }
	50% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@keyframes adw-ai-disney-aura {
	0%, 100% { box-shadow: 0 0 12px 2px rgba(154, 145, 201, 0.22), 0 0 26px 6px rgba(126, 166, 207, 0.14); }
	50% { box-shadow: 0 0 20px 5px rgba(154, 145, 201, 0.4), 0 0 42px 12px rgba(126, 166, 207, 0.26); }
}

@keyframes adw-ai-disney-mist {
	0%, 100% { opacity: 0.35; filter: blur(6px); }
	50% { opacity: 0.65; filter: blur(9px); }
}

@keyframes adw-ai-disney-fairy {
	0%   { top: -6px; left: 4%; }
	25%  { top: -6px; left: 92%; }
	50%  { top: calc(100% - 2px); left: 92%; }
	75%  { top: calc(100% - 2px); left: 4%; }
	100% { top: -6px; left: 4%; }
}

/* One switch for every AI animation. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--adw-ai-duration-fast: 0s;
		--adw-ai-duration-base: 0s;
		--adw-ai-duration-slow: 0s;
	}
}