/* ==========================================================================
   utilities.css — Scroll reveal + helper utilities (loaded last)
   ========================================================================== */

@layer utilities {
  /* Scroll reveal: elements start hidden, JS adds .is-visible */
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  /* If JS is disabled, never hide content */
  .no-js [data-reveal] { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
  }

  /* Page load fade for the hero */
  .preload * { animation-play-state: paused !important; }

  /* Helpers */
  .stack { display: grid; gap: var(--space-4); }
  .stack-lg { display: grid; gap: var(--space-6); }
  .flow > * + * { margin-block-start: var(--space-4); }
  .text-center { text-align: center; }
  .text-muted { color: var(--text-2); }
  .mt-6 { margin-block-start: var(--space-6); }
  .mt-7 { margin-block-start: var(--space-7); }
  .hidden { display: none !important; }
  .full { width: 100%; }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .cluster--center { justify-content: center; }
}