/* ===== Simple Skeleton (SS) – v1.0 ===== */
:root{
  --ss-base: hsl(210 16% 92%);
  --ss-highlight: hsl(210 16% 96%);
  --ss-speed: 1.2s;
  --ss-radius: 10px;
}

/* Solo marcatore per il JS, nessuno stile applicato */
.ss {}

/* Skeleton attivo */
.ss-active {
  position: relative !important;
  overflow: hidden !important;
  /* border-radius: var(--ss-radius) !important; */
  background-color: var(--ss-base) !important;
  background-image: linear-gradient(
    90deg,
    var(--ss-base) 25%,
    var(--ss-highlight) 37%,
    var(--ss-base) 63%
  ) !important;
  background-size: 400% 100% !important;
  animation: ss-shimmer var(--ss-speed) ease-in-out infinite !important;
  pointer-events: none !important;

  /* Nasconde il testo e ombre */
  color: transparent !important;
  text-shadow: none !important;
  border: 0px;
}
.ss-active > * {
  visibility: hidden !important;
}

/* Variante circolare */
.ss-active.ss-circle {
  border-radius: 9999px !important;
}

/* Se applicata a <img> */
img.ss-active {
  opacity: 0 !important;
  background-clip: padding-box !important;
}
img.ss:not(.ss-active) {
  opacity: 1 !important;
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
  .ss-active { animation: none !important; }
}

/* Animazione shimmer */
@keyframes ss-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Utility opzionali */
.ss-active.rounded-none { border-radius: 0 !important; }
.ss-active.rounded-sm   { border-radius: 6px !important; }
.ss-active.rounded-md   { border-radius: 10px !important; }
.ss-active.rounded-lg   { border-radius: 14px !important; }
.ss-active.rounded-xl   { border-radius: 18px !important; }