/* ============================================
   Skeleton — gradient-free loading placeholder.

   The pulse is a calm OPACITY animation on a neutral surface fill — a
   color-mix between two surface-container tiers. There is NO shimmer /
   sweep gradient anywhere (FR-147 / A10): the snackbar scrim is the
   system's only sanctioned gradient. The animation honors
   prefers-reduced-motion.

   The fill is neutral chrome — no accent, no severity hue (AD-11). It
   sits on the host surface family it's placed in; the surface-container
   tiers read on both the desk and the inverse card stack, in both themes
   (AD-13).

   BEM block: `skeleton`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: __shape (one placeholder), __line (a text line). Modifiers:
   --line / --block / --circle.
   ============================================ */

.skeleton {
  display: block;
  width: 100%;
}

/* Line variant stacks its text lines with a consistent gap. */
.skeleton--line {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.skeleton__shape {
  display: block;
  /* Neutral fill — a color-mix between two surface-container tiers. This is
     a flat fill, NOT a gradient: there is no shimmer sweep, no linear- /
     radial-gradient. The pulse comes from the opacity animation below. */
  background: color-mix(
    in oklch,
    var(--md-sys-color-surface-container-high) 60%,
    var(--md-sys-color-surface-container-highest)
  );
  border-radius: var(--md-sys-shape-corner-small);
  /* Calm pulse: alternate opacity, slow tempo, standard easing. */
  animation: skeleton-pulse var(--md-sys-motion-duration-extra-long2)
    var(--md-sys-motion-easing-standard) infinite alternate;
}

/* A single text line — height from the body typescale, full width by default
   (the element narrows the last line of a paragraph via inline width). */
.skeleton__line {
  height: 0.85em;
  width: 100%;
}

/* Block — arbitrary rectangle (card / image placeholder). */
.skeleton--block .skeleton__shape {
  height: 120px;
  border-radius: var(--md-sys-shape-corner-medium);
}

/* Circle — avatar / icon placeholder. */
.skeleton--circle .skeleton__shape {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
}

@keyframes skeleton-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton__shape {
    animation: none;
  }
}