/**
 * Scale2Clinic — Motion System
 * Durations, easings e animações da marca.
 * Arquétipo Sábio+Governante: precisão e controle no movimento.
 */

/* Duration tokens */
:root {
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --duration-slowest: 800ms;
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fade */
@keyframes s2c-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes s2c-fade-out { from { opacity: 1 } to { opacity: 0 } }
.s2c-fade-in { animation: s2c-fade-in var(--duration-normal) var(--easing-ease-out) both; }
.s2c-fade-out { animation: s2c-fade-out var(--duration-normal) var(--easing-ease-in) both; }

/* Slide */
@keyframes s2c-slide-up { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes s2c-slide-down { from { transform: translateY(-8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.s2c-slide-up { animation: s2c-slide-up var(--duration-slow) var(--easing-ease-out) both; }
.s2c-slide-down { animation: s2c-slide-down var(--duration-slow) var(--easing-ease-out) both; }

/* Scale */
@keyframes s2c-scale-in { from { transform: scale(0.95); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.s2c-scale-in { animation: s2c-scale-in var(--duration-normal) var(--easing-spring) both; }

/* Skeleton loading */
@keyframes s2c-shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
.s2c-skeleton {
  background: linear-gradient(90deg, var(--color-neutral-50, #F5F7FA) 25%, var(--color-blue-50, #E6F2FB) 50%, var(--color-neutral-50, #F5F7FA) 75%);
  background-size: 200% 100%;
  animation: s2c-shimmer 1.5s infinite;
}