/* ============================================================================ DICOM TEAM — анимация раскрытия картинок в media-rows ============================================================================ Используется на главной (компонент dicom:media_rows — секция "Наши проекты"), а также везде, где есть .media-row__image. КЛЮЧЕВОЙ ПРИНЦИП: graceful degradation. По умолчанию картинки видны нормально (как до этого модуля). Anim-стили применяются ТОЛЬКО когда на есть класс .media-reveal-ready, который ставит media-reveal.js при инициализации. Если JS не загрузился (битый бандл, сетевой сбой, отключённый JS) — картинки видны без анимации. Сайт не ломается. Что делает анимация (когда JS работает): 1. На скролле в зону видимости картинка плавно проявляется снизу с лёгким zoom-out (1.08 → 1.0). ~0.7s, easing cubic-bezier(0.16, 1, 0.3, 1). 2. При наведении на карточку картинка медленно зумится до scale(1.06), снизу проступает лёгкий синий градиент-overlay. Стили опираются на существующую разметку:
...
reduce-motion: всё движение отключено, hover-zoom и overlay тоже. ============================================================================ */ /* Контейнер картинки — position:relative нужен для overlay через ::after. Безопасно даже без класса media-reveal-ready: existing overflow:hidden и остальные стили из components.css не меняются. */ .media-row__image { position: relative; } /* === АНИМАЦИОННЫЕ СТИЛИ — ТОЛЬКО ПРИ .media-reveal-ready === Если JS не загрузился, всё ниже не применяется и картинки видны нормально. */ /* Начальное состояние картинки до reveal: невидима, чуть крупнее, ниже. Применяется только когда JS гарантировал что добавит .is-revealed (т.е. поставил класс .media-reveal-ready на html). */ .media-reveal-ready .media-row__image img { opacity: 0; transform: scale(1.08) translateY(24px); transition: opacity 0.8s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } /* Финальное состояние — JS добавил .is-revealed когда картинка в viewport. */ .media-reveal-ready .media-row__image.is-revealed img { opacity: 1; transform: scale(1) translateY(0); } /* Усиленный hover-zoom (было scale 1.03 в components.css → теперь 1.06). Только для уже проявленных картинок и только когда JS активен. */ .media-reveal-ready .media-row:hover .media-row__image.is-revealed img { transform: scale(1.06); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Overlay-градиент снизу при hover. Создаётся даже без JS (на чистом CSS), но показывается только при hover, поэтому не мешает. */ .media-row__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 55%, rgba(13, 117, 178, 0.18) 100% ); opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.4s ease; } .media-row:hover .media-row__image::after { opacity: 1; } /* === Reduce-motion фолбэк === Все картинки сразу видны без анимации, hover-zoom отключён, overlay скрыт. Дублируем правила и для media-reveal-ready, и без него — защита от любого состояния, в котором страница может оказаться. */ @media (prefers-reduced-motion: reduce) { .media-reveal-ready .media-row__image img, .media-row__image img { opacity: 1 !important; transform: none !important; transition: none !important; } .media-row:hover .media-row__image img, .media-reveal-ready .media-row:hover .media-row__image.is-revealed img { transform: none !important; } .media-row__image::after { display: none !important; } }