/* =============================================
   SCROLL-REVEAL.CSS
   Hiện khi scroll đến, ẩn khi scroll qua
   ============================================= */

/* Trạng thái mặc định — ẩn */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Đang hiển thị trong viewport */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Đã lướt qua — ẩn lên trên */
.reveal.hidden-above {
    opacity: 0;
    transform: translateY(-28px);
}

/* ── Biến thể hướng ── */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-left.hidden-above  { opacity: 0; transform: translateX(-40px); }
.reveal-right.hidden-above { opacity: 0; transform: translateX(40px);  }

/* ── Scale in ── */
.reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.visible      { opacity: 1; transform: scale(1);    }
.reveal-scale.hidden-above { opacity: 0; transform: scale(0.88); }

/* ── Stagger delay cho list items ── */
.reveal-stagger > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-stagger > *:nth-child(2)  { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4)  { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(5)  { transition-delay: 0.32s; }
.reveal-stagger > *:nth-child(6)  { transition-delay: 0.40s; }