/* ========================================================================
   motion.css — lightweight motion layer for probiwaem.ru
   Depends on: style.css (already loaded). Paired with motion.js.
   All effects GPU-friendly (transform / opacity / filter only).
   ======================================================================== */

/* ---------- 1. Hero parallax — ОТКЛЮЧЕНО ----------
   Двигать .bg-orb с filter:blur(60px) = постоянный repaint на каждом
   скролл-кадре. Визуальный выигрыш минимален, цена по FPS — огромна.
   Оставляем статичные orbs. */

/* ---------- 1b. Hero breathing — ОТКЛЮЧЕНО ----------
   opacity-анимация на hero-copy триггерит repaint всей hero-области
   каждые 3 секунды. Незаметно глазу, но заметно FPS-метрикам. */

/* ---------- 2. Stagger reveal for marketplace badges ---------- */

.marketplaces .mp {
    opacity: 0;
    transform: translateY(6px) scale(0.92);
    transition:
        opacity 520ms cubic-bezier(.2, .8, .2, 1),
        transform 520ms cubic-bezier(.2, .8, .2, 1);
    will-change: transform, opacity;
}
.marketplaces .mp.mp-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------- 3. Number counter (.bento-big-num) ---------- */

.bento-big-num {
    /* JS swaps innerText. A tiny pop when finished. */
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.bento-big-num.motion-pop {
    transform: scale(1.04);
}

/* ---------- 4. Magnetic primary CTAs ---------- */

.check-form button[type="submit"],
.cta-btn {
    /* Keep any existing transform on :hover from style.css; JS writes translate via var. */
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
    transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
/* When magnetic is active, disable the hover-translateY from style.css so JS controls position. */
.check-form button[type="submit"].motion-mag:hover,
.cta-btn.motion-mag:hover {
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
}

/* ---------- 5. Glow-follow behind primary CTAs (optional, cheap) ---------- */

.check-form button[type="submit"].motion-mag,
.cta-btn.motion-mag {
    position: relative;
    isolation: isolate;
}
.check-form button[type="submit"].motion-mag::after,
.cta-btn.motion-mag::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        140px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(255, 201, 74, 0.35),
        rgba(255, 93, 143, 0.15) 40%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.check-form button[type="submit"].motion-mag.motion-glow::after,
.cta-btn.motion-mag.motion-glow::after {
    opacity: 1;
}

/* ---------- 7. Reduced-motion kill switch ---------- */

@media (prefers-reduced-motion: reduce) {
    .bg-orb {
        transform: none !important;
        transition: none !important;
    }
    .hero-copy { animation: none !important; }

    .marketplaces .mp {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .bento-big-num {
        transition: none !important;
        transform: none !important;
    }

    .check-form button[type="submit"],
    .cta-btn {
        transform: none !important;
        transition: none !important;
    }
    .check-form button[type="submit"].motion-mag::after,
    .cta-btn.motion-mag::after {
        display: none !important;
    }
}