/* like.css — the "∑ of appreciation" button at the foot of each post.
   Pure type + theme tokens (no assets), so it stays light and on-brand. */

.like {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 2.6rem auto 0.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
}

.like__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--soft);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.12s;
}

.like__btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
  color: var(--ink);
}
.like__btn:active { transform: scale(0.96); }

.like__sigma {
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.18s, text-shadow 0.18s;
}

.like__count {
  min-width: 1.4ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.like__btn.is-liked {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
  color: var(--ink);
}
.like__btn.is-liked .like__sigma {
  color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

.like__label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* count "pop" when the sum changes */
.like__count--pop { animation: like-pop 0.34s ease; }
@keyframes like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* a "+1" / "−1" term that floats up out of the sum */
.like__term {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  pointer-events: none;
  animation: like-term-up 0.7s ease-out forwards;
}
.like__term--down { color: var(--muted); animation: like-term-down 0.7s ease-out forwards; }

@keyframes like-term-up {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}
@keyframes like-term-down {
  0% { opacity: 0; transform: translate(-50%, -4px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .like__btn, .like__btn:active { transition: none; transform: none; }
  .like__count--pop { animation: none; }
  .like__term { display: none; }
}