/* ============================================================
   API Trentine — Utilities
   ============================================================ */

/* ─── Utilities ─────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ─── Scroll-reveal entrance (js/reveal.js) ─────────── */
/* Uses a keyframe animation (not a transition) so it never clashes with a
   component's own `transition` (e.g. card hover) — which made it look janky. */
.reveal { opacity: 0; }
.reveal.is-visible { opacity: 1; animation: reveal-in .6s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.is-visible { animation: none; }
}