/* Catalogue-only rules: original geometry, one reveal per document entry. */
html.products-route,
.products-route body { background: #000; }
.products-route .scroll-container > :not(#Products) { display: none; }
.products-route .scroll-container { scroll-behavior: auto; scroll-snap-type: none; }
.products-route #Products { --catalogue-rise: 16px; }
.products-route #Products > .section-header {
  animation: catalogue-heading 400ms cubic-bezier(.22,1,.36,1) backwards;
}
.products-route #Products .product-card {
  animation: catalogue-card 400ms cubic-bezier(.22,1,.36,1) backwards;
}
.products-route #Products .product-card:nth-child(2) { animation-delay: 120ms; }
.products-route #Products .product-card:nth-child(3) { animation-delay: 240ms; }
@keyframes catalogue-card {
  from { opacity: 0; transform: translateY(var(--catalogue-rise)) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes catalogue-heading {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .products-route #Products { --catalogue-rise: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .products-route #Products > .section-header,
  .products-route #Products .product-card { animation: none; }
}
/* Anton's heading is one line at these widths. Reserve that line while an
   embedded font decodes, so the wider fallback cannot push the cards down. */
.products-route #Products > .section-header h2 {
  white-space: nowrap;
  overflow: clip;
}