/* Homepage — editorial "index" treatment. Scoped under .hp so none of this
   leaks into the rest of the design system.

   Tailwind-refactor (task 4, 2026-08-06): everything expressible as a
   utility now lives in app/views/home/index.html.erb's class="…" — layout,
   spacing, color, typography, borders, hover states (via group/group-hover),
   the 520px bars/toc breakpoint (max-[520px]:) and the reduced-motion
   overrides on non-animation transitions (motion-reduce:transition-none).
   What's left here is exactly two @keyframes and the two element rules that
   drive them (.hp .rise, .hp .bars .fill) — pure KEEP category per the
   plan's own rule (animation/keyframes), same shape as tool_scenes.css's
   pilot conversion. The dead "grind spectrum band" section (.hp .spectrum/
   .scale/.tick/.pin — no live caller; home's real chart renders through
   shared/_micron_plot.html.erb) was deleted outright, not converted. */

/* ── Staggered load reveal ───────────────────────────────────────────────
   One orchestrated entrance beats scattered micro-interactions. Elements
   carry --d for their delay. */
@keyframes hp-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.hp .rise {
  opacity: 0;
  animation: hp-rise .7s cubic-bezier(.22,.68,.36,1) forwards;
  animation-delay: var(--d, 0ms);
}

/* ── Makers, by coverage ─────────────────────────────────────────────────
   The bar length IS how many grinders we chart for that maker, so the block
   reads as a small chart rather than a menu — and it rhymes with the micron
   plot above it. */
@keyframes hp-grow { from { transform: scaleX(0) } }
/* .hp .bars .fill's entrance grow-in: transform-origin is the animation's
   scale pivot, animation-delay is per-row stagger set inline via --d. Layout/
   color for .bars live in markup; only the animated half stays here. */
.hp .bars .fill {
  transform-origin: left center;
  animation: hp-grow .8s cubic-bezier(.22,.68,.36,1) backwards;
  animation-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .hp .rise, .hp .bars .fill { animation: none; opacity: 1 }
}