/* ============================================
   АНИМАЦИИ ПЕРЕХОДОВ МЕЖДУ СТРАНИЦАМИ
   ============================================ */

/* Базовые анимации переходов */
.page-transition-enter {
    opacity: 0;
    transform: translateY(10px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.page-transition-exit {
    opacity: 1;
}

.page-transition-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

/* Slide transitions */
.slide-enter {
    transform: translateX(100%);
}

.slide-enter-active {
    transform: translateX(0);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-exit {
    transform: translateX(0);
}

.slide-exit-active {
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade transitions */
.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 200ms ease-out;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 150ms ease-in;
}

/* Zoom transitions */
.zoom-enter {
    opacity: 0;
    transform: scale(0.95);
}

.zoom-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* Stagger animations для списков */
.stagger-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: staggerFadeIn 0.4s ease-out forwards;
}

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

/* Delay для stagger элементов */
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 50ms; }
.stagger-item:nth-child(3) { animation-delay: 100ms; }
.stagger-item:nth-child(4) { animation-delay: 150ms; }
.stagger-item:nth-child(5) { animation-delay: 200ms; }
.stagger-item:nth-child(6) { animation-delay: 250ms; }
.stagger-item:nth-child(7) { animation-delay: 300ms; }
.stagger-item:nth-child(8) { animation-delay: 350ms; }
.stagger-item:nth-child(9) { animation-delay: 400ms; }
.stagger-item:nth-child(10) { animation-delay: 450ms; }

/* Skeleton для переходов */
.skeleton-page {
    background: var(--bg-secondary);
    min-height: 100vh;
    padding: 2rem;
}

.skeleton-header {
    height: 60px;
    margin-bottom: 2rem;
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.skeleton-card {
    height: 300px;
}

/* Reduce motion для пользователей с предпочтениями */
@media (prefers-reduced-motion: reduce) {
    .page-transition-enter-active,
    .page-transition-exit-active,
    .slide-enter-active,
    .slide-exit-active,
    .stagger-item {
        transition: none;
        animation: none;
    }
}