/*
 * Kukinas Widgets — estilos y animaciones compartidas por toda la suite.
 *
 * Los widgets individuales enganchan estas utilidades agregando las clases
 * kk-anim-* a su propio markup; no necesitan redefinir @keyframes. El
 * disparo (agregar kk-in-view / kk-floating-on al elemento raíz del
 * widget) lo hacen los helpers de assets/js/common.js.
 */

:root {
	--kk-float-speed: 4s;
}

/* ---- Entrada por escala con bounce (legacy; otros widgets pueden seguir usándola) ---- */

@keyframes kk-bounce-in {
	0% {
		transform: scale(.4);
		opacity: 0;
	}
	55% {
		transform: scale(1.08);
		opacity: 1;
	}
	75% {
		transform: scale(.94);
	}
	90% {
		transform: scale(1.03);
	}
	100% {
		transform: scale(1);
	}
}

.kk-anim-bounce-in {
	animation: kk-bounce-in 900ms cubic-bezier(.34, 1.56, .64, 1) both;
	animation-play-state: paused;
}

.kk-in-view .kk-anim-bounce-in {
	animation-play-state: running;
}

/* ---- Entrada suave (escala + fade, sin rebote) ---- */

@keyframes kk-scale-in {
	0% {
		transform: scale(.88);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.kk-anim-scale-in {
	animation: kk-scale-in 800ms cubic-bezier(.22, 1, .36, 1) both;
	animation-play-state: paused;
}

.kk-in-view .kk-anim-scale-in {
	animation-play-state: running;
}

/* ---- Flote + rotación idle ----
 * Cada elemento fija su ángulo de reposo en --kk-rotate; la animación
 * oscila alrededor de ese valor, así se ve igual con o sin flote activo.
 */

@keyframes kk-float-rotate {
	0% {
		transform: translateY(0) rotate(var(--kk-rotate, 0deg));
	}
	50% {
		transform: translateY(-8px) rotate(calc(var(--kk-rotate, 0deg) + 2deg));
	}
	100% {
		transform: translateY(0) rotate(var(--kk-rotate, 0deg));
	}
}

.kk-anim-float {
	transform: rotate(var(--kk-rotate, 0deg));
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15));
}

.kk-floating-on .kk-anim-float {
	animation: kk-float-rotate var(--kk-float-speed) ease-in-out infinite;
}

/* ---- Pop al cambiar de contenido (ej. caption de un slide) ---- */

@keyframes kk-caption-pop {
	0% {
		opacity: 0;
		transform: translateY(6px) scale(.9) rotate(var(--kk-rotate, 0deg));
	}
	60% {
		opacity: 1;
		transform: translateY(-2px) scale(1.05) rotate(var(--kk-rotate, 0deg));
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(var(--kk-rotate, 0deg));
	}
}

.kk-caption-swap {
	animation: kk-caption-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- Accesibilidad: respetar "reducir movimiento" ---- */

@media (prefers-reduced-motion: reduce) {
	.kk-anim-bounce-in,
	.kk-anim-scale-in,
	.kk-floating-on .kk-anim-float,
	.kk-caption-swap {
		animation: none !important;
	}
}