/* =====================================================================
   Hieu ung cuon (scroll reveal) — dung chung cho moi trang cong khai.

   Nguyen tac: HTML server tra ve KHONG BAO GIO chua trang thai an.
   Class .reveal chi do public/js/reveal.js gan luc runtime, va duoc go
   sach sau khi chay xong. Tat JS / chan file / crawler doc source deu
   thay noi dung day du nhu cu.
   ===================================================================== */

.reveal {
    --rv-x: 0px;
    --rv-y: 0px;
    --rv-s: 1;
    --rv-dur: 620ms;
    --rv-delay: 0ms;
    --rv-ease: cubic-bezier(.22, .61, .36, 1);

    opacity: 0;
    transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-s));
    transition:
        opacity var(--rv-dur) var(--rv-ease) var(--rv-delay),
        transform var(--rv-dur) var(--rv-ease) var(--rv-delay);
    will-change: opacity, transform;
}

/* Section / khoi chung: mo dan + truot len */
.reveal-up {
    --rv-y: 26px;
}

/* Cot trai cua bo cuc hai cot */
.reveal-left {
    --rv-x: -38px;
}

/* Cot phai cua bo cuc hai cot */
.reveal-right {
    --rv-x: 38px;
}

/* Khoi chu quan trong: nhe va nhanh hon */
.reveal-soft {
    --rv-y: 12px;
    --rv-dur: 480ms;
}

/* Modifier cho anh — ghep chung voi huong, vi du: reveal reveal-right reveal-zoom.
   Zoom di tu 1.035 ve 1 (lang ra khoi zoom), khong dung 0.96 -> 1:
   thu nho <img> trong khung overflow:hidden se ho nen o mep suot thoi gian chay. */
.reveal-zoom {
    --rv-s: 1.035;
}

/* Dung transform: none thay vi dat lai cac bien --rv-*: mot so ban Safari cu
   khong transition transform co chua var(). Ket qua hinh anh la nhu nhau. */
.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* Parallax rat nhe cho dai banner full-bleed.
   Ghi vao background-position chu khong phai transform, nen khong tao
   containing block moi -> khong pha position:sticky cua header. */
.rv-parallax {
    background-position: center calc(50% + var(--rv-py, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.in-view {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .rv-parallax {
        background-position: center center !important;
    }
}