/* akong-skeleton · Web 样式 · 用 var(--ak-*) 接 @akong/tokens */

.ak-skeleton {
  display: block;
  background: var(--ak-bg-subtle);
  /* 防止子元素溢出影响动画 · 给 shimmer 渐变留剪裁边界 */
  overflow: hidden;
  position: relative;
  /* 屏幕阅读器外不显示文本 */
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* === Radius === */
.ak-skeleton--radius-sm   { border-radius: var(--ak-radius-sm); }
.ak-skeleton--radius-md   { border-radius: var(--ak-radius-md); }
.ak-skeleton--radius-lg   { border-radius: var(--ak-radius-lg); }
.ak-skeleton--radius-full { border-radius: var(--ak-radius-full); }

/* === Variant: pulse · opacity 0.5 ↔ 1 · 1.4s ease-in-out infinite === */
.ak-skeleton--pulse {
  animation: ak-skeleton-pulse 1.4s var(--ak-ease-in-out) infinite;
}

@keyframes ak-skeleton-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* === Variant: shimmer · linear-gradient sweep · 1.4s linear infinite === */
.ak-skeleton--shimmer {
  background-image: linear-gradient(
    90deg,
    var(--ak-bg-subtle) 0%,
    var(--ak-bg-hover) 50%,
    var(--ak-bg-subtle) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ak-skeleton-shimmer 1.4s linear infinite;
}

@keyframes ak-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === a11y · prefers-reduced-motion 直接静止 (但保留 bg) === */
@media (prefers-reduced-motion: reduce) {
  .ak-skeleton--pulse,
  .ak-skeleton--shimmer {
    animation: none;
  }
}