/* Tokens */
:root{
  --sk-bg: #ececec;                 /* day base */
  --sk-rail: rgba(0,0,0,.07);       /* day shimmer */
  --sk-radius: 14px;
  --sk-speed: .9s;                  /* shimmer speed */
}
body.night-mode{
  --sk-bg: #1f1f1f;                 /* night base */
  --sk-rail: rgba(255,255,255,.08); /* night shimmer */
}

/* Mask host */
.skel-mask{
  position: relative;
  border-radius: var(--sk-radius);
  background: color-mix(in srgb, var(--sk-bg) 35%, transparent);
  overflow: hidden;
}

/* Shimmer rail */
.skel-mask::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    var(--sk-rail) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: sk-rail var(--sk-speed) ease-in-out infinite;
}
@keyframes sk-rail { 100% { transform: translateX(100%); } }

/* Hide real content while masked (prevents the “white box” flash) */
.skel-mask > *{ visibility: hidden; }

/* Reveal transition */
.skel-reveal > *{ visibility: visible; animation: sk-fade .22s ease; }
@keyframes sk-fade { from{opacity:0} to{opacity:1} }

/* Nice defaults for heavy sections to avoid layout jank */
.skel-mask{ content-visibility:auto; contain-intrinsic-size: 800px 600px; } /* tune per block */