/* ══════════════════════════════════════════════════════════
   FLAVOR CATALOG — ANIMACIONES
   ══════════════════════════════════════════════════════════ */

/* ── Fade In desde abajo ───────────────────────────────── */
@keyframes fcFadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes fcFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Slide In ──────────────────────────────────────────── */
@keyframes fcSlideIn {
	from { opacity: 0; transform: translateX(-20px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Pulse para badge ──────────────────────────────────── */
@keyframes fcPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

@keyframes fcDotPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .6; transform: scale(.8); }
}

/* ── Bounce sutil ──────────────────────────────────────── */
@keyframes fcBounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* ── Shimmer / Skeleton ────────────────────────────────── */
@keyframes fcShimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* ── Spin ──────────────────────────────────────────────── */
@keyframes fcSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ── Scale In ──────────────────────────────────────────── */
@keyframes fcScaleIn {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Clases de animación ───────────────────────────────── */
.fc-animate-in {
	opacity: 0;
	animation: fcFadeInUp 0.6s ease forwards;
}

.fc-animate-in:nth-child(1)  { animation-delay: 0.05s; }
.fc-animate-in:nth-child(2)  { animation-delay: 0.1s; }
.fc-animate-in:nth-child(3)  { animation-delay: 0.15s; }
.fc-animate-in:nth-child(4)  { animation-delay: 0.2s; }
.fc-animate-in:nth-child(5)  { animation-delay: 0.25s; }
.fc-animate-in:nth-child(6)  { animation-delay: 0.3s; }
.fc-animate-in:nth-child(7)  { animation-delay: 0.35s; }
.fc-animate-in:nth-child(8)  { animation-delay: 0.4s; }
.fc-animate-in:nth-child(9)  { animation-delay: 0.45s; }
.fc-animate-in:nth-child(10) { animation-delay: 0.5s; }
.fc-animate-in:nth-child(11) { animation-delay: 0.55s; }
.fc-animate-in:nth-child(12) { animation-delay: 0.6s; }

/* ── Loading Spinner ───────────────────────────────────── */
.fc-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid var(--fc-primary, #2563eb);
	border-top-color: transparent;
	border-radius: 50%;
	animation: fcSpin 0.7s linear infinite;
}

.fc-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	gap: 12px;
	color: var(--fc-primary, #2563eb);
	font-size: 0.95rem;
}

/* ── Skeleton ──────────────────────────────────────────── */
.fc-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: fcShimmer 1.5s infinite;
	border-radius: 8px;
}

.fc-skeleton--card {
	height: 320px;
	border-radius: var(--fc-radius, 12px);
}