/* ================================================================
   Skeleton UI — Progressive Loading Placeholders
   ================================================================
   Modern, elegant shimmer skeleton loaders inspired by clean design.
   Includes reusable primitives (<SkeletonCard/>, <SkeletonLine/>),
   staggered text lines, neutral shimmer pulse, and dark/light modes.
   Loaded synchronously to prevent FOUC. Pairs with skeleton-loader.js.
   ================================================================ */

/* --- Shimmer keyframes ----------------------------------------------- */
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --- Base skeleton primitives ---------------------------------------- */
.skeleton,
.skeleton-line,
.skeleton-pill,
.skeleton-circle,
.skeleton-box {
  background: linear-gradient(
    90deg,
    var(--skeleton-light-bar) 0%,
    var(--skeleton-light-bar) 28%,
    var(--skeleton-light-shine) 50%,
    var(--skeleton-light-bar) 72%,
    var(--skeleton-light-bar) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
  pointer-events: none;
}

/* Dark mode / dark section shimmer */
.skeleton--dark,
.skeleton-card--dark .skeleton,
.skeleton-card--dark .skeleton-line,
.skeleton-card--dark .skeleton-pill,
.skeleton-card--dark .skeleton-circle,
.skeleton-card--dark .skeleton-box {
  background: linear-gradient(
    90deg,
    var(--skeleton-dark-bar) 0%,
    var(--skeleton-dark-bar) 28%,
    var(--skeleton-dark-shine) 50%,
    var(--skeleton-dark-bar) 72%,
    var(--skeleton-dark-bar) 100%
  );
  background-size: 200% 100%;
}

/* Light mode / light section shimmer */
.skeleton--light {
  background: linear-gradient(
    90deg,
    var(--skeleton-light-bar) 0%,
    var(--skeleton-light-bar) 28%,
    var(--skeleton-light-shine) 50%,
    var(--skeleton-light-bar) 72%,
    var(--skeleton-light-bar) 100%
  );
  background-size: 200% 100%;
}

/* --- Fade-out transition --------------------------------------------- */
.skeleton-fade-out {
  opacity: 0 !important;
  transition: opacity 250ms ease !important;
  pointer-events: none !important;
}

/* --- Error state (stops shimmer, shows static muted fill) ------------ */
.skeleton--error,
.skeleton-card.skeleton--error .skeleton-line,
.skeleton-card.skeleton--error .skeleton-pill {
  animation: none !important;
  background: var(--skeleton-dark-bar) !important;
}

.skeleton--light.skeleton--error {
  background: var(--skeleton-light-bar) !important;
}

/* --- Accessibility --------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-line,
  .skeleton-pill,
  .skeleton-circle,
  .skeleton-box {
    animation: none;
  }
}


/* ================================================================
   MODULAR SKELETON PRIMITIVES
   Reusable lines, pills, circles, and panels matching reference UI
   ================================================================ */

/* --- Skeleton Line (Typography placeholders) ------------------------- */
.skeleton-line {
  display: block;
  height: 8px;
  border-radius: 4px;
}

.skeleton-line--xs   { height: 6px; }
.skeleton-line--sm   { height: 8px; }
.skeleton-line--md   { height: 12px; }
.skeleton-line--lg   { height: 16px; }
.skeleton-line--title { height: 18px; border-radius: 5px; }

/* Width utility modifiers matching staggered visual hierarchy */
.skeleton-line--full { width: 100%; }
.skeleton-line--90   { width: 90%; }
.skeleton-line--85   { width: 85%; }
.skeleton-line--80   { width: 80%; }
.skeleton-line--75   { width: 75%; }
.skeleton-line--65   { width: 65%; }
.skeleton-line--55   { width: 55%; }
.skeleton-line--52   { width: 52%; }
.skeleton-line--45   { width: 45%; }
.skeleton-line--44   { width: 44%; }
.skeleton-line--35   { width: 35%; }
.skeleton-line--25   { width: 25%; }

/* --- Skeleton Pill (Badges, tags, buttons) --------------------------- */
.skeleton-pill {
  display: inline-block;
  height: 24px;
  border-radius: 100px;
}

/* --- Skeleton Circle (Avatars, icons, dots) -------------------------- */
.skeleton-circle {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Skeleton Card / Panel (Exact match to reference image) ---------- */
.skeleton-card {
  background: var(--skeleton-light-bg);
  border: 1px solid var(--skeleton-light-border);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.skeleton-card--dark {
  background: var(--skeleton-dark-bg);
  border-color: var(--skeleton-dark-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.skeleton-card__header {
  padding-bottom: 2px;
}

.skeleton-card__panel {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--skeleton-light-border);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.skeleton-card--dark .skeleton-card__panel {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--skeleton-dark-border);
}


/* ================================================================
   COMPONENT-SPECIFIC SKELETON OVERLAYS
   Hierarchical, zero-CLS skeletons tailored for CCS components
   ================================================================ */

/* --- Hero Background Skeleton ---------------------------------------- */
.skeleton-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 0;
}

/* --- Service Card Skeleton (Hierarchical Card Loader) ----------------- */
.skeleton-service-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 0;
  background: #0f0e0c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  box-sizing: border-box;
  overflow: hidden;
}

.skeleton-service-card .skeleton-card__top {
  display: flex;
  justify-content: flex-start;
}

.skeleton-service-card .skeleton-line--num {
  width: 24px;
  height: 10px;
  border-radius: 3px;
}

.skeleton-service-card .skeleton-card__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-service-card .skeleton-icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.skeleton-service-card .skeleton-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-service-card .skeleton-line--title {
  width: 78%;
  height: 16px;
  border-radius: 4px;
}

.skeleton-service-card .skeleton-line--sub {
  width: 45%;
  height: 10px;
  border-radius: 4px;
}

.skeleton-service-card .skeleton-rule {
  width: 34px;
  height: 2px;
  background: rgba(194, 106, 43, 0.35);
  border-radius: 1px;
  margin-top: 4px;
}

/* --- Project Card Skeleton (Hierarchical Project Card Loader) -------- */
.skeleton-project-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-lg);
  background: #141210;
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  box-sizing: border-box;
  overflow: hidden;
}

.skeleton-project-card .skeleton-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.skeleton-project-card .skeleton-line--cat {
  width: 68px;
  height: 10px;
  border-radius: 3px;
}

.skeleton-project-card .skeleton-pill--loc {
  width: 104px;
  height: 24px;
  border-radius: var(--radius-sm);
}

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

.skeleton-project-card .skeleton-line--title {
  width: 72%;
  height: 20px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.skeleton-project-card .skeleton-line--scope-1 {
  width: 86%;
  height: 10px;
  border-radius: 3px;
}

.skeleton-project-card .skeleton-line--scope-2 {
  width: 54%;
  height: 10px;
  border-radius: 3px;
}

.skeleton-project-card .skeleton-pill--btn {
  width: 76px;
  height: 32px;
  border-radius: 100px;
  margin-top: 6px;
}

/* --- Showcase Slider Skeleton ---------------------------------------- */
.skeleton-showcase {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--dark);
}

.skeleton-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
}

/* --- Video Thumbnail Skeleton ---------------------------------------- */
.skeleton-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-md);
  background: #191714;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-video .skeleton-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Founder Portrait Skeleton --------------------------------------- */
.skeleton-founder {
  position: absolute;
  inset: 16px;
  z-index: 1;
  border-radius: 20px;
  background: linear-gradient(158deg, #2b251f 0%, #1f1a15 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.skeleton-founder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
}

/* --- Contact Background Skeleton ------------------------------------- */
.skeleton-contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--dark);
}

/* --- Modal Gallery Cell Skeleton ------------------------------------- */
.modal__gallery-cell {
  position: relative;
}

.skeleton-modal-cell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: var(--radius-sm);
  background: #1c1a17;
  overflow: hidden;
}

.skeleton-modal-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
}

/* --- Third Space Image Skeleton -------------------------------------- */
.skeleton-thirdspace {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 52%;
  min-width: min(360px, 100%);
  z-index: 0;
  background: var(--surface-alt);
}

/* --- PM Infinity Visual Skeleton ------------------------------------- */
.skeleton-pminfinity {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #021a12;
}

.skeleton-pminfinity::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
}


/* ================================================================
   RESPONSIVE SKELETON RULES
   Mirror exact breakpoints from responsive.css & responsive-home.css
   ================================================================ */

@media (max-width: 1060px) {
  .skeleton-thirdspace {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .skeleton-founder {
    inset: 10px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .skeleton-service-card {
    padding: 16px;
  }

  .skeleton-project-card {
    padding: 18px;
  }
}