/**
 * pvt-lazy.css — Lazy load fade-in animation
 * PVT Image Pro v1.1.0 | Phase 2
 *
 * Thiết kế:
 *   - pvt-lazy   : opacity 0 (ẩn, chờ load)
 *   - pvt-loaded : opacity 1 (hiện, fade-in 0.4s)
 *   - background cream (#f5f2ee) làm placeholder trong lúc chờ
 *
 * Không dùng: aspect-ratio, color-mix(), :has(), dvh (theme constraints)
 * Không làm thay đổi layout: transform không được dùng (gây reflow trên mobile)
 */

/* ── Trạng thái chưa load ─────────────────────────────────────────────────── */
img.pvt-lazy {
    opacity: 0;
    background-color: #f5f2ee; /* Warm cream placeholder, hài hòa với brand yoga */
}

/* Đảm bảo IO có thể observe (ảnh có kích thước tối thiểu) */
img.pvt-lazy[width],
img.pvt-lazy[height] {
    min-height: 1px;
}

/* ── Trạng thái đã load ───────────────────────────────────────────────────── */
img.pvt-loaded {
    opacity: 1;
    background-color: transparent;
    transition: opacity 0.4s ease;
}

/* ── Đảm bảo ảnh trong <picture> không bị vỡ layout ─────────────────────── */
picture > img.pvt-lazy,
picture > img.pvt-loaded {
    display: block; /* Xoá inline-block gap */
    width: 100%;
}