/**
 * animations.css
 * Deliberately short list. Per the brief: smooth but restrained
 * transitions only, never scattered motion. Most hover/focus
 * transitions are declared inline on their component (see
 * components.css); this file holds only multi-step keyframes.
 */

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

@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Applied once, to the screen's root element on route change only -
   not to every card/section individually. */
.screen-enter {
  animation: rise-in var(--duration-base) var(--ease-standard);
}

/* Modal entrance */
.modal {
  animation: rise-in var(--duration-base) var(--ease-standard);
}

/* Toast entrance */
.toast {
  animation: fade-in var(--duration-fast) var(--ease-standard);
}

/* Skeleton loading shimmer, used only while the catalogue is first
   syncing - a single deliberate loading moment, not decoration. */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-border) 0px, #F0F3EE 40px, var(--color-border) 80px);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--color-border); }
}