/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }

.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--sp-4); }
.pt-6 { padding-top: var(--sp-6); }
.pt-8 { padding-top: var(--sp-8); }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--sp-4); }
.pb-6 { padding-bottom: var(--sp-6); }
.pb-8 { padding-bottom: var(--sp-8); }

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

.fs-small { font-size: 0.875rem; }
.fs-1 { font-size: var(--fs-1); }
.fs-2 { font-size: var(--fs-2); }
.fs-3 { font-size: var(--fs-3); }
.fs-4 { font-size: var(--fs-4); }

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
  .md-d-none { display: none; }
  .md-d-block { display: block; }
  .md-text-center { text-align: center; }
}

@media (max-width: 640px) {
  .sm-d-none { display: none; }
  .sm-d-block { display: block; }
}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

/* Base state - hidden */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid children */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }
.animate-on-scroll.delay-6 { transition-delay: 0.6s; }

/* Fade in from left */
.animate-on-scroll.from-left {
  transform: translateX(-30px);
}
.animate-on-scroll.from-left.is-visible {
  transform: translateX(0);
}

/* Fade in from right */
.animate-on-scroll.from-right {
  transform: translateX(30px);
}
.animate-on-scroll.from-right.is-visible {
  transform: translateX(0);
}

/* Scale up */
.animate-on-scroll.scale-up {
  transform: scale(0.95);
}
.animate-on-scroll.scale-up.is-visible {
  transform: scale(1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}