/* ═══════════════════════════════════════════════════════════
   MEGAFLIX — Skeleton Screen
   Aparece enquanto o catálogo carrega do D1
═══════════════════════════════════════════════════════════ */

@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.sk-shimmer {
  background: linear-gradient(90deg,
    #1a2030 25%,
    #232d42 50%,
    #1a2030 75%
  );
  background-size: 600px 100%;
  animation: sk-shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* Card skeleton — mesmas dimensões do .card real */
.sk-card {
  flex: 0 0 162px;
  width: 162px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-card-poster {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 10px;
}

.sk-card-title {
  height: 13px;
  width: 85%;
  border-radius: 4px;
}

.sk-card-sub {
  height: 11px;
  width: 55%;
  border-radius: 4px;
}

/* Hero skeleton */
.sk-hero {
  width: 100%;
  height: 380px;
  border-radius: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .sk-card { flex: 0 0 138px; width: 138px; }
}
@media (max-width: 480px) {
  .sk-card { flex: 0 0 120px; width: 120px; }
  .sk-hero { height: 220px; }
}