/**
 * Subtle, Apple-inspired scroll-reveal tuning for the AOS library already loaded site-wide.
 * Overrides AOS's default 100px travel distance with a smaller, subtler one and applies
 * an ease-out-expo curve. Mobile gets an even smaller/faster reveal so scrolling stays smooth.
 * Fully respects prefers-reduced-motion.
 */

[data-aos="fade-up"] {
    transform: translate3d(0, 24px, 0) !important;
}
[data-aos="fade-up"].aos-animate {
    transform: translate3d(0, 0, 0) !important;
}
[data-aos="fade-down"] {
    transform: translate3d(0, -24px, 0) !important;
}
[data-aos="fade-down"].aos-animate {
    transform: translate3d(0, 0, 0) !important;
}

[data-aos] {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/**
 * Focal-point image columns: a plain transform+opacity slide-in driven by our own
 * IntersectionObserver (not AOS). Only opacity/transform are touched, never
 * width/height, so acf-focal-point's own crop measurement is never affected.
 */
.onyx-focal-sweep {
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.onyx-focal-sweep.onyx-sweep-right {
    transform: translate3d(28px, 0, 0);
}
.onyx-focal-sweep.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 767px) {
    /* Columns stack full-width on mobile — fade+lift instead of a horizontal sweep to avoid any transient overflow */
    .onyx-focal-sweep,
    .onyx-focal-sweep.onyx-sweep-right {
        transform: translate3d(0, 16px, 0);
        transition-duration: 500ms;
    }
}

@media (max-width: 767px) {
    [data-aos="fade-up"] {
        transform: translate3d(0, 14px, 0) !important;
    }
    [data-aos="fade-down"] {
        transform: translate3d(0, -14px, 0) !important;
    }
}

/**
 * single-products.php: whole page-block (.frame) reveal for a fresher, more interactive
 * feel — fades and gently scales the whole section in, while its inner heading/column/card
 * elements (tagged above) layer their own smaller reveal on top.
 */
[data-aos="onyx-block-reveal"] {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.98);
}
[data-aos="onyx-block-reveal"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 767px) {
    [data-aos="onyx-block-reveal"] {
        transform: translate3d(0, 20px, 0) scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .onyx-focal-sweep {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}