/* PulseForm — motion.css (NewDesign2)
 * Subtle motion only. Heartbeat uses neutral ink for halo. No brand-tinted glows.
 */

@keyframes pf-heartbeat {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.04); }
  32%  { transform: scale(1.0); }
  46%  { transform: scale(1.025); }
  60%  { transform: scale(1.0); }
  100% { transform: scale(1); }
}

.pf-heartbeat {
  animation: pf-heartbeat 2.4s var(--ease-out, cubic-bezier(.2,.8,.2,1)) infinite;
  transform-origin: center;
  will-change: transform;
}
.pf-heartbeat--once { animation-iteration-count: 1; }
.pf-heartbeat--hover { animation: none; }
.pf-heartbeat--hover:hover,
.pf-heartbeat--hover:focus-visible {
  animation: pf-heartbeat 2.4s var(--ease-out, cubic-bezier(.2,.8,.2,1)) infinite;
}

@keyframes pf-pulse-dot {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%     { transform: scale(1.4);  opacity: .6; }
}
.pf-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: pf-pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pf-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pf-fade-up { animation: pf-fade-up var(--d-slow, 280ms) var(--ease-out) both; }

@keyframes pf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pf-fade-in { animation: pf-fade-in var(--d-base, 180ms) var(--ease-out) both; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--line) 50%,
    var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--r-sm);
}