/* ===========================================================================
   Equism — анимации
   ---------------------------------------------------------------------------
   Только transform и opacity: остальные свойства заставляют браузер
   пересчитывать раскладку и дают дёргание на мобильных.

   Любое движение отключается при системной настройке «уменьшить движение»
   (блок в самом низу файла).
   =========================================================================== */

/* ===========================================================================
   КЕЙФРЕЙМЫ
   =========================================================================== */

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

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

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

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

@keyframes hmShimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* Прочерчивание бронзовой черты — подпись под заголовком */
@keyframes hmDrawRule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Пружинка для «в избранное» */
@keyframes hmPop {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.32); }
    68%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes hmPulseRing {
    0%   { transform: scale(0.85); opacity: 0.55; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* Проявление арта героя до заданной, а не до полной непрозрачности */
@keyframes hmArtIn {
    from { opacity: 0; }
    to   { opacity: var(--hm-art-o, 0.42); }
}

/* Прорисовка обводки SVG. Работает в паре с pathLength="1" в разметке */
@keyframes hmDrawPath {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* ===========================================================================
   ВХОД СТРАНИЦЫ
   ---------------------------------------------------------------------------
   Короткое всплывание основного контейнера. Намеренно 420ms и всего 12px:
   длинные входные анимации на каждой навигации быстро раздражают.
   =========================================================================== */

.hm-page-enter {
    animation: hmFadeUpSm 420ms var(--hm-ease-out) both;
}

/* ===========================================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ---------------------------------------------------------------------------
   Класс .is-visible навешивает hm-ui.js через IntersectionObserver.
   =========================================================================== */

.hm-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--hm-t-reveal) var(--hm-ease-out),
        transform var(--hm-t-reveal) var(--hm-ease-out);
}

.hm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ступенчатое появление детей. Индекс задаётся через --i (ставит JS). */
.hm-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 520ms var(--hm-ease-out),
        transform 520ms var(--hm-ease-out);
    transition-delay: calc(var(--i, 0) * 65ms);
}

.hm-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================================
   ГЕРОЙ
   =========================================================================== */

.hm-hero__line {
    display: block;
    opacity: 0;
    animation: hmFadeUp 760ms var(--hm-ease-out) both;
}

.hm-hero__line:nth-child(1) { animation-delay: 80ms; }
.hm-hero__line:nth-child(2) { animation-delay: 190ms; }
.hm-hero__line:nth-child(3) { animation-delay: 300ms; }

/* Элементы героя всплывают по очереди */
.hm-hero-in > * {
    opacity: 0;
    animation: hmFadeUp 700ms var(--hm-ease-out) both;
}

.hm-hero-in > *:nth-child(1) { animation-delay: 60ms; }
.hm-hero-in > *:nth-child(2) { animation-delay: 150ms; }
.hm-hero-in > *:nth-child(3) { animation-delay: 260ms; }
.hm-hero-in > *:nth-child(4) { animation-delay: 370ms; }
.hm-hero-in > *:nth-child(5) { animation-delay: 470ms; }
.hm-hero-in > *:nth-child(6) { animation-delay: 560ms; }

/* Бронзовая черта прочерчивается слева */
.hm-rule--draw {
    transform-origin: left center;
    animation: hmDrawRule 760ms var(--hm-ease-out) 340ms both;
}

.hm-rule--draw.hm-rule--center {
    transform-origin: center;
}

/* Арт героя: въезжает и слегка отзывается на курсор (переменные ставит JS).

   Гаснет не в opacity:1, а в --hm-art-o. Раньше здесь стоял hmFadeIn с
   fill-mode both: анимация доводила арт до полной непрозрачности и
   затирала заданные в hm-home.css 0.5 — силуэт всё время висел на полную
   яркость и перебивал заголовок. Целевое значение задаётся переменной,
   поэтому мобильная медиазапрос-версия тоже работает. */
.hm-hero__art {
    --hm-art-o: 0.42;
    opacity: 0;
    animation: hmArtIn 1100ms var(--hm-ease-out) 200ms both;
    transform: translate3d(
        calc(var(--hm-par-x, 0) * 1px),
        calc(var(--hm-par-y, 0) * 1px),
        0
    );
    transition: transform 900ms var(--hm-ease-out);
    will-change: transform;
}

/* Прорисовка силуэта: линии «рисуются» от начала к концу.

   У каждой линии в разметке стоит pathLength="1", поэтому длина обводки
   нормирована к единице и один и тот же dasharray подходит всем путям —
   иначе под каждый пришлось бы считать реальную длину. */
.hm-hero__art .hm-art-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hmDrawPath 2s var(--hm-ease-out) 420ms both;
}

.hm-hero__art .hm-art-line:nth-of-type(2n) {
    animation-delay: 620ms;
}

.hm-hero__art .hm-art-line:nth-of-type(3n) {
    animation-delay: 820ms;
}

/* Грива и заклёпки — пунктир и точки, их не «рисуют», а проявляют */
.hm-hero__art .hm-art-soft {
    animation: hmFadeIn 1400ms var(--hm-ease-out) 1s both;
}

/* ===========================================================================
   КАРТОЧКИ
   ---------------------------------------------------------------------------
   Подъём + расцветание тени + зум фото + бронзовая линия слева.
   =========================================================================== */

.hm-hover-lift {
    transition: transform var(--hm-t-slow) var(--hm-ease),
        box-shadow var(--hm-t-slow) var(--hm-ease),
        border-color var(--hm-t-slow) var(--hm-ease);
}

.hm-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--hm-sh-lg);
    border-color: var(--hm-bronze-line);
}

/* Бронзовая линия, прочерчивающаяся по левому краю на ховере */
.hm-edge-draw {
    position: relative;
    overflow: hidden;
}

.hm-edge-draw::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hm-bronze);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--hm-t-slow) var(--hm-ease);
}

.hm-edge-draw:hover::before {
    transform: scaleY(1);
}

/* Зум фотографии внутри карточки */
.hm-zoom-media {
    overflow: hidden;
}

.hm-zoom-media img {
    transition: transform 620ms var(--hm-ease-out);
}

.hm-hover-lift:hover .hm-zoom-media img,
.hm-zoom-media:hover img {
    transform: scale(1.05);
}

/* ===========================================================================
   ПОДЧЁРКИВАНИЕ ССЫЛОК НАВИГАЦИИ
   =========================================================================== */

.hm-underline {
    position: relative;
}

.hm-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--hm-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--hm-t-slow) var(--hm-ease);
}

.hm-underline:hover::after,
.hm-underline.is-active::after {
    transform: scaleX(1);
}

/* ===========================================================================
   КАРТИНКИ: ПРОЯВЛЕНИЕ И СКЕЛЕТОН
   ---------------------------------------------------------------------------
   .hm-img-fade ставится в разметке, .is-loaded навешивает hm-ui.js по
   событию load. Пока фото не загрузилось, под ним мерцает скелетон.
   =========================================================================== */

.hm-img-fade {
    opacity: 0;
    transition: opacity 460ms var(--hm-ease-out);
}

.hm-img-fade.is-loaded {
    opacity: 1;
}

.hm-skeleton {
    animation: hmShimmer 1500ms linear infinite;
}

/* ===========================================================================
   ИЗБРАННОЕ
   =========================================================================== */

.hm-fav {
    position: relative;
    transition: transform var(--hm-t) var(--hm-ease),
        color var(--hm-t) var(--hm-ease);
}

.hm-fav.is-active {
    color: var(--hm-danger);
}

.hm-fav.is-bursting {
    animation: hmPop 460ms var(--hm-ease-out);
}

.hm-fav.is-bursting::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--hm-danger);
    border-radius: 50%;
    animation: hmPulseRing 560ms var(--hm-ease-out) forwards;
    pointer-events: none;
}

/* ===========================================================================
   ШАПКА ПРИ ПРОКРУТКЕ
   ---------------------------------------------------------------------------
   .is-stuck и .is-hidden навешивает hm-ui.js.
   =========================================================================== */

.hm-header {
    transition: transform var(--hm-t-slow) var(--hm-ease),
        box-shadow var(--hm-t-slow) var(--hm-ease),
        background var(--hm-t-slow) var(--hm-ease);
}

.hm-header.is-stuck {
    box-shadow: var(--hm-sh-green);
}

.hm-header.is-hidden {
    transform: translateY(-100%);
}

/* ===========================================================================
   УМЕНЬШЕНИЕ ДВИЖЕНИЯ
   ---------------------------------------------------------------------------
   Полностью снимаем анимации и обязательно возвращаем opacity/transform,
   иначе элементы, стартующие с opacity:0, останутся невидимыми.
   =========================================================================== */

@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;
    }

    .hm-reveal,
    .hm-stagger > *,
    .hm-hero-in > *,
    .hm-hero__line,
    .hm-img-fade,
    .hm-page-enter {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Арт возвращаем к его декоративной непрозрачности, а не к единице:
       на полную яркость силуэт перебивает заголовок героя. */
    .hm-hero__art {
        opacity: var(--hm-art-o, 0.42) !important;
        transform: none !important;
    }

    /* Обводку показываем целиком — иначе силуэт остался бы недорисованным */
    .hm-hero__art .hm-art-line {
        stroke-dashoffset: 0 !important;
    }

    .hm-rule--draw {
        transform: scaleX(1) !important;
    }

    .hm-header.is-hidden {
        transform: none !important;
    }

    .hm-skeleton {
        animation: none !important;
    }
}