/* Motion — one curve per intention. Never invent a cubic-bezier per component. */
:root {
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* physical weight: covers, gift badges, elevation */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */    /* colour, opacity, ordinary UI */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 350ms; /* @kind other */
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.6s ease-in-out both; }

@keyframes heart-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.animate-heart-pulse { animation: heart-pulse 0.4s var(--ease-editorial); }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.skeleton {
  background-color: var(--color-surface-raised);
  border-radius: 0.5rem;
  animation: skeleton-pulse 1.8s var(--ease-standard) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up, .animate-heart-pulse, .skeleton { animation: none; }
}