/* MOE — Skeleton loading shimmer (RTL/LTR aware, motion-safe) */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 8px;
    display: block;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0) 100%);
    animation: moe-skeleton-shimmer 1.4s infinite;
}

[dir="rtl"] .skeleton::after { animation-direction: reverse; }

@keyframes moe-skeleton-shimmer {
    100% { transform: translateX(100%); }
}

.skeleton-card     { height: 320px; margin-bottom: 1rem; }
.skeleton-img      { height: 200px; margin-bottom: .75rem; }
.skeleton-title    { height: 22px; width: 60%; margin-bottom: .75rem; }
.skeleton-line     { height: 14px; margin: .5rem 0; }
.skeleton-circle   { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto .75rem; }
.skeleton-counter  { height: 90px; }

.lazy-host         { min-height: 200px; }
.lazy-host[aria-busy="false"] { min-height: 0; }
.lazy-error        { padding: 2rem; text-align: center; color: #6c757d; }
.lazy-error .btn   { margin-top: .75rem; }

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