/* Motion UI vch
   Animaciones para componentes interactivos. Respeta prefers-reduced-motion. */

/* ============== Keyframes ============== */
@keyframes vch-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vch-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vch-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vch-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vch-slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
@keyframes vch-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes vch-spin {
  to { transform: rotate(360deg); }
}
@keyframes vch-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.92; }
}
@keyframes vch-progress {
  from { width: 100%; }
  to   { width: 0; }
}

/* ============== Helpers ============== */
.vch-anim-fade-up   { animation: vch-fade-up var(--vch-duration) var(--vch-ease) both; }
.vch-anim-scale-in  { animation: vch-scale-in var(--vch-duration) var(--vch-ease) both; }
.vch-anim-fade-in   { animation: vch-fade-in var(--vch-duration) var(--vch-ease) both; }
.vch-anim-pulse     { animation: vch-pulse 2.4s var(--vch-ease) infinite; }
.vch-anim-spin      { animation: vch-spin 0.9s linear infinite; }

/* Scroll reveal: estado inicial */
.vch-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--vch-duration) var(--vch-ease), transform var(--vch-duration) var(--vch-ease); }
.vch-reveal.in { opacity: 1; transform: translateY(0); }

/* Skeleton */
.vch-skeleton {
  background: linear-gradient(90deg, var(--vch-line) 0%, #E8EFF6 50%, var(--vch-line) 100%);
  background-size: 800px 100%;
  animation: vch-shimmer 1.6s linear infinite;
  border-radius: var(--vch-radius-sm);
}

/* ============== Reduce motion ============== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .vch-reveal { opacity: 1; transform: none; }
}
