/* ─── Skeleton loading placeholder (always-loaded; reduced-motion-safe) ─────
   Audit G47 (the missing "loading vocabulary"). A space-reserving shimmer block
   for content loading in — AJAX grids, review loads, product loops — with ZERO
   CLS (it reserves the box). The ONE shared primitive so components compose it
   instead of each rolling a private loading cue (product-grid, filters, review
   grids all want this).

   Compose: give it a size (or a variant). Under reduced-motion the ambient
   shimmer STOPS (PRESERVE-5) but the muted box stays (still reads "loading").
   Under forced-colors it becomes a bordered box; in print it's removed. */
.hzo-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-alt);
    border-radius: var(--radius-2);
    /* space-reserving — set a height/width, or use a --* variant below */
}

.hzo-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--bg-page) 65%, transparent),
        transparent
    );
    /* Ambient loop (like the marquee/wave drift) — not a micro-interaction
       transition, so it carries its own tunable speed rather than a --dur-* step. */
    animation: hzo-skeleton-shimmer var(--hzo-skeleton-speed, 1.4s) ease-in-out infinite;
    will-change: transform;
}

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

.hzo-skeleton--text   { height: 0.75em; margin-block: 0.3em; border-radius: var(--radius-1); }
.hzo-skeleton--line   { height: 1em; }
.hzo-skeleton--title  { height: 1.4em; width: 60%; }
.hzo-skeleton--circle { border-radius: var(--radius-full); aspect-ratio: 1; }
.hzo-skeleton--media  { aspect-ratio: 4 / 3; }
.hzo-skeleton--block  { min-height: 8rem; }

@media (prefers-reduced-motion: reduce) {
    .hzo-skeleton::after { animation: none; }
}
@media (forced-colors: active) {
    .hzo-skeleton { border: 1px solid CanvasText; background: Canvas; }
    .hzo-skeleton::after { display: none; }
}
@media print {
    .hzo-skeleton { display: none !important; }
}