/* ===== Rozhik CRM Animation Library =====
   Централизованные анимации, чтобы не разносить их по шаблонам.
   Классы для плавных переходов страниц, bottom sheets, модалок и микровзаимодействий.
   Уважает prefers-reduced-motion.
   */

:root {
  --anim-duration-fast: 0.2s;
  --anim-duration-normal: 0.3s;
  --anim-duration-slow: 0.4s;
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page enter animation — applied to main content wrapper */
.anim-page-enter {
  animation: animPageEnter var(--anim-duration-normal) var(--anim-ease-out) both;
}

@keyframes animPageEnter {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* Fade in/out */
.anim-fade {
  animation: animFade var(--anim-duration-fast) var(--anim-ease-in-out) both;
}

@keyframes animFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide up from bottom (bottom sheets) */
.anim-slide-up {
  animation: animSlideUp var(--anim-duration-normal) var(--anim-ease-out) both;
}

@keyframes animSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Slide down from top (dropdowns, search bar) */
.anim-slide-down {
  animation: animSlideDown var(--anim-duration-normal) var(--anim-ease-out) both;
}

@keyframes animSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scale + fade in (modals, cards) */
.anim-scale-in {
  animation: animScaleIn var(--anim-duration-fast) var(--anim-ease-out) both;
}

@keyframes animScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Hover lift for cards / stat cards */
.anim-hover-lift {
  transition: transform var(--anim-duration-fast) var(--anim-ease-in-out), box-shadow var(--anim-duration-fast) var(--anim-ease-in-out);
}
.anim-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Press / active state for buttons */
.anim-press:active {
  transform: scale(0.97);
  transition: transform 0.1s var(--anim-ease-in-out);
}

/* Staggered children animation helper */
.anim-stagger > * {
  opacity: 0;
  animation: animFade var(--anim-duration-fast) var(--anim-ease-in-out) forwards;
}
.anim-stagger > *:nth-child(1) { animation-delay: 0.03s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.09s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.12s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.15s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.18s; }

/* Respect system preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim-page-enter,
  .anim-fade,
  .anim-slide-up,
  .anim-slide-down,
  .anim-scale-in,
  .anim-stagger > * {
    animation: none !important;
    opacity: 1;
  }
  .anim-hover-lift,
  .anim-press {
    transition: none !important;
  }
}