/**
 * Универсальная система анимаций
 * Использование: добавьте атрибут data-animate="название-анимации" на элемент
 * 
 * Доступные анимации:
 * - fade-up: появление снизу с fade
 * - fade-down: появление сверху с fade
 * - fade-left: появление слева с fade
 * - fade-right: появление справа с fade
 * - fade: просто fade
 * - scale-in: масштабирование от меньшего к большему
 * - scale-up: масштабирование от 0.85 к 1
 * - scale-down: масштабирование от 0.9 к 1
 * - slide-up: появление снизу без fade
 * - slide-down: появление сверху без fade
 * - slide-left: появление слева без fade
 * - slide-right: появление справа без fade
 * 
 * Параметры:
 * - data-animate-delay: задержка в мс (по умолчанию 0)
 * - data-animate-duration: длительность в мс (по умолчанию 1000)
 */

/* ============================================
   Базовые настройки для всех анимируемых элементов
   ============================================ */
[data-animate] {
    opacity: 0;
    transition: opacity var(--animate-duration, 1000ms) cubic-bezier(0.42, 0, 0.58, 1),
                transform var(--animate-duration, 1000ms) cubic-bezier(0.42, 0, 0.58, 1),
                scale var(--animate-duration, 1000ms) cubic-bezier(0.42, 0, 0.58, 1);
    will-change: opacity, transform, scale; /* Оптимизация производительности */
}

[data-animate][load],
section[load] [data-animate] {
    opacity: 1;
    transform: translate(0, 0);
    scale: 1;
}

/* ============================================
   Fade анимации
   ============================================ */

/* Fade Up - появление снизу с fade */
[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-up"][load],
section[load] [data-animate="fade-up"] {
    transform: translateY(0);
}

/* Fade Down - появление сверху с fade */
[data-animate="fade-down"] {
    transform: translateY(-30px);
}

[data-animate="fade-down"][load],
section[load] [data-animate="fade-down"] {
    transform: translateY(0);
}

/* Fade Left - появление слева с fade */
[data-animate="fade-left"] {
    transform: translateX(30px);
}

[data-animate="fade-left"][load],
section[load] [data-animate="fade-left"] {
    transform: translateX(0);
}

/* Fade Right - появление справа с fade */
[data-animate="fade-right"] {
    transform: translateX(-30px);
}

[data-animate="fade-right"][load],
section[load] [data-animate="fade-right"] {
    transform: translateX(0);
}

/* Fade - просто fade */
[data-animate="fade"] {
    transform: none;
}

/* ============================================
   Scale анимации
   ============================================ */

/* Scale In - масштабирование от 0.8 к 1 */
[data-animate="scale-in"] {
    scale: 0.8;
    transform: none;
}

[data-animate="scale-in"][load],
section[load] [data-animate="scale-in"] {
    scale: 1;
}

/* Scale Up - масштабирование от 0.85 к 1 */
[data-animate="scale-up"] {
    scale: 0.85;
    transform: none;
}

[data-animate="scale-up"][load],
section[load] [data-animate="scale-up"] {
    scale: 1;
}

/* Scale Down - масштабирование от 0.9 к 1 */
[data-animate="scale-down"] {
    scale: 0.9;
    transform: none;
}

[data-animate="scale-down"][load],
section[load] [data-animate="scale-down"] {
    scale: 1;
}

/* ============================================
   Slide анимации (без fade, только движение)
   ============================================ */

/* Slide Up - появление снизу */
[data-animate="slide-up"] {
    opacity: 1;
    transform: translateY(100px);
}

[data-animate="slide-up"][load],
section[load] [data-animate="slide-up"] {
    transform: translateY(0);
}

/* Slide Down - появление сверху */
[data-animate="slide-down"] {
    opacity: 1;
    transform: translateY(-100px);
}

[data-animate="slide-down"][load],
section[load] [data-animate="slide-down"] {
    transform: translateY(0);
}

/* Slide Left - появление слева */
[data-animate="slide-left"] {
    opacity: 1;
    transform: translateX(-100px);
}

[data-animate="slide-left"][load],
section[load] [data-animate="slide-left"] {
    transform: translateX(0);
}

/* Slide Right - появление справа */
[data-animate="slide-right"] {
    opacity: 1;
    transform: translateX(100px);
}

[data-animate="slide-right"][load],
section[load] [data-animate="slide-right"] {
    transform: translateX(0);
}

/* Slide Left Full - появление слева с полным экраном (для about-style-3) */
[data-animate="slide-left-full"] {
    opacity: 1;
    transform: translateX(-50vw);
    transition: transform var(--animate-duration, 1200ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate="slide-left-full"][load],
section[load] [data-animate="slide-left-full"] {
    transform: translateX(0);
}

/* Slide Right Full - появление справа с полным экраном (для about-style-3) */
[data-animate="slide-right-full"] {
    opacity: 1;
    transform: translateX(50vw);
    transition: transform var(--animate-duration, 1200ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate="slide-right-full"][load],
section[load] [data-animate="slide-right-full"] {
    transform: translateX(0);
}

/* ============================================
   Автоматическое добавление overflow-x: hidden для контейнеров с slide-анимациями
   (Применяется через JavaScript в main.js)
   ============================================ */

/* ============================================
   Комбинированные анимации
   ============================================ */

/* Fade Scale - fade + scale */
[data-animate="fade-scale"] {
    scale: 0.9;
    transform: none;
}

[data-animate="fade-scale"][load],
section[load] [data-animate="fade-scale"] {
    scale: 1;
}

/* Fade Up Scale - fade up + scale */
[data-animate="fade-up-scale"] {
    scale: 0.95;
    transform: translateY(30px);
}

[data-animate="fade-up-scale"][load],
section[load] [data-animate="fade-up-scale"] {
    scale: 1;
    transform: translateY(0);
}

/* ============================================
   Кастомные задержки и длительности через CSS переменные
   ============================================ */

[data-animate-delay] {
    transition-delay: calc(var(--animate-delay, 0ms));
}

[data-animate-duration] {
    --animate-duration: calc(var(--animate-duration-value, 1000ms));
}

/* ============================================
   Keyframes для более сложных анимаций (если понадобятся)
   ============================================ */

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        scale: 0.8;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

/* ============================================
   Анимации для дочерних элементов с задержкой
   ============================================ */

/* Для последовательной анимации дочерних элементов */
[data-animate-children] > * {
    opacity: 0;
    transition: opacity var(--animate-duration, 1000ms) cubic-bezier(0.42, 0, 0.58, 1),
                transform var(--animate-duration, 1000ms) cubic-bezier(0.42, 0, 0.58, 1),
                scale var(--animate-duration, 1000ms) cubic-bezier(0.42, 0, 0.58, 1);
}

[data-animate-children="fade-up"] > * {
    transform: translateY(30px);
}

[data-animate-children="fade-up"][load] > *,
section[load] [data-animate-children="fade-up"] > * {
    opacity: 1;
    transform: translateY(0);
}

[data-animate-children="fade-up"][load] > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-children="fade-up"][load] > *:nth-child(2) { transition-delay: 100ms; }
[data-animate-children="fade-up"][load] > *:nth-child(3) { transition-delay: 200ms; }
[data-animate-children="fade-up"][load] > *:nth-child(4) { transition-delay: 300ms; }
[data-animate-children="fade-up"][load] > *:nth-child(5) { transition-delay: 400ms; }
[data-animate-children="fade-up"][load] > *:nth-child(6) { transition-delay: 500ms; }
[data-animate-children="fade-up"][load] > *:nth-child(n+7) { transition-delay: 600ms; }

/* Аналогично для других типов */
[data-animate-children="fade-left"] > * {
    transform: translateX(30px);
}

[data-animate-children="fade-left"][load] > *,
section[load] [data-animate-children="fade-left"] > * {
    opacity: 1;
    transform: translateX(0);
}

[data-animate-children="fade-left"][load] > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-children="fade-left"][load] > *:nth-child(2) { transition-delay: 100ms; }
[data-animate-children="fade-left"][load] > *:nth-child(3) { transition-delay: 200ms; }
[data-animate-children="fade-left"][load] > *:nth-child(4) { transition-delay: 300ms; }
[data-animate-children="fade-left"][load] > *:nth-child(5) { transition-delay: 400ms; }
[data-animate-children="fade-left"][load] > *:nth-child(6) { transition-delay: 500ms; }
[data-animate-children="fade-left"][load] > *:nth-child(n+7) { transition-delay: 600ms; }