/* Сквозные анимации платформы. Всё содержимое остаётся доступным без JavaScript
   и без анимаций: правила только добавляют движение к готовой вёрстке. */

/* Плавный переход между страницами вместо белой вспышки. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: marcus-page-out .14s ease both; }
::view-transition-new(root) { animation: marcus-page-in .26s ease both; }

/* Шапка одна на всех страницах — при переходе она остаётся на месте. */
.site-global-header { view-transition-name: marcus-site-header; }

/* Заголовок курса и урока «перелетает» из карточки на открытую страницу:
   имя на карточке ставит motion.js в момент клика. */
.course-sidebar h1 { view-transition-name: marcus-course-title; }
.lesson-summary__title { view-transition-name: marcus-lesson-title; }

::view-transition-group(marcus-course-title),
::view-transition-group(marcus-lesson-title) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

::view-transition-old(marcus-course-title),
::view-transition-new(marcus-course-title),
::view-transition-old(marcus-lesson-title),
::view-transition-new(marcus-lesson-title) { height: 100%; object-fit: contain; object-position: left top; }

@keyframes marcus-page-out { to { opacity: 0; } }
@keyframes marcus-page-in { from { opacity: 0; } }
@keyframes marcus-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes marcus-progress-fill { from { transform: scaleX(0); } }
@keyframes marcus-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: no-preference) {
    /* Карточки появляются друг за другом. */
    :where(.program-section, .course-grid > li, .lesson-card, .course-module, .lesson-section, .recorded-step,
           .textbook-part, .billing-product, .notebook-card) {
        animation: marcus-rise .5s cubic-bezier(.2, .8, .2, 1) backwards;
    }
    :where(.program-section, .course-grid > li, .lesson-card, .course-module, .lesson-section, .textbook-part,
           .billing-product, .notebook-card):nth-child(2) { animation-delay: 60ms; }
    :where(.program-section, .course-grid > li, .lesson-card, .course-module, .lesson-section, .textbook-part,
           .billing-product, .notebook-card):nth-child(3) { animation-delay: 120ms; }
    :where(.program-section, .course-grid > li, .lesson-card, .course-module, .lesson-section, .textbook-part,
           .billing-product, .notebook-card):nth-child(4) { animation-delay: 180ms; }
    :where(.program-section, .course-grid > li, .lesson-card, .course-module, .lesson-section, .textbook-part,
           .billing-product, .notebook-card):nth-child(n + 5) { animation-delay: 240ms; }

    /* Полосы прогресса заполняются на глазах. */
    :where(.program-progress__track, .course-card__progress-track, .course-progress, .lesson-task-progress__track,
           .course-review-progress__track, .recorded-lesson-progress) > span {
        transform-origin: left center;
        animation: marcus-progress-fill .9s cubic-bezier(.2, .8, .2, 1) .18s backwards;
    }

    /* Кнопка «проминается» под пальцем. */
    :where(a, button):where([class*="button"], [class*="btn"], [class*="submit"], [class*="-action"],
                            [class*="-open"], [class*="resume"], [class*="__next"], [class*="cta"]):where(:not(:disabled)):active {
        scale: .97;
    }

    /* Пока встроенное видео или презентация грузится, на их месте — мерцающая заглушка. */
    :where(.lesson-page, .recorded-lesson-page) iframe:not(.is-loaded) {
        background: linear-gradient(100deg, #eef2f1 30%, #f8faf9 50%, #eef2f1 70%) 0 0 / 200% 100%;
        animation: marcus-shimmer 1.4s linear 6;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}