/* ================================================================
   CYBE SHIMMER — universal image & icon loading effect (frontend)
   Applied by cybe-shimmer.js to every <img> and icon/image wrapper.

   Two modes:
   1. img.cybe-shimmer          — direct shimmer on bare <img> elements
   2. .cybe-shimmer-wrap::before — overlay shimmer on wrapper containers
      (icon boxes, product thumbnails, logo wrappers, etc.)

   Both self-attach and self-remove when content finishes loading.
   ================================================================ */

/* ── Shared sweep animation ──────────────────────────────────── */
@keyframes cybeShimmerSweep {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

/* ── Mode 1: direct <img> shimmer ───────────────────────────── */
img.cybe-shimmer {
    background-color: var(--neu-bg, #eeeef6);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,0.35) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;
    animation: cybeShimmerSweep 1.3s ease-in-out infinite;
}

[data-theme="dark"] img.cybe-shimmer {
    background-color: var(--neu-bg, #0f0f22);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,0.08) 50%,
        transparent 70%
    );
}

img.cybe-shimmer-done {
    animation: none;
    background-image: none;
}

/* ── Mode 2: wrapper overlay shimmer ────────────────────────── */
/*
   Applied to any container wrapping an <img> or icon.
   The ::before pseudo-element sits on top of everything inside,
   covers the container fully, and sweeps away on load.
   Requires position:relative on the wrapper — added inline by JS
   when the class is applied (or already present via CSS).
*/
.cybe-shimmer-wrap {
    position: relative !important;
}

.cybe-shimmer-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 9;
    border-radius: inherit;
    background-color: var(--neu-bg, #eeeef6);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,0.35) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;
    animation: cybeShimmerSweep 1.3s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="dark"] .cybe-shimmer-wrap::before {
    background-color: var(--neu-bg, #0f0f22);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,0.08) 50%,
        transparent 70%
    );
}

/* Fade the overlay out smoothly, then remove */
.cybe-shimmer-wrap.cybe-shimmer-done::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* ── Mode 3: CSS background-image elements [data-cybe-bg] ───── */
.cybe-shimmer-bg {
    background-color: var(--neu-bg, #eeeef6);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,0.35) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;
    animation: cybeShimmerSweep 1.3s ease-in-out infinite;
}

[data-theme="dark"] .cybe-shimmer-bg {
    background-color: var(--neu-bg, #0f0f22);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255,255,255,0.08) 50%,
        transparent 70%
    );
}

.cybe-shimmer-bg.cybe-shimmer-done {
    background-color: transparent;
    animation: none;
}

/* ── Accessibility ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    img.cybe-shimmer,
    .cybe-shimmer-wrap::before,
    .cybe-shimmer-bg {
        animation: none;
    }
}