/* D22 Motion board, section 10. Component-local extension; locked brand tokens
   and the 320ms route duration remain unchanged. Geometry belongs to the host. */
.skeleton {
  --skeleton-duration: 1200ms;
  --skeleton-opacity-high: .6;
  --skeleton-opacity-low: .3;
  position: relative;
  overflow: hidden;
  background: var(--line-strong);
  border-radius: var(--radius-2);
  opacity: var(--skeleton-opacity-high);
  animation: none;
}
/* Shimmer is visual loading feedback, never a fabricated price or live offer. */
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,transparent 20%,var(--surface-raised) 50%,transparent 80%);
  transform: translateX(-100%);
  animation: d22-skeleton-shimmer var(--skeleton-duration) var(--ease-standard) infinite;
}
@keyframes d22-skeleton-shimmer { to { transform: translateX(100%); } }
@keyframes d22-skeleton-pulse {
  0%, 100% { opacity: var(--skeleton-opacity-high); }
  50% { opacity: var(--skeleton-opacity-low); }
}
:is([data-reduce-motion=true], [data-reduced-motion=true]) .skeleton {
  animation: none !important;
  opacity: var(--skeleton-opacity-high);
}
:is([data-reduce-motion=true], [data-reduced-motion=true]) .skeleton::after { animation:none!important; display:none; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none !important; opacity: var(--skeleton-opacity-high); }
  .skeleton::after { animation: none!important; display:none; }
}