/* Skeleton loaders — animated gradient placeholders. Use in place of "Loading..." text.
   Apply .skeleton to a block-level element, sized by the surrounding layout
   or by .skeleton-text / .skeleton-card / .skeleton-row helpers. */

.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(212, 197, 163, 0.04) 0%,
        rgba(212, 197, 163, 0.10) 50%,
        rgba(212, 197, 163, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s linear infinite;
    border-radius: 4px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
    border: 1px solid rgba(212, 197, 163, 0.08);
}

.skeleton::after {
    /* extra subtle highlight that runs under the gradient — adds depth on dark glass backgrounds */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 197, 163, 0.04), transparent);
    animation: skeleton-sweep 1.6s linear infinite;
}

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

@keyframes skeleton-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Sizing helpers */
.skeleton-text       { display: inline-block; height: 1em; min-width: 80px; vertical-align: middle; }
.skeleton-text-lg    { height: 1.4em; min-width: 160px; }
.skeleton-card       { width: 100%; height: 80px; margin: 8px 0; }
.skeleton-row        { width: 100%; height: 36px; margin: 6px 0; }
.skeleton-list > .skeleton-row + .skeleton-row { margin-top: 8px; }

/* News headline placeholder: stacks two lines mimicking title + meta */
.skeleton-news {
    padding: 14px 0;
    border-bottom: 1px solid rgba(212, 197, 163, 0.05);
}
.skeleton-news .skeleton {
    display: block;
    margin-bottom: 8px;
}
.skeleton-news .skeleton:nth-child(1) { width: 80%; height: 16px; }
.skeleton-news .skeleton:nth-child(2) { width: 35%; height: 12px; }

/* Respect reduced motion — drop the shimmer, keep a static block */
@media (prefers-reduced-motion: reduce) {
    .skeleton, .skeleton::after { animation: none; }
}