/* Rocksosint · skeleton pontilhado (histórico, investigações, cards do dashboard).
 * Mesma linguagem dos orbs: o bloco é feito de pontos, e uma faixa de luz em osso
 * passa por eles. A máscara de pontos recorta um gradiente que desliza, então só os
 * pontos acendem. `:root` na frente ganha dos estilos antigos que vêm depois.
 */

:root .skeleton,
:root .invest-skel,
:root .skel-ic,
:root .skel-bar {
  --skel-dim: color-mix(in oklch, var(--bone-50) 24%, transparent);
  --skel-lit: color-mix(in oklch, var(--bone-50) 85%, transparent);
  border: 0;
  background: linear-gradient(100deg, var(--skel-dim) 36%, var(--skel-lit) 50%, var(--skel-dim) 64%) 0 0 / 300% 100%;
  -webkit-mask: radial-gradient(circle, #000 1.25px, transparent 1.75px) 0 0 / 5px 5px;
  mask: radial-gradient(circle, #000 1.25px, transparent 1.75px) 0 0 / 5px 5px;
  animation: rk-skel-sweep 1.8s linear infinite;
}

/* Blocos grandes (linha do histórico, card de investigação): pontos mais suaves,
   senão viram uma parede, e um respiro entre um e outro */
:root .set__skel,
:root .invest-skel {
  --skel-dim: color-mix(in oklch, var(--bone-50) 11%, transparent);
  --skel-lit: color-mix(in oklch, var(--bone-50) 45%, transparent);
}

:root .set__skel {
  margin-bottom: var(--sp-3);
}

@keyframes rk-skel-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root .skeleton,
  :root .invest-skel,
  :root .skel-ic,
  :root .skel-bar {
    animation: none;
    background: var(--skel-dim);
  }
}