/*
 * Skeleton loading — Package C.
 *
 * Two consumer surfaces share these primitives:
 *
 *   • Header search dropdown (skeleton-shimmer + skeleton-bar classes
 *     applied to inline elements rendered by search-autocomplete.js).
 *
 *   • Catalog grid (skeleton-card mirrors the real product card
 *     dimensions so the swap from skeleton → real cards has no layout
 *     jump). Inserted by app.js's catalog-filter module on AJAX
 *     filter changes that take >150 ms.
 *
 * Animation
 * ---------
 * A 1.6 s ease-in-out shimmer sweeps a translucent gradient left-to-
 * right across every .skeleton-shimmer surface. The motion is purely
 * decorative — `prefers-reduced-motion` disables it cleanly without
 * losing the placeholder shape.
 *
 * Brand tokens used:
 *   #F2EDE3  skeleton base (slightly cooler than #FAF7F2 page bg)
 */

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

.skeleton-shimmer {
    position: relative;
    background: #F2EDE3;
    overflow: hidden;
}
.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: amc-skeleton-shimmer 2.4s var(--amc-ease-soft, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
    pointer-events: none;
}

/* ─── Catalog skeleton card ───────────────────────────────────────── */

.skeleton-card {
    background: #FFFFFF;
    border: 1px solid #E8E2D5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.skeleton-card__image {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #F2EDE3;
}

.skeleton-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-card__name {
    height: 14px;
    width: 70%;
    background: #F2EDE3;
    border-radius: 4px;
}

.skeleton-card__price {
    height: 12px;
    width: 35%;
    background: #F2EDE3;
    border-radius: 4px;
    margin-top: 4px;
}

/* ─── Catalog grid loading state ──────────────────────────────────── */

/* Crossfade transition wrapper used by app.js when swapping skeleton
 * cards for real cards. Keeps both layers visible briefly so there's
 * no flash. */
[data-catalog-content].is-skeleton-leaving {
    opacity: 0;
    transition: opacity var(--amc-motion-medium, 420ms) var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-catalog-content].is-content-entering {
    opacity: 0;
}
[data-catalog-content].is-content-entered {
    opacity: 1;
    transition: opacity var(--amc-motion-medium, 420ms) var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ─── Catalog empty + error states ────────────────────────────────── */

.catalog-empty,
.catalog-error {
    text-align: center;
    padding: 64px 24px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: #1A1410;
    opacity: 0.7;
}

.catalog-empty__title,
.catalog-error__title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: #1A1410;
    opacity: 1;
    margin: 0 0 12px;
}

.catalog-empty__lead,
.catalog-error__lead {
    margin: 0 0 24px;
}

.catalog-empty__action {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C9A961;
    text-decoration: none;
    border-bottom: 1px solid #C9A961;
    padding-bottom: 2px;
    transition:
        color var(--amc-motion-fast, 240ms) var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--amc-motion-fast, 240ms) var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.catalog-empty__action:hover {
    color: #A88A47;
    border-bottom-color: #A88A47;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer::after {
        animation: none;
    }
    [data-catalog-content].is-skeleton-leaving,
    [data-catalog-content].is-content-entered {
        transition: none;
    }
}