/* Home slice — owned by the HOME slice.
 * Friend rows (tap button, streak, live status, per-row avatar-state morphs),
 * the daily-challenge row, and the "Add a friend to start" empty state.
 * Loaded after styles.css; overrides base .person / .empty / .friend-tools. */

/* The empty-state treatment (icon + title + text + CTA) is shared from
   styles.css; no Home-specific overrides needed. */

/* Per-row avatar-state morph. A friend's row swaps its <img> to a PULSE_SENT /
   PULSE_RECEIVED / ECHO_UNLOCKED sprite for a beat, reusing the avatar-shell ring
   so the swap reads as the same avatar. The ring colour and a brief pop signal
   which event is playing; the global prefers-reduced-motion rule zeroes the pop. */
.avatar-shell.row-morph {
	transition:
		border-color 0.18s ease,
		transform 0.18s ease;
}
.avatar-shell.row-morph .avatar {
	transform: scale(1.5);
}
.avatar-shell.morph-pulse_sent {
	border-color: var(--pink);
	animation: morph-pop 0.5s ease;
}
.avatar-shell.morph-pulse_received {
	border-color: var(--pink-d);
	box-shadow: 0 0 0 3px rgba(255, 93, 143, 0.28);
	animation: morph-pop 0.5s ease;
}
.avatar-shell.morph-echo_unlocked {
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(52, 214, 192, 0.3);
	animation: morph-pop 0.5s ease;
}
@keyframes morph-pop {
	0% {
		transform: scale(0.9);
	}
	55% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

/* A friend row with an unlocked Daily Challenge is tappable and reads as the
   challenge surface: the teal accent matches the dedicated challenge rows. */
.person.challenge-row {
	cursor: pointer;
	border-color: rgba(52, 214, 192, 0.45);
	background: linear-gradient(120deg, rgba(52, 214, 192, 0.12), var(--card));
}
.person.challenge-row .st.hot {
	color: var(--teal);
	font-weight: 700;
}

/* Honour reduced motion: keep the sprite swap and ring colour, drop the pop. */
@media (prefers-reduced-motion: reduce) {
	.avatar-shell.row-morph,
	.avatar-shell.morph-pulse_sent,
	.avatar-shell.morph-pulse_received,
	.avatar-shell.morph-echo_unlocked {
		animation: none;
		transition: none;
	}
}