/* PUMPSTERS progressive-media layer.
   Visual-only: no layout/feature changes. Gives image slots a polished placeholder
   while large local/Supabase images decode and keeps media responsive. */
:root{--pump-media-base:#090d11;--pump-media-hi:#151c22}
img,video{max-width:100%}
img{height:auto}
img[class*="absolute"],img[class*="h-full"],img[class*="object-"]{height:100%}

/* Image containers already define their final dimensions throughout the app.
   The background is visible only until the bitmap has painted, avoiding the
   large empty black flash on slow/mobile connections. */
img[src]{background-color:var(--pump-media-base);background-image:linear-gradient(105deg,var(--pump-media-base) 20%,var(--pump-media-hi) 38%,var(--pump-media-base) 56%);background-size:220% 100%;animation:pump-media-loading 1.25s ease-in-out infinite}
img[src][src$=".svg"],img[src^="data:"]{background-image:none;animation:none}
@keyframes pump-media-loading{0%{background-position:110% 0}100%{background-position:-110% 0}}

/* Once the browser has decoded an image the bitmap paints over the placeholder.
   Reduced-motion users do not pay for the shimmer animation. */
@media (prefers-reduced-motion:reduce){img[src]{animation:none}}

/* Keep touch UI mobile-first, while preventing media from forcing horizontal
   overflow on tablets/desktops. */
picture,figure{max-width:100%}
@media (min-width:768px){img,video{image-rendering:auto}}