/* ===========================================
   CSS Анимации - замена GSAP
   =========================================== */

/* Keyframes для основных анимаций */

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

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

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

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

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

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
    20%, 40%, 60%, 80% { transform: rotate(5deg); }
}

/* Анимация загрузки страницы */
body {
    animation: fadeIn 0.5s ease;
}

/* Анимация навигации */
header nav {
    animation: fadeInDown 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Анимация hero заголовка */
.hero h1,
.about-hero h1 {
    opacity: 0;
    animation: fadeInUp 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.5s forwards;
}

.hero p,
.about-hero p {
    opacity: 0;
    animation: fadeInUp 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.7s forwards;
}

/* Анимация логотипа */
.desket-hero-img,
.hero img {
    opacity: 0;
    animation: scaleIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
}

/* Анимация ASCII арта */
.ascii-art {
    opacity: 0;
    animation: scaleIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
}

/* Анимация секций при прокрутке (через Intersection Observer API) */
section {
    animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Анимация для секций при появлении в viewport */
@supports (animation-timeline: view()) {
    section {
        animation: slideInUp linear;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

/* Fallback для браузеров без поддержки animation-timeline */
@supports not (animation-timeline: view()) {
    section:not(.about-content):not(.team-values):not(.social-links):not(.join-form):not(.projects-section) {
        opacity: 0;
        animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-delay: 0.2s;
    }
    
    /* Первая секция всегда видима */
    section:first-of-type,
    .hero,
    .about-hero {
        opacity: 1;
        animation-delay: 0s;
    }
}

/* Параллакс эффект для изображений (через CSS transform 3D) */
.screenshots img {
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Анимация социальных кнопок */
.social-links {
    opacity: 1;
}

.social-item {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.social-item:nth-child(1) { animation-delay: 0.1s; }
.social-item:nth-child(2) { animation-delay: 0.2s; }
.social-item:nth-child(3) { animation-delay: 0.3s; }
.social-item:nth-child(4) { animation-delay: 0.4s; }
.social-item:nth-child(5) { animation-delay: 0.5s; }
.social-item:nth-child(6) { animation-delay: 0.6s; }

/* Улучшенная hover-анимация для кнопки отправки */
.submit-btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                background-color 0.3s ease,
                color 0.3s ease;
}

.submit-btn:hover {
    transform: scale(1.05);
}

.submit-btn:active {
    transform: scale(0.98);
}


/* Анимация формы */
.join-form {
    opacity: 1;
}

.form-group {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.form-group:nth-child(1) { animation-delay: 0.2s; }
.form-group:nth-child(2) { animation-delay: 0.3s; }
.form-group:nth-child(3) { animation-delay: 0.4s; }

/* Анимация благодарственного кота */
.thank-you-cat {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.thank-you-cat.visible {
    opacity: 1;
    pointer-events: auto;
}

.cat-ascii.wiggle {
    animation: wiggle 1s ease-in-out;
}

/* Анимация элементов проектов */
.project-card,
.project-media-link {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.project-card:nth-child(1),
.project-media-link:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2),
.project-media-link:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3),
.project-media-link:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4),
.project-media-link:nth-child(4) { animation-delay: 0.4s; }
.project-card:nth-child(5),
.project-media-link:nth-child(5) { animation-delay: 0.5s; }
.project-card:nth-child(6),
.project-media-link:nth-child(6) { animation-delay: 0.6s; }

/* Плавная прокрутка для якорных ссылок */
html {
    scroll-behavior: smooth;
}

/* Улучшенные переходы для интерактивных элементов */
.value-item {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease;
}

/* Анимация видео контейнера */
.video-container {
    opacity: 0;
    animation: fadeIn 1.2s ease 0.8s forwards;
}

/* Анимация game-info секции */
.game-description {
    opacity: 0;
    animation: fadeInUp 1s ease 0.4s forwards;
}

.game-media {
    opacity: 0;
    animation: fadeInUp 1s ease 0.6s forwards;
}

/* Оптимизация производительности */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Анимация для about page */
.about-content {
    opacity: 0;
    animation: fadeIn 1s ease 0.5s forwards;
}

.team-values {
    opacity: 0;
    animation: fadeInUp 1s ease 0.7s forwards;
}

.values-grid .value-item {
    opacity: 0;
}

.values-grid .value-item:nth-child(1) {
    animation: fadeInUp 0.8s ease 0.9s forwards;
}

.values-grid .value-item:nth-child(2) {
    animation: fadeInUp 0.8s ease 1s forwards;
}

.values-grid .value-item:nth-child(3) {
    animation: fadeInUp 0.8s ease 1.1s forwards;
}

/* Анимация заголовков проектов */
.projects-container h1 {
    opacity: 0;
    animation: fadeInUp 1s ease 0.3s forwards;
}

.projects-section {
    opacity: 1;
}

.projects-section-title {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.projects-section:nth-child(2) .projects-section-title {
    animation-delay: 0.5s;
}

.projects-section:nth-child(3) .projects-section-title {
    animation-delay: 0.6s;
}

.projects-section:nth-child(4) .projects-section-title {
    animation-delay: 0.7s;
}

/* Анимация медиа-грида проектов */
.projects-media-grid {
    opacity: 1;
}

.projects-section:nth-child(2) .project-media-link {
    animation-delay: 0.7s;
}

.projects-section:nth-child(3) .project-media-link {
    animation-delay: 0.9s;
}

.projects-section:nth-child(4) .project-media-link {
    animation-delay: 1.1s;
}

.projects-section:nth-child(2) .project-media-link:nth-child(2) {
    animation-delay: 0.8s;
}

.projects-section:nth-child(3) .project-media-link:nth-child(2) {
    animation-delay: 1s;
}

.projects-section:nth-child(4) .project-media-link:nth-child(2) {
    animation-delay: 1.2s;
}