/* WP Turbo Accelerator - Frontend Lazy Load */

/* ── LCP Image: tampil instan, tidak ada transisi ─────────────────── */
img.wpta-lcp {
    /* Browser sudah preload via <link rel="preload">, jadi ini langsung tampil */
    content-visibility: auto;
}

/* ── Lazy images: mulai invisible ─────────────────────────────────── */
img.wpta-lazy {
    opacity: 0;
    /* Pertahankan dimensi agar tidak layout shift saat placeholder */
    transition: none;
    /* Blur ringan sebagai efek placeholder */
    filter: blur(4px);
    transform: scale(1.02);
}

/* ── Menunggu 1 detik (sudah di viewport, belum selesai load) ─────── */
img.wpta-pending {
    opacity: 0;
    filter: blur(8px);
    /* Animasi shimmer selama menunggu */
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: wpta-shimmer 1s ease-in-out infinite;
}

@keyframes wpta-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Loaded: fade-in smooth setelah gambar asli selesai dimuat ────── */
img.wpta-loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transition:
        opacity    0.4s ease-out,
        filter     0.4s ease-out,
        transform  0.4s ease-out;
    animation: none;
    background: none;
}

/* ── Error state ──────────────────────────────────────────────────── */
img.wpta-load-error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* ── Reduce motion: hormati preferensi aksesibilitas ──────────────── */
@media (prefers-reduced-motion: reduce) {
    img.wpta-lazy,
    img.wpta-pending,
    img.wpta-loaded {
        transition: none !important;
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
    img.wpta-lazy   { opacity: 0; }
    img.wpta-loaded { opacity: 1; }
}