/* ═══════════════════════════════════════════════════════
   VCP Deportes — Skeleton Loaders
   ═══════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-hover) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

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

/* ── Card skeleton ── */
.skeleton-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 0.0625rem solid var(--color-border);
  background: var(--color-surface);
}

.skeleton-card__poster {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.skeleton-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-card__line {
  height: 0.875rem;
  border-radius: var(--radius-xs);
}

.skeleton-card__line--title {
  width: 75%;
  height: 1.125rem;
}

.skeleton-card__line--meta {
  width: 50%;
}

.skeleton-card__line--tag {
  width: 30%;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  margin-top: var(--space-2);
}

/* ── Hero skeleton ── */
.skeleton-hero {
  width: 100%;
  padding: var(--space-16) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.skeleton-hero__line {
  height: 1rem;
  border-radius: var(--radius-pill);
}

.skeleton-hero__line--title {
  width: min(60%, 24rem);
  height: 2.5rem;
}

.skeleton-hero__line--subtitle {
  width: min(40%, 18rem);
  height: 1.25rem;
}

.skeleton-hero__line--button {
  width: 10rem;
  height: var(--touch-target);
  border-radius: var(--radius-pill);
  margin-top: var(--space-4);
}

/* ── Category chip skeleton ── */
.skeleton-chip {
  display: inline-flex;
  width: 7rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
}

/* ── Player skeleton ── */
.skeleton-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 56rem;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--color-surface-hover);
  }
}