@layer components {
    .skeleton {
        border-radius: var(--radius-m);
        background: linear-gradient(100deg, var(--haze) 40%, var(--sky-tint) 50%, var(--haze) 60%);
        background-size: 200% 100%;
        animation: skeleton-shimmer 1.4s infinite linear;
        min-height: 1em;
    }

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

    @media (prefers-reduced-motion: reduce) {
        .skeleton {
            animation: none;
        }
    }
}