/* Phase 4 — Micro interactions */

.sc361-micro-active .sc361-btn {
	animation: sc361-btn-pulse 2.4s ease-in-out infinite;
}

.sc361-micro-active .sc361-card__title {
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.5), #fff);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: sc361-text-shimmer 3s linear infinite;
}

.sc361-micro-active .sc361-card {
	animation: sc361-card-breathe 4s ease-in-out infinite;
}

.sc361-micro-active .sc361-card__tag {
	animation: sc361-icon-bounce 2s ease infinite;
}

.sc361-micro-active .sc361-card__title::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.6);
	transition: width 0.35s ease;
}

.sc361-micro-active .sc361-card:hover .sc361-card__title::after {
	width: 100%;
}

@keyframes sc361-btn-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.04);
	}
}

@keyframes sc361-text-shimmer {
	to {
		background-position: 200% center;
	}
}

@keyframes sc361-card-breathe {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.01);
	}
}

@keyframes sc361-icon-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc361-micro-active .sc361-btn,
	.sc361-micro-active .sc361-card,
	.sc361-micro-active .sc361-card__title,
	.sc361-micro-active .sc361-card__tag {
		animation: none !important;
	}
}