/* Image loading skeleton.
   While a photo is still downloading, show a soft grey block with a gentle
   light sweep instead of blank space. The inline script in assets/inc/top.php
   adds .js-sk to <html> and .sk-ok to each image the moment it has loaded (or
   failed), which switches this off -- so with no JavaScript nothing changes.

   - Only shows if the image is still loading after ~0.12s, so fast / cached
     images never flash a placeholder.
   - The sweep runs for about 6 seconds then settles to a plain grey block
     (no endless animation).
   - Reduced-motion users get the plain grey block, no movement.
   - Translucent grey, so it reads on both light and dark sections. */

html.js-sk img:not(.sk-ok) {
    background-color: rgba(128, 128, 128, 0.14);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 65%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: sk-appear 0.01s linear 0.12s both, sk-sweep 1.5s linear 0.12s 4 both;
}

@keyframes sk-appear {
    from { background-size: 0 0; background-color: transparent; }
    to   { background-size: 300% 100%; background-color: rgba(128, 128, 128, 0.14); }
}

@keyframes sk-sweep {
    from { background-position: 0 0; }
    to   { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.js-sk img:not(.sk-ok) {
        animation: none;
        background-image: none;
        background-color: rgba(128, 128, 128, 0.14);
    }
}