/**
 * Skeleton loading state for BigPipe placeholders.
 *
 * BigPipe defers per-user fragments behind `<span data-big-pipe-placeholder-id>`
 * markers. By default those are zero-height empty spans, so the layout
 * around them jumps when the placeholder resolves and the real content
 * streams in. This file gives those spans a pulsing skeleton appearance
 * so the user sees "something is loading here" instead of empty space
 * + content pop-in.
 *
 * The selector matches every BigPipe placeholder, but for known-large
 * placeholders we override block size + shape to approximate the final
 * content's footprint.
 */

[data-big-pipe-placeholder-id] {
  display: inline-block;
  min-height: 1.2em;
  min-width: 6em;
  vertical-align: middle;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: np-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* Activity feed: stream + following teaser grid. Tall + full width. */
[data-big-pipe-placeholder-id*="activity_feed_lazy_builder"] {
  display: block;
  min-height: 32rem;
  width: 100%;
  margin: 1rem 0;
}

/* Workshops-in strip: a row of workshop cards. */
[data-big-pipe-placeholder-id*="renderWorkshopsIn"] {
  display: block;
  min-height: 10rem;
  width: 100%;
  margin: 1rem 0;
}

/* Open-contests grid: a 2x2 grid of contest cards. */
[data-big-pipe-placeholder-id*="renderOpenContests"] {
  display: block;
  min-height: 14rem;
  width: 100%;
  margin: 1rem 0;
}

/* New-member welcome strip: a row of three cards, only when shown. */
[data-big-pipe-placeholder-id*="renderNewMemberWelcome"] {
  display: block;
  min-height: 10rem;
  width: 100%;
  margin: 1rem 0;
}

/* Catch-up strip: small horizontal strip, only when shown. */
[data-big-pipe-placeholder-id*="catchup_lazy_builder"] {
  display: block;
  min-height: 4rem;
  width: 100%;
}

/* Hero greeting: a short text line, sized to match the h2 it lives in. */
[data-big-pipe-placeholder-id*="hero_greeting_lazy_builder"] {
  min-width: 14em;
  height: 1em;
  vertical-align: baseline;
}

/* User timeline section on /user/{uid}: a tall content block. */
[data-big-pipe-placeholder-id*="neopoet_timeline.lazy_builder"] {
  display: block;
  min-height: 30rem;
  width: 100%;
  margin: 1rem 0;
}

@keyframes np-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Respect reduced-motion preference — drop the shimmer animation, keep
 * the static placeholder box so the loading affordance still appears.
 */
@media (prefers-reduced-motion: reduce) {
  [data-big-pipe-placeholder-id] {
    animation: none;
  }
}