/* ======================================================
   SKELETON BASE
====================================================== */

.mjv2-skeleton{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border-radius:12px;
}

/* shimmer layer */

.mjv2-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  animation:mjv2-skeleton-shimmer 1.2s infinite;
}

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

/* ======================================================
   SKELETON TEXT
====================================================== */

.mjv2-skeleton-text{
  height:12px;
  border-radius:8px;
}

.mjv2-skeleton-text.sm{
  height:10px;
}

.mjv2-skeleton-text.lg{
  height:16px;
}

/* width helpers */

.mjv2-skeleton-w-40{width:40%}
.mjv2-skeleton-w-60{width:60%}
.mjv2-skeleton-w-80{width:80%}
.mjv2-skeleton-w-100{width:100%}

/* ======================================================
   SKELETON COVER
====================================================== */

.mjv2-skeleton-cover{
  width:100%;
  aspect-ratio:3/4;
  border-radius:14px;
}

/* ======================================================
   SKELETON CARD
====================================================== */

.mjv2-skeleton-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mjv2-skeleton-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ======================================================
   SKELETON LIST ITEM
====================================================== */

.mjv2-skeleton-list{
  display:flex;
  gap:14px;
  align-items:center;
}

.mjv2-skeleton-list-cover{
  width:70px;
  height:100px;
  border-radius:10px;
}

.mjv2-skeleton-list-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ======================================================
   SKELETON BUTTON
====================================================== */

.mjv2-skeleton-btn{
  width:90px;
  height:36px;
  border-radius:10px;
}

/* ======================================================
   DARK MODE POLISH
====================================================== */

body.dark .mjv2-skeleton{
  background:rgba(255,255,255,.05);
}