/* Слой движения поверх готовой вёрстки. Три приёма, все из монтажа, а не из веб-анимации: кадр открывается шторкой, склейка уходит в чёрное, кадр на карточке живёт петлёй трейлера. Правила слоя: - анимируются только transform и opacity; ни одно свойство раскладки не меняется ни в начале, ни в конце; - конечное состояние каждого приёма совпадает с вёрсткой без этого файла пиксель в пиксель: псевдоэлемент шторки уезжает за overflow и гаснет, склейка стоит в opacity 0, петля в opacity 0; - всё, что зависит от JS, привязано к классу html.tf-js, который ставит строчный скрипт в до первой отрисовки. Без скрипта ни шторки, ни склейки нет, страница сразу в конечном состоянии; - при prefers-reduced-motion: reduce весь файл не действует: каждый приём лежит внутри @media (prefers-reduced-motion: no-preference); - какое устройство перед нами, решает CSS (hover, pointer), скрипт читает результат через checkVisibility(), а не через matchMedia; - всё только для экрана (@media screen): на печати и в PDF страница в конечном состоянии, ни шторок, ни слоя склейки. */ /* ---- 1. Шторка кадра. Псевдоэлемент цвета фона лежит поверх кадра и уезжает вправо, когда скрипт даёт .tf-frame--open: когда видно не меньше трёх четвертей кадра, а для кадра выше окна - когда его верх поднялся выше трети экрана. Кадр открывается слева направо, как в ленте кадров, куда они и въезжают справа. Кадр .hero__frame первого экрана классом .tf-frame не является и шторки не получает. ---- */ @media screen and (prefers-reduced-motion:no-preference){ html.tf-js .tf-frame::after{content:"";position:absolute;inset:0;z-index:2;background:var(--bg,#0A0A0A);pointer-events:none;transform:translateX(0);transition:transform var(--dur-reveal,600ms) var(--ease-reveal,cubic-bezier(0.3,0,0.4,1)),visibility 0s linear var(--dur-reveal,600ms)} html.tf-js .tf-frame--open::after{transform:translateX(100%);visibility:hidden} /* Возврат по истории (класс ставит строчный скрипт в по типу навигации back_forward): кадры уже показывали, второй раз не играют */ html.tf-back .tf-frame::after{content:none} } /* Горизонтальные ленты на телефоне (до 767 включительно): шторки нет, кадр показан сразу. Карточка за краем окна шторку не открывает: наблюдатель ждёт три четверти видимости, а при свайпе карточка входит в окно постепенно, и до открытия видна чёрным прямоугольником (замечание заказчика 15.09 про кадры фильма; 16.09 то же у ленты постеров главной; 18.09 - у лент карточек фильмов: вторая карточка «Других фильмов» на странице фильма и «Наших работ» на «О нас» видна на 94 px из 260 и стоит закрытой). Ленты: .gallery (постеры на главной, кадры на странице фильма) и карточки- ссылки a.films__item в .films («Другие фильмы» на страницах фильмов, «Наши работы» на «О нас»; в разделе «Фильмы» .films - столбец карточек-статей, не лента, у них шторка остаётся). На широких экранах шторка остаётся и открывается один раз на всю ленту (motion-layer.js). Решает медиазапрос, а не замер в скрипте. */ @media screen and (max-width:767px){ html.tf-js .gallery .tf-frame::after, html.tf-js .films a.films__item .tf-frame::after{content:none} } /* ---- 2. Петля трейлера на карточке раздела «Фильмы». Элемент