/* Petting Joan: a squish and a few hearts per click. */

.joan-pet { position: relative; display: inline-block; margin: 0 0 var(--space-5); }

.joan-pet__btn {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.joan-pet__btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.joan-pet .joan-portrait { margin: 0; transform-origin: 50% 100%; }

.joan-pet__hint { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-fg-muted); }

.joan-pet__heart {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(calc(-50% + var(--dx, 0px)), -40px);
  font: 700 22px/1 var(--font-mono);
  color: var(--color-accent);
  pointer-events: none;
  user-select: none;
  animation: joan-heart-fade 1s ease-out both;
}

@keyframes joan-heart-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .joan-pet__btn.is-petted .joan-portrait { animation: joan-squish 0.35s ease-out; }
  .joan-pet__heart { animation: joan-heart-float 1.1s ease-out both; }
}

@keyframes joan-squish {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.08, 0.88); }
  65%  { transform: scale(0.96, 1.05); }
  100% { transform: scale(1, 1); }
}

@keyframes joan-heart-float {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -90px) scale(1.1); }
}