/* =========================================================
   06-UTILITIES.CSS
   Small helpers and subtle scroll-reveal animation.
   ========================================================= */

/* Spacing utilities */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-4); }
.mt-4  { margin-top: var(--space-6); }
.mt-6  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-4); }
.mb-4  { margin-bottom: var(--space-6); }
.mb-6  { margin-bottom: var(--space-8); }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.text-primary   { color: var(--color-primary); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }

.bg-surface { background: var(--color-surface); }

/* Highlight a word inside a heading */
.highlight {
  color: var(--color-primary);
  position: relative;
  white-space: nowrap;
}

/* Subtle scroll-reveal — applied via JS by adding .is-in */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }