/*
 * Тестовая «динамика» главной страницы (подключается только на главной, см. views/pages/view.php).
 * Откат — удалить этот файл, web/js/home-motion.js и их подключение (или git revert коммита).
 *
 * Анимируем только transform/opacity — без сдвигов вёрстки. Элементы прячутся,
 * только когда скрипт поставил html.np-motion, поэтому без JS всё видно сразу.
 */

/* ---------- появление при прокрутке ---------- */
.np-motion [data-reveal] {
    opacity: 0;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
}

/* «fade» — только прозрачность: для элементов со своим transform (скриншот в Hero) */
.np-motion [data-reveal]:not([data-reveal="fade"]) {
    transform: translateY(28px);
}

.np-motion [data-reveal="zoom"] {
    transform: scale(.94);
}

.np-motion [data-reveal].is-revealed {
    opacity: 1;
}

.np-motion [data-reveal]:not([data-reveal="fade"]).is-revealed {
    transform: none;
}

/* ---------- Hero при загрузке: CSS-анимация с первого кадра, без мигания ---------- */
@keyframes np-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes np-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.np-motion .np-hero-section:first-of-type .np-hero-title,
.np-motion .np-hero-section:first-of-type .np-hero-desc,
.np-motion .np-hero-section:first-of-type .mascot-head {
    animation: np-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}

.np-motion .np-hero-section:first-of-type .np-hero-desc {
    animation-delay: .12s;
}

.np-motion .np-hero-section:first-of-type .mascot-head {
    animation-delay: .24s;
}

/* скриншот и видео Hero — только прозрачность (у них свой transform) */
.np-motion .np-hero-section:first-of-type .np-hero-dashboard-img,
.np-motion .np-hero-section:first-of-type .np-hero-video,
.np-motion .np-hero-section:first-of-type .np-hero-mobile-slider {
    animation: np-fade 1s ease .3s both;
}

/* ---------- живые карточки (только мышь) ---------- */
@media (hover: hover) and (pointer: fine) {
    .np-motion .impact > div,
    .np-motion .business-card.card,
    .np-motion .np-video-preview {
        transition: transform .35s ease, box-shadow .35s ease, opacity .7s ease;
    }

    .np-motion .impact > div:hover,
    .np-motion .business-card.card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(29, 50, 78, .12);
    }

}

/* скриншот в Hero слегка следует за мышью: скрипт задаёт свойство rotate — оно
   добавляется к собственному transform картинки (сдвиг из styles.css), а не заменяет его */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .np-motion .np-hero-dashboard-img {
        transition: rotate .25s ease-out;
    }
}

/* ---------- кнопки: блик при наведении ---------- */
.np-motion .np-btn-getfree,
.np-motion .np-btn-startup {
    position: relative;
    overflow: hidden;
}

.np-motion .np-btn-getfree::before,
.np-motion .np-btn-startup::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

@media (hover: hover) {
    .np-motion .np-btn-getfree:hover::before,
    .np-motion .np-btn-startup:hover::before {
        left: 130%;
        transition: left .7s ease;
    }
}

/* ---------- уважение к «уменьшению движения» ---------- */
@media (prefers-reduced-motion: reduce) {
    .np-motion .np-hero-section:first-of-type * {
        animation: none !important;
    }

    .np-motion [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .np-motion .np-btn-getfree::before,
    .np-motion .np-btn-startup::before {
        display: none;
    }
}