/* ═══════════════════════════════════════════════════════════
   home-fx.css — __HOME_FX_HX1__
   Homepage motion layer: reveal-on-scroll, scramble, count-up.
   Guard: all hiding is scoped to .hx-on (set by JS at runtime),
   so no-JS / JS-error keeps the page fully visible.
   ═══════════════════════════════════════════════════════════ */

.hx-on [data-hx-reveal] {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}

.hx-on [data-hx-reveal].hx-in {
    opacity: 1;
    transform: none;
    transition:
        opacity   .85s cubic-bezier(.22,.61,.36,1) var(--hx-d, 0ms),
        transform .85s cubic-bezier(.22,.61,.36,1) var(--hx-d, 0ms);
}

.hx-on [data-hx-reveal].hx-in.hx-done {
    will-change: auto;
}

/* scramble */
.hx-glitch {
    opacity: .45;
    font-weight: inherit;
}

/* count-up: без дёрганья ширины */
[data-hx-countup] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* a11y / print */
@media (prefers-reduced-motion: reduce) {
    .hx-on [data-hx-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media print {
    .hx-on [data-hx-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}