/**
 * Layer: utilities
 * Purpose: Helper classes with .u- prefix for overrides
 * Dependencies: base.css, components.css
 */

/* Display Utilities */
.u-hidden {
  display: none !important;
}

.u-block {
  display: block !important;
}

.u-inline-block {
  display: inline-block !important;
}

.u-flex {
  display: flex !important;
}

.u-grid {
  display: grid !important;
}

/* Text Alignment */
.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

/* Font Size Utilities */
.u-font-size-xs {
  font-size: 1.2rem !important;
}

.u-font-size-sm {
  font-size: 1.4rem !important;
}

.u-font-size-md {
  font-size: 1.6rem !important;
}

.u-font-size-lg {
  font-size: 2rem !important;
}

.u-font-size-xl {
  font-size: 2.4rem !important;
}

.u-font-size-2xl {
  font-size: 3.2rem !important;
}

.u-font-size-3xl {
  font-size: 4rem !important;
}

/* Spacing Utilities */
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-sm {
  margin-top: var(--mh--spacing--sm) !important;
}

.u-mt-md {
  margin-top: var(--mh--spacing--md) !important;
}

.u-mt-lg {
  margin-top: var(--mh--spacing--lg) !important;
}

.u-mt-xl {
  margin-top: var(--mh--spacing--xl) !important;
}

.u-mt-2xl {
  margin-top: var(--mh--spacing--2xl) !important;
}

.u-mt-3xl {
  margin-top: var(--mh--spacing--3xl) !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-sm {
  margin-bottom: var(--mh--spacing--sm) !important;
}

.u-mb-md {
  margin-bottom: var(--mh--spacing--md) !important;
}

.u-mb-lg {
  margin-bottom: var(--mh--spacing--lg) !important;
}

.u-mb-xl {
  margin-bottom: var(--mh--spacing--xl) !important;
}

.u-mb-2xl {
  margin-bottom: var(--mh--spacing--2xl) !important;
}

.u-mb-3xl {
  margin-bottom: var(--mh--spacing--3xl) !important;
}

/* Responsive Utilities */
@media (min-width: 768px) {
  .u-hidden\@md {
    display: none !important;
  }

  .u-block\@md {
    display: block !important;
  }
}

@media (min-width: 1100px) {
  .u-hidden\@lg {
    display: none !important;
  }

  .u-block\@lg {
    display: block !important;
  }
}

/* Color Utilities */
.u-color-accent {
  color: var(--mh--color--accent01-500) !important;
}

.u-bg-light {
  background-color: var(--mh--color--surface-light) !important;
}

.u-bg-dark {
  background-color: var(--mh--color--surface-dark) !important;
}

/* Scroll Animation Utilities */
.u-fade-in {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.u-fade-in-up {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.u-fade-in-left {
  opacity: 0;
  transform: translateX(-4rem);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.u-fade-in-right {
  opacity: 0;
  transform: translateX(4rem);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.u-fade-in-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-fade-in-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Animation Delays */
.u-delay-1 {
  transition-delay: 0.1s;
}

.u-delay-2 {
  transition-delay: 0.2s;
}

.u-delay-3 {
  transition-delay: 0.3s;
}

.u-delay-4 {
  transition-delay: 0.4s;
}

.u-delay-5 {
  transition-delay: 0.5s;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .u-fade-in,
  .u-fade-in-up,
  .u-fade-in-left,
  .u-fade-in-right,
  .u-fade-in-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}