/* ============================================
   PFL App — Skeleton Loaders
   Based on index_old.html
   ============================================ */

/* ---- Base Skeleton Animation ---- */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* Grey skeleton (for cards/tables) */
.skel {
  background: linear-gradient(90deg,
    rgba(0,0,0,.06) 25%, rgba(0,0,0,.11) 50%, rgba(0,0,0,.06) 75%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s infinite linear;
  border-radius: 6px;
}

:root[data-theme="dark"] .skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,.07) 25%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.07) 75%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s infinite linear;
}

/* White skeleton (for blue podium area) */
.skel-w {
  background: linear-gradient(90deg,
    rgba(255,255,255,.18) 25%, rgba(255,255,255,.33) 50%, rgba(255,255,255,.18) 75%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .skel,
  .skel-w {
    animation: none;
  }
}