/* ======================================================
   animations.css — общий слой анимаций проекта
   Подключается отдельным файлом на всех страницах, ПОСЛЕ
   остальных стилей. Содержит:
     1) базовые keyframes для появления элементов;
     2) утилитарные классы .anim-* (можно навешивать на любой
        элемент в шаблонах);
     3) универсальные hover/active-переходы для уже существующих
        компонентов (кнопки, карточки, ссылки, поля форм),
        подключаемые по существующим классам проекта — без
        необходимости менять разметку;
     4) уважение к prefers-reduced-motion.
   ====================================================== */

/* ===== KEYFRAMES ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulseSoft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* ===== УТИЛИТАРНЫЕ КЛАССЫ (можно добавлять в разметку) ===== */
.anim-fade-up {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-fade-in {
    animation: fadeIn 0.5s ease both;
}

.anim-scale-in {
    animation: scaleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-slide-in {
    animation: slideInRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
.anim-delay-4 { animation-delay: 0.32s; }
.anim-delay-5 { animation-delay: 0.4s; }

/* Появление элементов при попадании во вьюпорт (класс добавляется через
   IntersectionObserver, см. общий скрипт ниже, если он подключён) */
.anim-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== ГЛОБАЛЬНЫЕ ПЕРЕХОДЫ ДЛЯ СУЩЕСТВУЮЩИХ КОМПОНЕНТОВ =====
   Ничего не переопределяет структуру/цвета — только плавность. */

a, button {
    transition: color 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.15s ease;
}

/* Лёгкий "приподъём" интерактивных карточек и кнопок при наведении */
.landing-gallery-card,
.lesson-card,
.news-card,
.material-row,
.admin-row-card,
.landing-rating-row {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease, border-color 0.2s ease;
}

.lesson-card:hover,
.news-card:hover {
    transform: translateY(-4px);
}

.quiz-btn,
.hero-btn,
.reg-btn,
.upload-btn,
button[type="submit"],
.pagination-btn,
.goto-btn {
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.15s ease,
                box-shadow 0.2s ease;
}

.quiz-btn:active:not(:disabled),
.hero-btn:active,
.reg-btn:active,
.upload-btn:active,
.pagination-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.quiz-answer-btn {
    transition: border-color 0.2s ease, background-color 0.2s ease,
                transform 0.15s ease;
}

.quiz-answer-btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* Плавное появление вопроса и результатов раунда в викторине */
#screen-lobby-entry:not([hidden]) .quiz-panel-inner,
#screen-waiting:not([hidden]) .quiz-panel-inner,
#screen-question:not([hidden]) .quiz-question-text,
#screen-question:not([hidden]) .quiz-answers,
#screen-round:not([hidden]) .quiz-panel-inner,
#screen-game-over:not([hidden]) .quiz-panel-inner {
    animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#screen-question:not([hidden]) .quiz-sidebar {
    animation: fadeIn 0.5s ease both;
}

.quiz-answer-btn.correct {
    animation: pulseSoft 0.4s ease;
}

/* Кубок на экране победы — лёгкое покачивание */
@keyframes trophyBounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-8px) rotate(4deg); }
}

.quiz-trophy {
    display: inline-block;
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               trophyBounce 2.2s ease-in-out 0.5s infinite;
}

/* Таймер: лёгкая пульсация, когда времени мало */
.quiz-timer-progress.urgent {
    animation: pulseSoft 0.6s ease-in-out infinite;
}

#timer-value {
    transition: color 0.2s ease;
}

/* Новый игрок в списке участников комнаты */
.quiz-players-list li {
    animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Плавное открытие выпадающего меню профиля в шапке.
   Мобильное меню анимируется отдельно через transform/transition
   в responsive.css (выезжает сбоку, а не сверху). */
.dropdown-content.show {
    animation: fadeInDown 0.22s ease both;
}

/* Модальные окна (галерея / новости) */
.news-modal.show {
    animation: fadeIn 0.25s ease both;
}

.news-modal.show .news-modal-content {
    animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Индикатор загрузки таблицы рейтинга */
.table-container {
    animation: fadeIn 0.4s ease both;
}

/* ======================================================
   ГЛАВНАЯ СТРАНИЦА (index.html)
   ====================================================== */

/* Hero: заголовок, подзаголовок и кнопки поочерёдно "всплывают" при
   загрузке страницы */
.hero-title {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-subtitle {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.12s;
}

.hero-actions {
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.24s;
}

.hero-btn:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Декоративный световой блик в hero — медленно "дышит" */
.hero::after {
    animation: pulseSoft 6s ease-in-out infinite;
}


/* Сетка "О проекте" (полевой выезд): карточки и фото последовательно
   проявляются по мере скролла, каждая со своей задержкой */
.landing-project-grid > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-project-grid.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.landing-project-grid > *:nth-child(1) { transition-delay: 0.02s; }
.landing-project-grid > *:nth-child(2) { transition-delay: 0.08s; }
.landing-project-grid > *:nth-child(3) { transition-delay: 0.14s; }
.landing-project-grid > *:nth-child(4) { transition-delay: 0.2s; }
.landing-project-grid > *:nth-child(5) { transition-delay: 0.26s; }
.landing-project-grid > *:nth-child(6) { transition-delay: 0.32s; }
.landing-project-grid > *:nth-child(7) { transition-delay: 0.38s; }
.landing-project-grid > *:nth-child(8) { transition-delay: 0.44s; }

/* Строки топа рейтинга на главной — по очереди выезжают слева */
.landing-rating-preview .landing-rating-row {
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease, border-color 0.2s ease;
}

.landing-rating-preview.is-visible .landing-rating-row {
    opacity: 1;
    transform: translateX(0);
}

.landing-rating-preview .landing-rating-row:nth-child(1) { transition-delay: 0.03s; }
.landing-rating-preview .landing-rating-row:nth-child(2) { transition-delay: 0.09s; }
.landing-rating-preview .landing-rating-row:nth-child(3) { transition-delay: 0.15s; }
.landing-rating-preview .landing-rating-row:nth-child(4) { transition-delay: 0.21s; }
.landing-rating-preview .landing-rating-row:nth-child(5) { transition-delay: 0.27s; }

.landing-rating-row:hover {
    box-shadow: 0 8px 20px rgba(25, 61, 80, 0.1);
    border-color: #193D50;
    transform: translateX(4px) !important;
}

/* Карточки новостей на главной */
.landing-news-grid > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-news-grid.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.landing-news-grid > *:nth-child(1) { transition-delay: 0.02s; }
.landing-news-grid > *:nth-child(2) { transition-delay: 0.08s; }
.landing-news-grid > *:nth-child(3) { transition-delay: 0.14s; }
.landing-news-grid > *:nth-child(4) { transition-delay: 0.2s; }

/* Галерея "О платформе" */
.landing-about-gallery > * {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                flex-grow 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.landing-about-gallery.is-visible > * {
    opacity: 1;
    transform: scale(1);
}

.landing-about-gallery > *:nth-child(1) { transition-delay: 0.02s; }
.landing-about-gallery > *:nth-child(2) { transition-delay: 0.06s; }
.landing-about-gallery > *:nth-child(3) { transition-delay: 0.1s; }
.landing-about-gallery > *:nth-child(4) { transition-delay: 0.14s; }
.landing-about-gallery > *:nth-child(5) { transition-delay: 0.18s; }
.landing-about-gallery > *:nth-child(6) { transition-delay: 0.22s; }
.landing-about-gallery > *:nth-child(n+7) { transition-delay: 0.26s; }

/* ======================================================
   СТРАНИЦА ВИДЕОУРОКА / НОВОСТИ (детальная)
   ====================================================== */
.lesson-video-container,
.lesson-info-card,
.lesson-test-card,
.news-gallery-col,
.news-details-col {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lesson-info-card { animation-delay: 0.08s; }
.lesson-test-card { animation-delay: 0.16s; }
.news-details-col { animation-delay: 0.1s; }

.lesson-tag-badge {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.lesson-tag-badge:hover {
    transform: translateY(-2px);
}

.news-thumbnail {
    transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.news-thumbnail:hover {
    transform: translateY(-2px);
}

.news-nav-arrow {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.news-nav-arrow:hover {
    transform: scale(1.12);
}

/* ======================================================
   СПИСКИ: ВИДЕОУРОКИ / МАТЕРИАЛЫ / НОВОСТИ / АДМИНКА
   ====================================================== */
.lessons-grid > *,
.materials-list > *,
.news-grid > *,
.admin-card-list > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease, border-color 0.2s ease;
}

.lessons-grid.is-visible > *,
.materials-list.is-visible > *,
.news-grid.is-visible > *,
.admin-card-list.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.lessons-grid > *:nth-child(1), .materials-list > *:nth-child(1), .news-grid > *:nth-child(1), .admin-card-list > *:nth-child(1) { transition-delay: 0.02s; }
.lessons-grid > *:nth-child(2), .materials-list > *:nth-child(2), .news-grid > *:nth-child(2), .admin-card-list > *:nth-child(2) { transition-delay: 0.07s; }
.lessons-grid > *:nth-child(3), .materials-list > *:nth-child(3), .news-grid > *:nth-child(3), .admin-card-list > *:nth-child(3) { transition-delay: 0.12s; }
.lessons-grid > *:nth-child(4), .materials-list > *:nth-child(4), .news-grid > *:nth-child(4), .admin-card-list > *:nth-child(4) { transition-delay: 0.17s; }
.lessons-grid > *:nth-child(5), .materials-list > *:nth-child(5), .news-grid > *:nth-child(5), .admin-card-list > *:nth-child(5) { transition-delay: 0.22s; }
.lessons-grid > *:nth-child(6), .materials-list > *:nth-child(6), .news-grid > *:nth-child(6), .admin-card-list > *:nth-child(6) { transition-delay: 0.27s; }
.lessons-grid > *:nth-child(n+7), .materials-list > *:nth-child(n+7), .news-grid > *:nth-child(n+7), .admin-card-list > *:nth-child(n+7) { transition-delay: 0.32s; }

/* ======================================================
   СТРАНИЦА РЕЙТИНГА
   ====================================================== */
/* Анимируем только "видимые" строки-школы (main-row). Раскрывающиеся
   detail-row строки не анимируются здесь — их появление уже плавно
   анимируется через .detail-anim (max-height) в script.js, чтобы избежать
   двойной/конфликтующей анимации при разворачивании. Строки идут парами
   (main, detail, main, detail…), поэтому main-row всегда занимает нечётную
   позицию среди <tr> — используем это для расчёта задержки. */
#schoolsTable > tbody > tr.main-row {
    animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#schoolsTable > tbody > tr.main-row:nth-child(1) { animation-delay: 0.02s; }
#schoolsTable > tbody > tr.main-row:nth-child(3) { animation-delay: 0.05s; }
#schoolsTable > tbody > tr.main-row:nth-child(5) { animation-delay: 0.08s; }
#schoolsTable > tbody > tr.main-row:nth-child(7) { animation-delay: 0.11s; }
#schoolsTable > tbody > tr.main-row:nth-child(9) { animation-delay: 0.14s; }
#schoolsTable > tbody > tr.main-row:nth-child(11) { animation-delay: 0.17s; }
#schoolsTable > tbody > tr.main-row:nth-child(13) { animation-delay: 0.2s; }
#schoolsTable > tbody > tr.main-row:nth-child(n+15) { animation-delay: 0.23s; }

#schoolsTable > tbody > tr.main-row:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(25, 61, 80, 0.08);
}

/* Строки списка учеников внутри раскрытой карточки школы — лёгкое
   последовательное появление */
.school-students-table tbody tr {
    animation: fadeIn 0.3s ease both;
}

.school-students-table tbody tr:nth-child(1) { animation-delay: 0.03s; }
.school-students-table tbody tr:nth-child(2) { animation-delay: 0.06s; }
.school-students-table tbody tr:nth-child(3) { animation-delay: 0.09s; }
.school-students-table tbody tr:nth-child(4) { animation-delay: 0.12s; }
.school-students-table tbody tr:nth-child(n+5) { animation-delay: 0.15s; }

/* ======================================================
   ФОРМЫ: вход / регистрация / восстановление пароля /
   создание объявления / урока / материала / профиль
   ====================================================== */
.create-ad,
.lesson-form-wrap {
    animation: fadeIn 0.4s ease both;
}

.banner .logo {
    animation: fadeIn 0.6s ease both, floatSlow 5s ease-in-out 0.6s infinite;
}

.banner h1,
.banner p {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.banner p {
    animation-delay: 0.1s;
}

.reg {
    animation: fadeIn 0.4s ease both;
}

.reg > h1,
.reg .form-group,
.reg .submit-container,
.reg .password-input {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.06s;
}

.reg-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(25, 61, 80, 0.2);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #193D50 !important;
    box-shadow: 0 0 0 4px rgba(25, 61, 80, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ======================================================
   ПРОФИЛЬ / ЛИЧНЫЙ КАБИНЕТ
   ====================================================== */
.profile-header-block,
.account-header {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.profile-header-block img,
.profile-header-block .avatar-placeholder,
.account-header img {
    transition: transform 0.3s ease;
}

.profile-header-block:hover img,
.profile-header-block:hover .avatar-placeholder {
    transform: scale(1.03);
}

/* ======================================================
   СТРАНИЦЫ ОШИБОК (404 / error)
   ====================================================== */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.error-container h1 {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
               floatSlow 3.5s ease-in-out 0.6s infinite;
    display: inline-block;
}

.error-container p {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}

.error-container .home-link {
    display: inline-block;
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.2s;
}

.error-container .home-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(25, 61, 80, 0.25);
}

/* ======================================================
   КОНТАКТЫ
   ====================================================== */
.leader-card,
.quick-contacts {
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.quick-contacts {
    animation-delay: 0.08s;
}

.leader-photo {
    transition: transform 0.3s ease;
}

.leader-card:hover .leader-photo {
    transform: scale(1.03);
}

.leader-social-item,
.quick-contact-item {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}

.leader-social-item:hover {
    transform: translateY(-3px) scale(1.08);
}

.quick-contact-item:hover {
    transform: translateX(4px);
}

.quick-contact-item .icon-badge {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-contact-item:hover .icon-badge {
    transform: scale(1.12) rotate(-4deg);
}

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