/* ============================================================
   Image skeletons, 2026-10-07. Every <img> is lazy-loaded (includes/lazy-images.php); while an event
   tile or event photo loads, its box shows a soft shimmer instead of an empty hole. The inline script
   in includes/site-header.php adds .is-loaded on load (or error), which stops the shimmer.
   Same pattern as balldrop.com (css/tile-fix.css, "Image skeletons").
   ============================================================ */
@keyframes bd-skeleton {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}
.event-img img:not(.is-loaded),
.tile-list img:not(.is-loaded),
.flier-section img:not(.is-loaded),
.flyerzoom img:not(.is-loaded) {
    background: #ececf0 linear-gradient(100deg, #ececf0 30%, #f7f7f9 50%, #ececf0 70%);
    background-size: 200% 100%;
    animation: bd-skeleton 1.3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .event-img img:not(.is-loaded),
    .tile-list img:not(.is-loaded),
    .flier-section img:not(.is-loaded),
    .flyerzoom img:not(.is-loaded) {
        animation: none;
    }
}