/**
 * Post reactions — no box, no border, no hover plate. The emoji is the button;
 * all the feedback lives on the glyph and the count.
 *
 * Colours come from the theme's custom properties when present, with fallbacks
 * so the plugin still looks right on any theme.
 */

.trr-post-reactions {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
}

.trr-post-react {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: none;
	border: 0;
	padding: 0.15rem 0.2rem;
	color: var(--trr-text-dim, #9ca3b3);
	font-family: var(--trr-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	line-height: 1;
	cursor: pointer;
	border-radius: 0;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s ease;
}

.trr-post-react:hover,
.trr-post-react:focus-visible { color: var(--trr-text, #f5f5f5); }
.trr-post-react[disabled] { cursor: default; }

/* Keyboard focus needs a visible target — ring the glyph, not a plate. */
.trr-post-react:focus { outline: none; }
.trr-post-react:focus-visible .trr-post-react-glyph {
	outline: 2px solid var(--trr-accent, #d63838);
	outline-offset: 3px;
}

/* Your own reaction — only ever one per post. */
.trr-post-react.is-active { color: var(--trr-accent, #d63838); }

/* A zero stays legible but recedes, so a fresh post isn't a wall of zeros. */
.trr-post-react.is-empty .trr-post-react-count { opacity: 0.4; }

.trr-post-react-glyph {
	display: inline-block;
	position: relative;   /* anchors the click ring to the glyph */
	line-height: 1;
	transform-origin: 50% 60%;
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.trr-post-react:hover .trr-post-react-glyph,
.trr-post-react:focus-visible .trr-post-react-glyph { transform: scale(1.25) translateY(-1px); }
.trr-post-react:active .trr-post-react-glyph { transform: scale(0.92); }

.trr-post-react-count {
	min-width: 0.7em;
	text-align: right;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease, transform 0.15s ease;
}

/* Single post — inline in the meta row, after the comments link. */
.trr-post-reactions--single {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 0.9rem;
	gap: 0.85rem;
}
.trr-post-reactions--single .trr-post-react { font-size: 12px; letter-spacing: 0.05em; }
.trr-post-reactions--single .trr-post-react-glyph { font-size: 1.05rem; }

@media (max-width: 575px) {
	.trr-post-reactions--single {
		display: flex;
		margin-left: 0;
		margin-top: 0.5rem;
	}
}

/* Cards — a quiet footer under the card. */
.trr-post-reactions--card { margin: 0.65rem 0 0; gap: 0.75rem; }
.trr-post-reactions--card .trr-post-react { font-size: 11px; }
.trr-post-reactions--card .trr-post-react-glyph { font-size: 1rem; }

/* Click feedback: the glyph kicks up and settles, the count flashes and lifts. */
@keyframes trr-react-pop {
	0%   { transform: scale(1) rotate(0deg); }
	30%  { transform: scale(1.55) rotate(-9deg); }
	55%  { transform: scale(1.15) rotate(5deg); }
	75%  { transform: scale(1.32) rotate(-2deg); }
	100% { transform: scale(1) rotate(0deg); }
}
@keyframes trr-react-count-bump {
	0%   { transform: translateY(0); color: var(--trr-accent, #d63838); }
	40%  { transform: translateY(-5px); color: var(--trr-accent, #d63838); }
	100% { transform: translateY(0); }
}
@keyframes trr-react-ring {
	0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.35); }
	100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.9); }
}

.trr-post-react--pop .trr-post-react-glyph { animation: trr-react-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.trr-post-react--pop .trr-post-react-count { animation: trr-react-count-bump 0.45s ease-out; }
.trr-post-react--pop .trr-post-react-glyph::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.6em;
	height: 2.6em;
	border: 2px solid var(--trr-accent, #d63838);
	border-radius: 50%;
	pointer-events: none;
	animation: trr-react-ring 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
	.trr-post-react,
	.trr-post-react-glyph,
	.trr-post-react-count { transition: none; }
	.trr-post-react--pop .trr-post-react-glyph,
	.trr-post-react--pop .trr-post-react-count,
	.trr-post-react--pop .trr-post-react-glyph::after { animation: none; }
	.trr-post-react:hover .trr-post-react-glyph,
	.trr-post-react:focus-visible .trr-post-react-glyph { transform: none; }
}