/*
 * Hệ thống reveal animation native dùng chung cho frontend.
 *
 * Markup:
 * <div data-reveal="fade-up"></div>
 *
 * Thuộc tính tùy chọn:
 * - data-reveal-delay="150"      Thời gian chờ, milliseconds.
 * - data-reveal-duration="700"   Thời lượng, milliseconds.
 * - data-reveal-distance="24"    Khoảng dịch chuyển, pixels.
 * - data-reveal-once="false"     Cho phép chạy lại khi vào viewport.
 *
 * Nếu phần tử đã dùng transform cho layout/hover/slider, đặt data-reveal
 * trên một wrapper bên ngoài để tránh tranh chấp thuộc tính transform.
 */

:root {
    --base-reveal-duration: 650ms;
    --base-reveal-delay: 0ms;
    --base-reveal-distance: 24px;
    --base-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

html.base-reveal-js [data-reveal] {
    opacity: 0;
    backface-visibility: hidden;
    transform: none;
    transition-property: opacity, transform;
    transition-duration: var(--base-reveal-duration);
    transition-delay: var(--base-reveal-delay);
    transition-timing-function: var(--base-reveal-easing);
    will-change: opacity, transform;
}

html.base-reveal-js [data-reveal="fade-up"] {
    transform: translate3d(0, var(--base-reveal-distance), 0);
}

html.base-reveal-js [data-reveal="fade-down"] {
    transform: translate3d(0, calc(var(--base-reveal-distance) * -1), 0);
}

html.base-reveal-js [data-reveal="fade-left"] {
    transform: translate3d(calc(var(--base-reveal-distance) * -1), 0, 0);
}

html.base-reveal-js [data-reveal="fade-right"] {
    transform: translate3d(var(--base-reveal-distance), 0, 0);
}

html.base-reveal-js [data-reveal="zoom-in"] {
    transform: scale(0.92);
}

html.base-reveal-js [data-reveal="scale-up"] {
    transform: translate3d(0, 10px, 0) scale(0.96);
}

html.base-reveal-js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.base-reveal-js [data-reveal],
    html.base-reveal-js [data-reveal].is-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}

@media print {
    html.base-reveal-js [data-reveal],
    html.base-reveal-js [data-reveal].is-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}