/*
 * The placeholder a lazy Turbo Frame shows until it lands
 * (`shared/_loading_box`, `shared/_loading_lines`). Flat blocks that breathe,
 * not a gradient sweep; still under reduced motion.
 *
 * The height is data — the finished content's height, on purpose, so the page
 * does not jump — and arrives as a custom property:
 *
 *   <div class="skeleton" style="--height: 570px"></div>
 */
@layer components {
  @keyframes skeleton-breathe {
    50% { opacity: 0.55; }
  }

  .skeleton {
    block-size: var(--height, 100px);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-sunken);
    animation: skeleton-breathe 1.6s ease-in-out infinite;
  }

  .skeleton-lines {
    display: grid;
    align-content: space-evenly;
    block-size: var(--height, 100px);
  }

  .skeleton-lines__line {
    block-size: var(--line-height, 20px);
    border-radius: var(--radius-xs);
    background-color: var(--color-surface-sunken);
    animation: skeleton-breathe 1.6s ease-in-out infinite;

    &:nth-child(3n + 2) { inline-size: 88%; }
    &:nth-child(3n) { inline-size: 72%; }
  }
}