/* docs/DESIGN.md #2.1 — motif de lamelles, transitions et indicateur de chargement. */
@layer components {
  .slats {
    display: block;
    width: 100%;
    height: var(--slats-height, clamp(3.5rem, 8vw, 6.5rem));
    color: inherit;
  }

  .slats--small {
    height: var(--slats-height, 1.5rem);
  }

  .slats--loading {
    height: 1.5rem;
    width: 4rem;
  }

  .slats--loading rect {
    animation: slats-pulse 1.2s var(--ease) infinite;
    opacity: .25;
  }

  .slats--loading rect:nth-child(1) { animation-delay: 0ms; }
  .slats--loading rect:nth-child(2) { animation-delay: 120ms; }
  .slats--loading rect:nth-child(3) { animation-delay: 240ms; }
  .slats--loading rect:nth-child(4) { animation-delay: 360ms; }
  .slats--loading rect:nth-child(5) { animation-delay: 480ms; }
  .slats--loading rect:nth-child(6) { animation-delay: 600ms; }

  @keyframes slats-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .slats--loading rect {
      animation: none;
      opacity: 1;
    }
  }
}