/* =============================================================
   animations.css  –  Flatsome Child Theme
   Hệ thống fade-in-up dùng Intersection Observer.
   Class .ql-animate được thêm vào template,
   JS sẽ toggle .is-visible khi element vào viewport.
   ============================================================= */

/* ---- Trạng thái ban đầu: ẩn + dịch xuống ---- */
.ql-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

/* ---- Trạng thái đã visible ---- */
.ql-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Stagger delays (dùng data-delay="N" trên element) ---- */
.ql-animate[data-delay="1"]  { transition-delay: 0.08s; }
.ql-animate[data-delay="2"]  { transition-delay: 0.16s; }
.ql-animate[data-delay="3"]  { transition-delay: 0.24s; }
.ql-animate[data-delay="4"]  { transition-delay: 0.32s; }
.ql-animate[data-delay="5"]  { transition-delay: 0.40s; }
.ql-animate[data-delay="6"]  { transition-delay: 0.48s; }
.ql-animate[data-delay="7"]  { transition-delay: 0.56s; }
.ql-animate[data-delay="8"]  { transition-delay: 0.64s; }

/* ---- Stagger nhanh hơn cho card lists ---- */
.ql-animate[data-delay-fast="1"]  { transition-delay: 0.05s; }
.ql-animate[data-delay-fast="2"]  { transition-delay: 0.10s; }
.ql-animate[data-delay-fast="3"]  { transition-delay: 0.15s; }
.ql-animate[data-delay-fast="4"]  { transition-delay: 0.20s; }
.ql-animate[data-delay-fast="5"]  { transition-delay: 0.25s; }
.ql-animate[data-delay-fast="6"]  { transition-delay: 0.30s; }

/* ---- Animation cho hero sections (slide từ trên xuống) ---- */
.ql-animate-down {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.ql-animate-down.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Animation fade-in đơn giản (không dịch chuyển) ---- */
.ql-animate-fade {
    opacity: 0;
    transition: opacity 1s ease;
    will-change: opacity;
}

.ql-animate-fade.is-visible {
    opacity: 1;
}

/* ============================================================
   Accessibility: Tắt toàn bộ animation nếu user prefer
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ql-animate,
    .ql-animate-down,
    .ql-animate-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}