/* Skeleton Atom - Layer 3 (Panel color) */
.skeleton {
  background-color: var(--bg-panel);        /* #fafaf9 - Panel layer */
  border-radius: var(--border-radius-md);
  position: relative;
  overflow: hidden;
}

.skeleton-text {
  height: 1em;
  border-radius: var(--border-radius-sm);
}

.skeleton-circle {
  border-radius: var(--border-radius-full);
  aspect-ratio: 1;
}

.skeleton-rect {
  border-radius: var(--border-radius-md);
}

.skeleton-animation-pulse {
  animation: skeleton-pulse 2s ease-in-out infinite;
}

.skeleton-animation-wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: skeleton-wave 2s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes skeleton-wave {
  0% { left: -100%; }
  100% { left: 100%; }
}