/* ================================================================
   CYBE SHIMMER — universal image loading effect (frontend)
   Applied by cybe-shimmer.js to every <img> on the site. No markup
   changes needed anywhere — it self-attaches and self-removes.
   ================================================================ */

img.cybe-shimmer,
.cybe-shimmer.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"] img.cybe-shimmer,
[data-theme="dark"] .cybe-shimmer.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%
    );
}

/* Once a background-image element settles, drop the shimmer gradient
   entirely so the real background-image (set inline by the JS) shows. */
.cybe-shimmer-bg.cybe-shimmer-done {
    background-color: transparent;
}

@keyframes cybeShimmerSweep {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

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

@media (prefers-reduced-motion: reduce) {
    img.cybe-shimmer { animation: none; }
}