/* Hypnore — site-wide image skeleton loader. Shared across all pages. */
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Skeleton for elements whose photo is a CSS background-image (heroes, plan tiles, menu visual).
   Host element must be positioned (absolute/relative) — all our targets already are. */
.skel-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,#16323c 0%,#21495a 24%,#16323c 46%);background-size:220% 100%;
  animation:skelShimmer 1.6s linear infinite;opacity:0;transition:opacity .7s ease}
.skel-bg.skel-on::after{opacity:1}
.skel-bg.skel-done::after{opacity:0}

/* Skeleton for raster <img> content photos — shimmer paints behind the image until it decodes. */
img.skel-img{background:linear-gradient(100deg,#16323c 0%,#21495a 24%,#16323c 46%);background-size:220% 100%;
  animation:skelShimmer 1.6s linear infinite}
img.skel-img.is-loaded{background:none;animation:none}