/* ==========================================================================
   MASTER ANIMATIONS FILE
   כולל: משתנים, מנוע Stagger, עיצוב כרטיסיות
   ========================================================================== */

/* 1. Core Variables & Settings
   ========================================================================== */
:root {
  /* Timing - עקומות תנועה */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations - זמנים */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* Settings */
  --slide-dist: 15px;
}

/* נגישות: ביטול אנימציות למי שמבקש */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 2. Keyframes (הגדרת התנועות)
   ========================================================================== */
/* כניסה מלמטה למעלה */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(var(--slide-dist));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* מחיקה הצידה */
@keyframes slideRightFadeOut {
  to {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }
}

/* כניסה עם "קפיצה" (להוספה דינמית) */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.02);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3. The Stagger Engine (מנוע הגל)
   ========================================================================== */
.stagger-feed > * {
  opacity: 0;
  animation: slideUpFade var(--duration-normal) var(--ease-out-expo) forwards;
}

/* אל תשבור Drag & Drop (Sortable/HTML5 DnD) */
.stagger-feed > *.dragging,
.stagger-feed > *.workspace-card--dragging,
.stagger-feed > *.workspace-card--ghost,
.stagger-feed > *.collection-card--dragging,
.stagger-feed > *.collection-card--ghost {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* הגדרת הדיליי לכל ילד */
.stagger-feed > *:nth-child(1) {
  animation-delay: 0ms;
}

.stagger-feed > *:nth-child(2) {
  animation-delay: 50ms;
}

.stagger-feed > *:nth-child(3) {
  animation-delay: 100ms;
}

.stagger-feed > *:nth-child(4) {
  animation-delay: 150ms;
}

.stagger-feed > *:nth-child(5) {
  animation-delay: 200ms;
}

.stagger-feed > *:nth-child(6) {
  animation-delay: 250ms;
}

.stagger-feed > *:nth-child(7) {
  animation-delay: 300ms;
}

.stagger-feed > *:nth-child(8) {
  animation-delay: 350ms;
}

.stagger-feed > *:nth-child(n + 9) {
  animation-delay: 400ms;
}

/* 4. Item Specific Styles (עיצוב הכרטיסיות)
   ========================================================================== */
.collection-item,
.collection-card,
.file-card,
.search-result-card,
.bookmark-item,
.workspace-card {
  position: relative;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo);
  will-change: transform;
}

/* Hover Effect */
.collection-item:hover,
.collection-card:hover,
.file-card:hover,
.search-result-card:hover,
.bookmark-item:hover,
.workspace-card:hover {
  transform: translateY(-2px);
  z-index: 2;
}

/* מחיקה */
.collection-item.is-removing,
.collection-card.is-removing,
.bookmark-item.is-removing,
.workspace-card.is-removing {
  animation: slideRightFadeOut var(--duration-fast) var(--ease-in-out) forwards;
  pointer-events: none;
}

/* הוספה חדשה */
.collection-item.is-new,
.collection-card.is-new,
.bookmark-item.is-new,
.workspace-card.is-new {
  animation: popIn var(--duration-normal) var(--ease-spring) forwards;
}