/*
 * Mind Excellence — Landing Page Skeleton Loading Styles
 * frontend/public/css/landing-skeletons.css
 *
 * Applied to [data-lp-*] elements before me-content.js hydrates them.
 * The .lp-skeleton class is removed by _resolveSkeletons() in me-content.js
 * after the config API responds successfully (or fails with fallback).
 *
 * Strategy:
 *   - Text elements (data-lp, data-lp-html): shimmer overlay using ::after
 *     so the hardcoded fallback text remains readable without layout shift
 *   - Stat numbers (data-lp-stat): dim the placeholder "0" value
 *   - Stat labels: light shimmer
 *
 * The shimmer is subtle — it communicates "loading" without
 * making the page look broken if the API is slow.
 */

/* —— Shimmer animation ————————————————————————————————————————————— */
@keyframes lp-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* —— Base skeleton style —————————————————————————————————————————— */
/* Adds a shimmer highlight over the existing text content.
   Uses a pseudo-element so no layout shift occurs. */
.lp-skeleton {
  position: relative;
  /* Ensure the element creates a stacking context for the overlay */
  isolation: isolate;
}

.lp-skeleton::after {
  content: '';
  position: absolute;
  inset: -2px -4px;                 /* slightly wider than text */
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    transparent             0%,
    rgba(255,255,255,.07)   40%,
    rgba(255,255,255,.13)   50%,
    rgba(255,255,255,.07)   60%,
    transparent             100%
  );
  background-size: 200% 100%;
  animation: lp-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;             /* shimmer is decorative only */
  z-index: 1;
}

/* —— Block-level elements: wider coverage ——————————————————————— */
h1.lp-skeleton::after,
h2.lp-skeleton::after {
  inset: -4px -8px;
  border-radius: 8px;
}

/* —— Stat numbers: dim the placeholder "0" ——————————————————————— */
.hero-stat-num .lp-skeleton {
  opacity: 0.25;
}

/* —— Stat labels: lighter shimmer ———————————————————————————————— */
.hero-stat-lbl.lp-skeleton {
  color: transparent;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  min-width: 80px;
  display: inline-block;
}

.hero-stat-lbl.lp-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent             0%,
    rgba(255,255,255,.12)   40%,
    rgba(255,255,255,.22)   50%,
    rgba(255,255,255,.12)   60%,
    transparent             100%
  );
  background-size: 200% 100%;
  animation: lp-shimmer 1.6s ease-in-out infinite;
}

/* —— Eyebrow chip: slightly wider ———————————————————————————————— */
.hero-eyebrow.lp-skeleton::after {
  border-radius: 99px;
}

/* —— Remove shimmer once resolved ———————————————————————————————— */
/* (me-content.js removes .lp-skeleton via classList.remove —
   the animation stops automatically as the class is gone) */