/* ============================================================
   MRGENIX — SKELETON.CSS
   Shimmering skeleton loader for images and text blocks
   ============================================================ */

/* ── BASE SKELETON ── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--primary-mid);
  border-radius: var(--radius);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  animation: shimmer 1.8s ease-in-out infinite;
  transform: translateX(-100%);
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── SKELETON SHAPES ── */
.sk-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: var(--primary-mid);
}
.sk-text.sk-w-100 { width: 100%; }
.sk-text.sk-w-80  { width: 80%; }
.sk-text.sk-w-60  { width: 60%; }
.sk-text.sk-w-40  { width: 40%; }

.sk-title {
  height: 28px;
  border-radius: 6px;
  margin-bottom: 14px;
  background: var(--primary-mid);
}

.sk-img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--primary-mid);
}
.sk-img-square  { height: 200px; }
.sk-img-tall    { height: 320px; }
.sk-img-hero    { height: 100vh; }

.sk-circle {
  border-radius: 50%;
  background: var(--primary-mid);
}
.sk-circle-sm  { width: 44px;  height: 44px; }
.sk-circle-md  { width: 64px;  height: 64px; }
.sk-circle-lg  { width: 100px; height: 100px; }

.sk-btn {
  height: 48px;
  border-radius: var(--radius);
  background: var(--primary-mid);
}
.sk-btn-sm { width: 120px; }
.sk-btn-md { width: 180px; }
.sk-btn-lg { width: 240px; }

/* ── SKELETON CARD ── */
.sk-card {
  background: var(--primary-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}
.sk-card .sk-icon {
  width: 52px; height: 52px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 1.2rem;
}

/* ── SKELETON NAVBAR ── */
.sk-navbar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  height: var(--nav-h);
}
.sk-navbar .sk-logo {
  width: 140px; height: 36px;
  border-radius: 6px;
  background: var(--primary-mid);
}
.sk-navbar .sk-links {
  display: flex; gap: 12px;
}
.sk-navbar .sk-link {
  width: 70px; height: 14px;
  border-radius: 4px;
  background: var(--primary-mid);
}

/* ── PAGE SKELETON OVERLAY ── */
#page-skeleton {
  position: fixed; inset: 0;
  z-index: 9998;
  background: var(--primary-dark);
  display: flex; flex-direction: column;
  padding: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#page-skeleton.hide {
  opacity: 0;
  pointer-events: none;
}

.sk-hero-wrap {
  flex: 1;
  padding: 100px 8% 60px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 20px;
}
.sk-hero-tag {
  width: 200px; height: 32px;
  border-radius: 99px;
  background: var(--primary-mid);
}
.sk-hero-h1-line {
  height: 56px; border-radius: 8px;
  background: var(--primary-mid);
}
.sk-hero-h1-line:nth-child(1) { width: 70%; }
.sk-hero-h1-line:nth-child(2) { width: 55%; }
.sk-hero-h1-line:nth-child(3) { width: 65%; }
.sk-hero-desc { height: 14px; border-radius: 4px; background: var(--primary-mid); }
.sk-hero-desc:nth-child(1) { width: 90%; margin-top: 10px; }
.sk-hero-desc:nth-child(2) { width: 75%; }
.sk-hero-btns {
  display: flex; gap: 14px; margin-top: 10px;
}
.sk-hero-btn {
  height: 50px; border-radius: var(--radius);
  background: var(--primary-mid);
}
.sk-hero-btn:nth-child(1) { width: 200px; }
.sk-hero-btn:nth-child(2) { width: 160px; }

/* All skeleton elements get shimmer */
#page-skeleton .skeleton,
.sk-hero-tag,
.sk-hero-h1-line,
.sk-hero-desc,
.sk-hero-btn,
.sk-logo,
.sk-link,
.sk-icon,
.sk-text,
.sk-title,
.sk-img,
.sk-circle,
.sk-btn,
.sk-card .sk-icon {
  position: relative; overflow: hidden;
}
#page-skeleton .skeleton::after,
.sk-hero-tag::after,
.sk-hero-h1-line::after,
.sk-hero-desc::after,
.sk-hero-btn::after,
.sk-logo::after,
.sk-link::after,
.sk-icon::after,
.sk-text::after,
.sk-title::after,
.sk-img::after,
.sk-circle::after,
.sk-btn::after,
.sk-card .sk-icon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 40%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.05) 60%,
    transparent 100%
  );
  animation: shimmer 1.8s ease-in-out infinite;
  transform: translateX(-100%);
}