/* ============================================================================
   The heart (heart.js): React Bits' Pulse Heart, a pill holding a heart
   and a count. The component's own look is the default; each site colours
   it with the --ph-* properties at the end, from its own palette.
   ========================================================================== */

.like {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .85rem;
}
.like[hidden] { display: none; }

.pulse-heart {
  --ph-size: 22px;
  --ph-corner: 999px;
  --ph-pill: #232326;
  --ph-border: transparent;
  --ph-idle: #8b8b93;
  --ph-liked: #ff4d6d;
  --ph-text: #f5f5f5;
  --ph-roll: 350ms;
  --ph-stroke: calc(var(--ph-size) * 1.5 / 24);
  --ph-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ph-corner);
  background: none;
  color: var(--ph-text);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 160ms var(--ph-ease-out);
}
.pulse-heart[data-pressed] { transform: scale(0.97); }
.pulse-heart:focus-visible { outline: 2px solid var(--ph-focus, currentColor); outline-offset: 3px; }

.pulse-heart__pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ph-size) * 0.3);
  padding: calc(var(--ph-size) * 0.4);
  padding-inline-end: calc(var(--ph-size) * 0.6);
  border-radius: var(--ph-corner);
  background: var(--ph-pill);
  box-shadow: inset 0 0 0 1px var(--ph-border);
  transform-origin: center;
}
.pulse-heart[data-no-count] .pulse-heart__pill { padding-inline-end: calc(var(--ph-size) * 0.4); }

.pulse-heart__heart {
  display: block;
  width: var(--ph-size);
  height: var(--ph-size);
  color: var(--ph-idle);
  transition: color 160ms ease;
}
.pulse-heart__heart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ph-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pulse-heart[data-liked="true"] .pulse-heart__heart svg { fill: currentColor; }
.pulse-heart[data-liked="true"] .pulse-heart__heart { color: var(--ph-liked); }
.pulse-heart[data-running] .pulse-heart__heart { transition: none; }

@media (hover: hover) and (pointer: fine) {
  .pulse-heart:not([data-liked="true"]):hover .pulse-heart__heart {
    color: color-mix(in srgb, var(--ph-idle) 45%, var(--ph-liked));
  }
}

.pulse-heart__count {
  display: inline-flex;
  font-size: calc(var(--ph-size) * 0.72);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ph-text);
}
.pulse-heart__count:empty { display: none; }
.pulse-heart__count > span { display: block; height: 1em; }
.pulse-heart__slot { position: relative; overflow: hidden; }
.pulse-heart__roll { display: flex; flex-direction: column; transition: transform var(--ph-roll) var(--ph-ease-out); }
.pulse-heart__roll > span { display: block; height: 1em; line-height: 1; }

.pulse-heart__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A 44px target on touch screens, without growing the pill. */
.pulse-heart::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) {
  .pulse-heart, .pulse-heart__roll { transition: none; }
}

/* ------------------------------------------------------------- The sites --
   Tennis: in the black footer, where the page has no colour at all (the
   No-Colour Rule), so the heart is an outline pill like the band's outline
   buttons and fills white. Both themes: the footer is black in each. */
.like[data-like="tennis"] {
  padding-block: 1.75rem 1.5rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
}
.like[data-like="tennis"] .pulse-heart {
  --ph-pill: transparent;
  --ph-border: rgba(255, 255, 255, .38);
  --ph-idle: rgba(255, 255, 255, .72);
  --ph-liked: #fff;
  --ph-text: #fff;
  --ph-focus: #fff;
}

/* Portfolio: in Get in touch under the pills, set like the cta note (mono,
   muted); the heart a quiet pill on the page's paper, filling sienna, the
   One Warm Thing on a mark. */
.like[data-like="portfolio"] {
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .03em;
  color: var(--muted);
}
.like[data-like="portfolio"] .pulse-heart {
  --ph-size: 20px;
  --ph-pill: transparent;
  --ph-border: var(--muted);
  --ph-idle: var(--muted);
  --ph-liked: var(--accent);
  --ph-text: var(--ink);
  --ph-focus: var(--accent);
  font-family: var(--mono);
}