/* skeleton — @tokens: --skeleton-text-height, --skeleton-title-height, --skeleton-circle-size */
/* ─── Skeleton ────────────────────────────────────────────────────────
   Loading placeholder / skeleton screen. Purely presentational — markup
   is aria-hidden and a sibling sr-only "Loading…" carries the meaning.
   Default is a cheap, GPU-free opacity pulse (reduced-motion-safe); the
   optional --shimmer modifier adds a swept highlight. Shape modifiers
   (text / title / circle / media) size the placeholder to its content. */
@keyframes hzo-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@keyframes hzo-skeleton-shimmer {
    100% { transform: translateX(100%); }
}

.hzo-skeleton {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--bg-alt);
    border-radius: var(--radius-control);
    animation: hzo-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Shape modifiers ─────────────────────────────────────────────── */
.hzo-skeleton--text {
    height: var(--skeleton-text-height, 0.8em);
    border-radius: var(--radius-control);
    margin-bottom: var(--space-xs);
}

.hzo-skeleton--title {
    height: var(--skeleton-title-height, 1.4em);
}

.hzo-skeleton--circle {
    width: var(--skeleton-circle-size, 48px);
    height: var(--skeleton-circle-size, 48px);
    border-radius: var(--radius-full);
}

.hzo-skeleton--media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-panel);
}

/* ── Optional shimmer ────────────────────────────────────────────────
   A moving highlight swept across the placeholder. Disables the base
   pulse so the two effects don't compound. */
.hzo-skeleton--shimmer {
    animation: none;
}
.hzo-skeleton--shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--card-bg, #fff) 60%, transparent),
        transparent
    );
    animation: hzo-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ── Reduced motion — static placeholder, no motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hzo-skeleton,
    .hzo-skeleton--shimmer::after {
        animation: none;
    }
}