/* =========================================
   SKELETON LOADING PLACEHOLDERS
   ========================================= */

/* Subtle shimmer animation */
@keyframes datochai-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* When skeleton is active, override common content areas */
body.skeleton-loading .site-header,
body.skeleton-loading .home-hero,
body.skeleton-loading .pakar-hero-section,
body.skeleton-loading .post-grid,
body.skeleton-loading .matrix-grid,
body.skeleton-loading .expert-carousel-wrapper,
body.skeleton-loading .methodology-grid,
body.skeleton-loading .charts-stack-container,
body.skeleton-loading .seo-prose-content,
body.skeleton-loading .faq-accordion-container,
body.skeleton-loading .site-footer,
body.skeleton-loading .datochai-post-card,
body.skeleton-loading .feature-card,
body.skeleton-loading .expert-master-card,
body.skeleton-loading .faq-item,
body.skeleton-loading .prediction-card,
body.skeleton-loading .single-entry-header,
body.skeleton-loading .single-entry-content,
body.skeleton-loading .cpt-glass-card {
  background: linear-gradient(90deg, var(--skeleton-base, #e0e0e0) 25%, var(--skeleton-shine, #f0f0f0) 50%, var(--skeleton-base, #e0e0e0) 75%) !important;
  background-size: 800px 100% !important;
  animation: datochai-shimmer 1.8s infinite linear !important;
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;           /* prevent clicks during loading */
  user-select: none;
}

/* Hide images and SVGs inside skeleton blocks */
body.skeleton-loading img,
body.skeleton-loading svg,
body.skeleton-loading .btn-view,
body.skeleton-loading .hero-cta,
body.skeleton-loading .view-all-btn,
body.skeleton-loading .pakar-cta-btn {
  opacity: 0 !important;
}

/* Keep text invisible (already covered by color:transparent, but reinforce) */
body.skeleton-loading h1,
body.skeleton-loading h2,
body.skeleton-loading h3,
body.skeleton-loading h4,
body.skeleton-loading p,
body.skeleton-loading span,
body.skeleton-loading a,
body.skeleton-loading li,
body.skeleton-loading button {
  color: transparent !important;
}

/* Dark mode support */
body.dark-mode.skeleton-loading .site-header,
body.dark-mode.skeleton-loading .home-hero,
body.dark-mode.skeleton-loading .post-grid,
body.dark-mode.skeleton-loading .datochai-post-card,
body.dark-mode.skeleton-loading .feature-card,
body.dark-mode.skeleton-loading .expert-master-card,
body.dark-mode.skeleton-loading .faq-item,
body.dark-mode.skeleton-loading .cpt-glass-card {
  background: linear-gradient(90deg, var(--skeleton-base-dark, #2a2a3a) 25%, var(--skeleton-shine-dark, #3a3a4a) 50%, var(--skeleton-base-dark, #2a2a3a) 75%) !important;
  background-size: 800px 100% !important;
}