/* ==========================================================================
   utilities.css — Small, single-purpose helper classes
   Depends on tokens.css.
   ========================================================================== */

/* ---- Visibility --------------------------------------------------------- */
.is-hidden { display: none !important; }

/* .sr-only lives in base.css; .not-sr-only restores visibility. */
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---- Text helpers ------------------------------------------------------- */
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-primary { color: var(--color-primary); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Spacing helpers ---------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mx-auto { margin-inline: auto; }

/* ---- Layout helpers ----------------------------------------------------- */
.full-width { width: 100%; }
.flow > * + * { margin-top: var(--space-4); }

/* ---- Scroll reveal (animations.js) -------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
[data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }

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