/**
 * Scroll Animations
 *
 * Sử dụng: thêm data-aos="..." vào element cần animate
 * Variants: fade-up | fade-down | slide-left | slide-right | zoom-in | zoom-out | flip-up | blur-in
 * Optional: data-aos-delay="100" (ms), data-aos-duration="1000" (ms)
 */

html,
body {
    overflow-x: clip;
}

[data-aos] {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: 0.9s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

[data-aos="fade-up"]      { transform: translateY(48px); }
[data-aos="fade-down"]    { transform: translateY(-48px); }
[data-aos="slide-left"]   { transform: translateX(-64px); }
[data-aos="slide-right"]  { transform: translateX(64px); }
[data-aos="zoom-in"]      { transform: scale(0.92); }
[data-aos="zoom-out"]     { transform: scale(1.06); }
[data-aos="flip-up"]      { transform: perspective(1000px) rotateX(20deg) translateY(40px); transform-origin: bottom; }
[data-aos="blur-in"]      { filter: blur(14px); transform: scale(1.04); }

[data-aos].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Stagger children: thêm data-aos-stagger trên parent, animation cho .stagger-item con */
[data-aos-stagger] .stagger-item {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--stagger-i, 0) * 90ms);
}

[data-aos-stagger].is-visible .stagger-item {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-aos],
    [data-aos-stagger] .stagger-item {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}